Web Services Blog

Web Services

Reusable Classes

Reusable Classes Colors, Padding & Borders Text Modifiers Color Overlays ButtonsResponsive Videos Mobile/Desktop Classes TooltipsFloats & Alignment

About

DSU Web Services is in the process of making our website’s design more modular, meaning that codes and styles are broken up into small pieces that can be easily reused.

This is very much a work in progress, but below you will find documentation on some of the reusable CSS classes we have developed for our web team and more experienced editors to use.

We recommend always using an existing CSS class rather than writing your own styles, because WordPress has a tendency to eat any styles written in the Page/Post editor(it does this because the editor is for content, not CSS!).

How to Use

The format to use classes is as follows:


<a class=”myCustomClass1 myCustomClass2″ href=”coolink.html”>My cool link</a>


Colors, Padding & Borders

We have two padding classes, “pad1” and “pad2.” For alignment of divs, we have “float-left“, “float-right“, “clear” and “clearfix.” For borders you can choose “thin-border” and “thick-border.” For background colors, we have 6 options. They also automatically change your text-color!

Update Nov. 26, 2018: Gutenberg has claimed their own versions of these reusable colours, paddings, and border options. We will keep these classes for 6 months after the release of Gutenberg to give everyone time to transition, but these classes will be wiped from our CSS afterward.  Thanks!


I have “is-maroon-bg pad2” classes added


I have “is-red-bg pad1” classes added


I have “is-black-bg” class added

I have “is-white-bg pad1 thin-border” classes added


I have “is-medium-grey-bg pad1” classes added


I have “is-light-bg pad1 thick-border” classes added


I have “is-light-bg pad1 thick-border” classes added




Text Modifiers

Update Nov. 26, 2018Gutenberg has claimed their own versions of these reusable text modifiers. We will keep these classes for 6 months after the release of Gutenberg to give everyone time to transition, but these classes will be wiped from our CSS afterward.  Thanks!

This paragraph has “is-red-text” class applied.

This paragraph has “is-maroontext” class applied.

This paragraph has “is-medium-grey-text” class applied.

This paragraph has “is-dark-grey-text” class applied.

This paragraph has “is-white-text” class applied

This paragraph has “is-exbold” class applied.

This paragraph has “is-small” class applied.

This paragraph has “is-rb-light” class applied.

This paragraph has “is-rb-medium” class applied.


Color Overlays

For layering text over images, we have various semi-transparent backgrounds:

I’m a <p> with a “white-overlay” class

I’m a <p> with a “black-overlay”,”is-white-text” and “pad2” class

I’m a <p> with a “red-overlay” and “is-white-text” class

I’m a <p> with a “blue-overlay” and “is-white-text” class


Responsive Videos


Update Nov. 26, 2018: Gutenberg has claimed their own versions of these reusable responsive video options. We will keep these classes for 6 months after the release of Gutenberg to give everyone time to transition, but these classes will be wiped from our CSS afterward. Thanks!

Button Classes


To create a button, add the following classes to an <a> tag.


btn
btn2
btn3
btn4



iframe wrapped with div class=”videoWrapper”

iframe wrapped with div class=”youtube”


Mobile/Desktop Classes


Items with “mobile” class are set to display:none on screens larger than 768px, and display:inherit on screens smaller than 768px. Conversely, class “desktop” is display:inherit on screens larger than 768px and set to display:none on screens smaller than 768px;






I have an icon with the mobile class






I have an icon with the desktop class


DSU Icon Library


We made a font of commonly used graphics to be used as icons. The DSU Icon library can be used in conjunction with the font-awesome size modifiers. Apply the class “dsu-icon” to an i tag, and the class for the specific icon you want:

Example:


<i class=”dsu-icon dsu-big-d fa-2x” aria-label=”hidden”> </i>

  • fa-4x
  • fa-3x
  • dsu-big-d fa-2x
  • fa-1x
  • dsu-bison
  • dsu-canvas
  • dsu-marker
  • dsu-mountain


Tooltips





bison-1980589_640

hover over me!


Here’s how they work:


<span class=”hint–right hint ” aria-label=”hello I’m a hint!”>

You can use the following classes on them: hint–bottom-right, hint–bottom, hint–bottom-left, hint–left, hint–right, hint–top-right, hint–top, hint–top-lefthint–small, hint–medium, hint–largehint–error, hint–info, hint–warning, hint–success, hint–rounded, hint–bounce, hint–no-animate, hint–always, hint–dixie.



Floats


Floats can be tricky, but just remember to always clear your floats by either:

  1. Add the class “clearfix” to the parent element containing the floats
  2. Add a sibling element after the floats with the class “clear”

I have a clearfix class on my container


I have a paragraph with a “clear” class after the floated icons


hi!

Alignment


bison-1980589_640
i’m in a div with alignleft class

Burmese. Siamese ocelot. Russian blue russian blue so american shorthair so burmese. American bobtail persian yet puma or jaguar, but ocelot for tom burmese. Mouser kitten grimalkin ocelot scottish fold or cougar siberian. Kitten havana brown cheetah, yet bobcat but bombay manx. Tomcat cougar. Kitty ragdoll yet ragdoll american shorthair abyssinian , lynx. Thai leopard panther. Havana brown cheetah. Ragdoll bombay but leopard. Devonshire rex american bobtail. Cheetah siamese panther so malkin cougar tiger.

Birman persian bengal manx but ocicat for tom. Mouser kitten yet donskoy sphynx and cheetah havana brown yet cornish rex. Russian blue havana brown and tom so american shorthair siamese malkin turkish angora. Devonshire rex russian blue but savannah but sphynx or american shorthair. Cheetah.

bison-1980589_640
I’m in a div with an alignright class

Cougar. Tabby donskoy ocelot and ocelot siamese and siamese. Abyssinian devonshire rex manx. Abyssinian puma mouser yet bobcat. Tiger tabby but malkin. Donskoy tom cougar or turkish angora yet tiger ocelot and tom. Manx lion, for maine coon but kitty yet cornish rex. Ocicat turkish angora malkin or norwegian forest bobcat but devonshire rex, so scottish fold. American bobtail.

Munchkin. Donskoy bobcat for maine coon ocelot or himalayan. Tom lynx grimalkin egyptian mau, egyptian mau. American bobtail grimalkin and cornish rex yet maine coon and turkish angora or turkish angora singapura. Ocelot abyssinian . Panther abyssinian .

Singapura persian devonshire rex. American shorthair. Persian. Burmese thai, kitten. Ocelot siamese so ocicat so lion maine coon so tabby. Norwegian forest norwegian forest so bobcat bengal. British shorthair mouser.

bison-1980589_640
i’m in a div with alignnone class

Singapura persian devonshire rex. American shorthair. Persian. Burmese thai, kitten. Ocelot siamese so ocicat so lion maine coon so tabby. Norwegian forest norwegian forest so bobcat bengal. British shorthair mouser. Mouser bengal, yet cougar american shorthair yet persian cornish rex.

bison-1980589_640
i’m in a div with aligncenter class

Thai cheetah. Ragdoll singapura, for savannah. Savannah persian, so himalayan. Manx bobcat but lynx bobcat, and tom ragdoll or tiger. Norwegian forest. Ragdoll ragdoll jaguar bombay, turkish angora or malkin yet puma. Havana brown grimalkin scottish fold for american shorthair persian, cornish rex. Birman burmese mouser so tabby yet donskoy. bison-1980589_640 This image has a class “display-inline-block”.  Balinese mouser yet ocelot egyptian mau tom mouser. Lion thai and tiger .


Reserved IDs & Classes



There are some classes and id’s we do not recommend you use for custom styling. They are used base or default elements and can have unexpected results when used on custom content.


The list of ID’s you should never define in custom styles:

  • #content-header
  • #cse
  • #footer-social-widget
  • #photo_section
  • #logo
  • #desktop
  • #department
  • #mobilemenu
  • #mobile
  • #universal
  • #icons
  • #links
  • #ribbonbar


The list of classes you should never define in custom styles:

  • container
  • left-sidebar
  • right-sidebar
  • footer-links
  • overlay
  • video
  • big-header
  • small-header
  • no-header
  • searchbar
  • row
  • flex-row
  • resource-box
  • btn, btn2, btn3, btn4