Chassis.css

v4.0.8

Utility classes

In addition to its grid system and style resets, chassis.css provides verbose and easy-to-use utility classes to manipulate just about everything. If there's something you need to adjust, there's probably a utility class for it.

Text alignment

Chassis.css provides 4 basic text alignment classes:

<p class="t-l">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacus mi, malesuada nec elit dignissim, tristique suscipit massa. Pellentesque in consequat tellus. Nullam tincidunt magna non accumsan elementum. Vivamus euismod, justo a aliquam aliquam, sapien turpis iaculis ipsum, ac vulputate metus lorem eget orci.</p>
<p class="t-c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacus mi, malesuada nec elit dignissim, tristique suscipit massa. Pellentesque in consequat tellus. Nullam tincidunt magna non accumsan elementum. Vivamus euismod, justo a aliquam aliquam, sapien turpis iaculis ipsum, ac vulputate metus lorem eget orci.</p>
<p class="t-r">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacus mi, malesuada nec elit dignissim, tristique suscipit massa. Pellentesque in consequat tellus. Nullam tincidunt magna non accumsan elementum. Vivamus euismod, justo a aliquam aliquam, sapien turpis iaculis ipsum, ac vulputate metus lorem eget orci.</p>
<p class="t-j">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacus mi, malesuada nec elit dignissim, tristique suscipit massa. Pellentesque in consequat tellus. Nullam tincidunt magna non accumsan elementum. Vivamus euismod, justo a aliquam aliquam, sapien turpis iaculis ipsum, ac vulputate metus lorem eget orci.</p>

In the above example, there are 4 paragraphs using the 4 text alignment classes. Text alignment classes folow the .t-* class structure, where * can be one of the following letters:

  • l means “left” and aligns text to the left.
  • c means “center” and aligns text in the center.
  • r means “right” and aligns text to the right.
  • j means “justified” and justifies the text.

List styles

You can change the style of a list with 2 list style classes:

<ul class="l-u">
    <li>Unstyled list item 1</li>
    <li>Unstyled list item 2</li>
    <li>Unstyled list item 3</li>
</ul>
<ul class="l-i">
    <li>Inline list item 1</li>
    <li>Inline list item 2</li>
    <li>Inline list item 3</li>
</ul>

In the above example, there are two unordered lists, the first unstyled and the second inline. List style classes follow the .l-* class structure, where * can be one of the following letters:

  • u means “unstyled” and unstyles the list.
  • i means “inline” and makes each list item display: inline-block.

Screen readers

Sometimes while not wanting to display text it is important to allow folks using screen readers to contextually understand what’s going on; This is where screen reader classes come in handy. The following are the screen reader classes available:

  • .sr means “screen reader” and will hide the element while still being readable to screen readers.
  • .sr-f means “screen reader focusable” and will hide the element until focused.

Margins & padding adjustments

Some of the most extensive utility classes available are the margin and padding adjustment classes, allowing you to manipulate the margins and padding of an element in any way you see fit.

Margin adjustments

Margin adjustment classes follow the .m$-* class structure, where $ signifies the side of adjustment and * signifies the amount of adjustment.

$ can be one of the following letters:

  • t means “top” and adjusts the top margin of the element.
  • r means “right” and adjusts the right margin of the element.
  • b means “bottom” and adjusts the bottom margin of the element.
  • l means “left” and adjusts the left margin of the element.

* can be one of the following letters:

  • a means “auto” and applies a margin value of auto.
  • z means “zero” and applies a margin value of 0.
  • t means “third” and applies a margin value of 5px, or a third of 15px.
  • h means “half” and applies a margin value of 7.5px, or a half of 15px.
  • f means “full” and applies a margin value of 15px.
  • d means “double” and applies a margin value of 30px, or 15px doubled.

Padding adjustments

Padding adjustment classes follow the .p$-* class structure, where $ signifies the side of adjustment and * signifies the amount of adjustment.

$ can be one of the following letters:

  • t means “top” and adjusts the top padding of the element.
  • r means “right” and adjusts the right padding of the element.
  • b means “bottom” and adjusts the bottom padding of the element.
  • l means “left” and adjusts the left padding of the element.

* can be one of the following letters:

  • z means “zero” and applies a padding value of 0.
  • t means “third” and applies a padding value of 5px, or a third of 15px.
  • h means “half” and applies a padding value of 7.5px, or a half of 15px.
  • f means “full” and applies a padding value of 15px.
  • d means “double” and applies a padding value of 30px, or 15px doubled.

Visibility

Sometimes you want to show an element only at a certain viewport size, or sometimes you want hide an element at a certain viewport size; In both cases, that’s where visibility classes come to the rescue.

<div class="container">
    <div class="row">
        <div class="col xs-s">This is only visible on extra small viewports.</div>
        <div class="col sm-s">This is only visible on small viewports.</div>
        <div class="col md-s">This is only visible on medium viewports.</div>
        <div class="col lg-s">This is only visible on large viewports.</div>
    </div>
    <div class="row">
        <div class="col xs-h">This is hidden on extra small viewports.</div>
        <div class="col sm-h">This is hidden on small viewports.</div>
        <div class="col md-h">This is hidden on medium viewports.</div>
        <div class="col lg-h">This is hidden on large viewports.</div>
    </div>
</div>

In the above example, there are 2 rows with 4 auto width columns, each with a visibility class. In the first row, each column is set to only show at a certain viewport size, hence why only 1 of the 4 columns is visible. In the second row, each column is set to hide at a certain viewport size, hence why only 3 of the 4 columns are visible. To get a better visualization of how this works, adjust the width of your browser window.

Visibility classes follow the .$-* class structure, where $ signifies the viewport width and * signifies the visibility state.

$ can be one of the following:

  • xs means “extra small” and targets viewports less than 768px wide.
  • sm means “small” and targets viewports greater than or equal to 768px wide but less than 992px wide.
  • md means “medium” and targets viewports greater than or equal to 992px wide but less than 1200px wide.
  • lg means “large” and targets viewports greater than or equal to 1200px wide.

* can be one of the following letters:

  • s means “show” and applies display: block to the element at the targeted viewport width and applies display: none to the element at all other viewport widths.
  • h means “hide” and applies applies display: none to the element at the targeted viewport width and applies display: hide to the element at all other viewport widths.