CSS Classes
This content is intended for the advanced web user.
CSS classes are the proper way to control the appearance and styling of HTML content on the web.
The optional classes below serve as a pool of available styles from which to choose from, in order to avoid proliferation of duplicate styles repeated on pages across the University, leading to slow performance and difficult maintanability of websites.
When used in conjuntion with eachother, in different arrangements, the below classes make for a powerful, extendable, reusable solution for doing the majority of things needed, such as: light-grids / floats / buttons / percentages / margin / padding / and handling text.
Do not write inline CSS styles.
Handling Image / Text Combinations
Description
Initiates a yellow button with white text.
Markup
<p><a class="button" href="#">Link Name</a></p>
Example
Link Name
Back to Top
Description
Initiates a button which displays an arrow offset to the left of a piece of text.
Markup
<p><a class="more-button" href="#">Link Name</a></p>
Example
Link Name
Back to Top
Before List
Description
Removes space before a list. Add class to the element before a list.
Markup
<p class="before-list">Text before a list.</p>
Example
Text before a list WITH class.
Text before a list WITHOUT class.
Back to Top
Fade
Description
Initiates a 60% opacity fade on hover.
Markup
<a class="fade" href="#"><img src="my-image.jpg" /></a>
Example
Back to Top
No Scale
Description
Disables scaling on an element, recommended for icons, logos, and other small graphics.
Markup
<img class="no-scale" src="my-image.jpg" />
Example
Back to Top
Percentages
Description
Reduces the size of an element based off the width of its parent container. This can be applied in multiples of 5% from 5 - 95.
Markup
<img class="percent-15" src="my-image.jpg" />
<img class="percent-35" src="my-image.jpg" />
<img class="percent-70" src="my-image.jpg" />
Example
Back to Top
Clearfix
Description
Apply this class to the parent container of floated elements. It will clear floats.
Markup
<div class="clearfix">
Float items inside this container.
</div>
Example
Back to Top
Float Left
Description
Initiates an element to float left. Defaults to 50% width and has minimal margin on the right and bottom sides. These values can be overridden if necessary.
Basic Markup
<div class="clearfix">
<img class="float-left" src="my-image.jpg" />
<p>Text goes here.</p>
</div>
Basic Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Extended Markup - Overriding percent and margin values
<div class="clearfix">
<img class="float-left percent-15 marg-1" src="my-image.jpg" />
<p>Text goes here.</p>
</div>
Extended Example - Overriding percent and margin values
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Back to Top
Float Right
Description
Initiates an element to float right. Defaults to 50% width and has minimal margin on the left and bottom sides. These values can be overridden if necessary.
Basic Markup
<div class="clearfix">
<img class="float-right" src="my-image.jpg" />
<p>Text goes here.</p>
</div>
Basic Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Extended Markup - Overriding percent and margin values
<div class="clearfix">
<img class="float-right percent-15 marg-1" src="my-image.jpg" />
<p>Text goes here.</p>
</div>
Extended Example - Overriding percent and margin values
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Back to Top
Margin
Description
Adds a small amount of margin to an element around each corner. This can be applied in multiples of 1% from 1 - 5.
Markup
<img class="marg-5" src="my-image.jpg" />
Example (red border illustrates space applied)
Back to Top
Padding
Description
Adds a small amount of padding to an element around each corner. This can be applied in multiples of 1% from 1 - 5.
Markup
<img class="pad-5" src="my-image.jpg" />
Example (red border illustrates space applied)
Back to Top
Scale
Description
Scales entire container and all of its contents proportionally. This can be applied in multiples of 10% from 10 - 90.
Markup
<div class="scale-50">
<img src="my-image.jpg" />
<p>Text goes here.</p>
</div>
Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Back to Top
Fit Vids
Back to Top
Marketing Box
Description
An image with text in a faded blue bar sitting on top of the image. A link is necessary. Do not mix double and triple in the same clearfix container. If you want to have a row of three, then a row of two, wrap the first row in a clearfix container, and then the second row in another clearfix container. It is possible to wrap the entire <a> tag in a <div> and put the classes there.
Markup for two in a row
<a class="marketing-box double" href="#">
<img src="my-image.jpg">
<p>Short text description goes here.</p>
</a>
Markup for three in a row
<a class="marketing-box triple" href="#">
<img src="my-image.jpg">
<p>Short text description goes here.</p>
</a>
Example for two in a row
Example for three in a row
Back to Top
Description
An image with text below it contained in a blue box. Do not mix double and triple in the same clearfix container. A link is necessary. If you want to have a row of three, then a row of two, wrap the first row in a clearfix container, and then the second row in another clearfix container. It is possible to wrap the entire <a> tag in a <div> and put the classes there.
Markup for two in a row
<a class="promo-box double" href="#">
<img src="my-image.jpg">
<p>Short text description goes here.</p>
</a>
Markup for three in a row
<a class="promo-box triple" href="#">
<img src="my-image.jpg">
<p>Short text description goes here.</p>
</a>
Example for two in a row
Example for three in a row
Back to Top
Title Box
Description
Add to a DIV to wrap children inside a padded white box with a thin grey border with an optional title above.
Markup
<div class="title-box">
<h2>Title goes here.</h2>
<div class="title-box__info">
<p>Text goes here.</p>
</div>
</div>
Example
Title Goes Here
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Back to Top
White Box
Description
Add to a DIV to wrap children inside a padded white box with a thin grey border.
Markup
<div class="white-box">
<p>Text goes here.</p>
</div>
Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Back to Top
Grey Box
Description
Add to a DIV to wrap children inside a padded grey box.
Markup
<div class="grey-box">
<p>Text goes here.</p>
</div>
Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Back to Top