Utilities
General _general.scss
These utility classes allow for some basic CSS properties to be applied across elements. The classname applies to the property that is getting set, with the value as the modifier.
States
- .us-clearfix - Clear floats.
- .us-float--left - Float element to the left.
- .us-float--right - Float element to the right.
- .us-align--left - Align content of the element to the left.
- .us-align--center - Align content of the element to the center.
- .us-align--right - Align content of the element to the right.
- .us-block - Display element as a block.
- .us-color--cyan - Change content color to blue, navy, typecyan, cyan, red, green.
- .us-list--reset - Reset list style.
Example
content
content
content
content
content
content
content
content
content
content
<div>
<p>content</p>
</div>
Images _images.scss
Helpful image classes for making images full width or floating within content.
States
- .us-img--full - Full width image.
- .us-img--left - Left floated image.
- .us-img--right - Right floated image.
Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.
<p>
<img src="https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg" width="400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.
</p>
Responsive _responsive.scss
Responsive classes to allow display of elements across devices. You have the option of displaying them as block, inline-block or inline elements.
You can also hide elements by .us-{DEVICE}--hidden and will hide those elements above that breakpoint.
Example
<div class='us-lg-desktop--block'><strong>.us-lg-desktop--block</strong> Shows on large desktop and up</div>
<div class='us-desktop--block'><strong>.us-desktop--block</strong> Shows on desktop and up</div>
<div class='us-tablet--block'><strong>.us-tablet--block</strong> Shows on tablet and up</div>
<div class='us-sm-tablet--block'><strong>.us-sm-tablet--block</strong> Shows on small tablet and up</div>
<div class='us-mobile--block'><strong>.us-mobile--block</strong> Shows on mobile only</div>
<div class='us-tablet--hidden'><strong>.us-tablet--hidden</strong> Hidden on tablet and up</div>
Spacing _spacing.scss
Allow control of spacing around an element. You can set margin or padding for an element without creating an extra class.
An example of this .us-margin-top, .us-margin-top--small, .us-margin-top--large where margin can be replaced by padding and top can be replaced by bottom, left or right.
Default space for margin and padding is 1em, small modifier uses .5em and large modifier uses 1.5em.
States
- .us-margin-top - Use default top margin (1em).
- .us-margin-top--small - Use small top margin (.5em).
- .us-margin-top--large - Use large top margin (1.5em).
- .us-margin-bottom - Use default bottom margin (1em).
- .us-margin-bottom--small - Use small bottom margin (.5em).
- .us-margin-bottom--large - Use large bottom margin (1.5em).
- .us-margin-left - Use default left margin (1em).
- .us-margin-left--small - Use small left margin (.5em).
- .us-margin-left--large - Use large left margin (1.5em).
- .us-margin-right - Use default right margin (1em).
- .us-margin-right--small - Use small right margin (.5em).
- .us-margin-right--large - Use large right margin (1.5em).
- .us-padding-top - Use default top padding (1em).
- .us-padding-top--small - Use small top padding (.5em).
- .us-padding-top--large - Use large top padding (1.5em).
- .us-padding-bottom - Use default bottom padding (1em).
- .us-padding-bottom--small - Use small bottom padding (.5em).
- .us-padding-bottom--large - Use large bottom padding (1.5em).
- .us-padding-left - Use default left padding (1em).
- .us-padding-left--small - Use small left padding (.5em).
- .us-padding-left--large - Use large left padding (1.5em).
- .us-padding-right - Use default right padding (1em).
- .us-padding-right--small - Use small right padding (.5em).
- .us-padding-right--large - Use large right padding (1.5em).
- .us-reset--padding - Reset padding to 0.
- .us-reset--margin - Reset margin to 0.
- .us-reset - Reset padding and margin to 0.
Example
<div class='class-goes-here'>Sample content</div>