DePaul Responsive CSS contains a variety of classes that extend markup so you don't have to write CSS yourself. This keeps our CSS framework from becoming redundant and disorganized. Extension classes package up commonly used CSS attributes into classes, which you can drop into your markup for maximum awesomeness. So, by utilizing these classes, a fully styled and positioned element can be created without writing additional CSS.
Graphic Classes
These classes affect visual attributes of HTML elements. In addition to the default way content displays, these classes can help further customize the aesthetics of content.
Typographical Classes
In our CSS framework, the majority of the typographical CSS is applied automatically allowing "vanilla" HTML to look pretty darn good. Sometimes though you may find the need to emphasize text in different ways. These extension classes allows further customization of type, without needing to create custom CSS.
Remember: While you can use these classes on any element you choose, they are intended as seasoning, not the main course.
Using the "medium" class on any element produces medium text, as seen in this sentence.
This text is small as a result of the small class.
This text is default sized and uppercase.
This text is small and uppercase.
Blockquote Classes
"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."
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit."
Hyperlink Cues
Links to files and external resources that don't indicate their destination create a usability problem. We can solve this issue by using indicators that communicate that links go somewhere else other than another page within the currently viewed site.
Calls-to-action
A call-to-action (CTA) is a bold indication to the site visitor that this is a primary action on the page they should engage with. CTAs use the class "cta" to establish basic properties that all CTAs share that establishes the text of the button.
NOTE: It is important to keep CTA labels
concise. If a CTA link label needs to be over a few words (or around 280px), it is best to use as a conventional "a href" link - not a button.
Learn More
Tables
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
The framework contains several table type classes like .table1, .table2, .table3, etc. Tables can also be alternately striped with the the .table-striped class or contained within a special left-right overflow class in order to handle large tables that will not collapse naturally within mobile and narrow viewports.
Table 1
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
Table without a Heading
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
Mobile Hidden Classes
Sometimes you'll want something to be hidden at mobile view and only viewable when the viewer is use a desktop viewport. You'll use the class
hide-mobile
Sometimes you'll want something to be hidden at desktop view, and only visible at mobile view. You'll use the class
mobile
This guide is meant to users who are familiar with editing HTML. Please refer to our
suggested use guidelines and
basics guide for more information.
*
for internal use only.