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.
Heading Border
Sometimes you'll want to divide content with more emphasis. Adding a border is a good way to do that.
This is a header with the heading border
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, and a color class (ex: "green") that establishes the text and background color 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.
Register
Apply Now
Click to Apply
Register
Submit
Apply Now
Social Media Icons
*Based on the site's theme, the social media icons in the footer will match. These footer icons are the main account relating to the site you are on (example: the College of Communication's footer icons link to the college's accounts). Any additional icons should be gray and follow the standard of being inside a panel object with the words "Connect with (account name)" in the header.
Tables
View Markup - Table1
<![CDATA[
<table class="table1 table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
]]>
View Markup - Table 2
<![CDATA[
<table class="table2 table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
]]>
View Markup - Plain Table 1
<![CDATA[
<table class="table1">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
]]>
View Markup - Table without Heading
<![CDATA[
<table class="table-no-head table-striped">
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
]]>
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 2
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
Plain 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.