Utility Classes

Display

Different ways to display your elements.

Example

hide

 
 
 

show

 
 
 

inline

 
 
 

inlineBlock

 
 
 

inlineMiddle

 
 
 

inlineTop

 
 
 

visually-hidden

Code
					
<div class="show"></div>
Notes

None at this time.

Resources

Sass File(s)/sass/core/_utility.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

visually-hidden class is used to hide text visually but still allow it to be read by a screen reader.

Visibility

Hide or show elements while allowing them to take up space on the screen.

Example

invisible

visible

 
 
 
Code
					
<div class="invisible"></div>
Notes

None at this time.

Resources

Sass File(s)/sass/core/_utility.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Rotate

Rotate your element quickly with these classes.

Example

rotate45

rotate90

rotate180

rotate270

Code
					
<div class="rotate45"></div>
Notes

None at this time.

Resources

Sass File(s)/sass/core/_utility.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Width & Height

Adjust your elements height or width with these classes.

Example

fullWidth

 

fullHeight

 

autoWidth

      

autoHeight

 
Code
					
<div class="fullWidth"></div>
Notes

None at this time.

Resources

Sass File(s)/sass/core/_utility.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Rounded Corners

Easily add rounded corner to your elements.

Example

roundCorners3

 

roundCorners5

 

roundCorners8

 

roundCorners10

 

roundCornersBtm10

 
Code
					
<div class="roundCorners10"></div>
Notes

None at this time.

Resources

Sass File(s)/sass/core/_utility.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Miscellaneous

Example

layoutCenter

 

overflowHidden

HereIsAReallyLongWordWithoutABreakInItToShowYouHowOverflowHiddenWorks.

dropdownShadow

 

reset

  • this list has no
  • padding or margins

pointer

 

responsiveImg

responsive image class example

posAbsolute

 

posRelative

 
Code
					
<div class="layoutCenter"></div>
<div class="overflowHidden"></div>
<div class="dropdownShadow"></div>
<ul class="reset"></ul>
<div class="pointer"></div>
<img class="responsiveImg" src="" alt="" height="" width="" />
<div class="posAbsolute"></div>
<div class="posRelative"></div>
Notes

None at this time.

Resources

Sass File(s)/sass/core/_utility.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

To Top