Classes Guide

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.

• Word file indicator
• PDF Document indicator
• Email address indicator
• 312-588-2300

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

<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>

<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>