Heading

The vertical rhythm heading settings is by default set by normalize-css. Simply alter the settings in the _settings.sass file.

Text alignment classes

Text can be aligned in two different ways. This can be done globally or by breakpoints. Simply use ether one of these classes. For global .text-align-{direction} or for breakpoints .{prefix}-align-{direction}

Global alignment

Align by breakpoints alignment

<!-- global alignment -->
<div class="text-align-left">...</div>
<div class="text-align-center">...</div>
<div class="text-align-right">...</div>
<!-- alignment by breakpoint -->
<div class="md-text-align-left">...</div>
<div class="md-text-align-center">...</div>
<div class="md-text-align-right">...</div>

Font Styles

Here are some font styles to quickly change the font styles from normal to lighter, bold, italic or both italic and weight.

<!-- font weight -->
<span class="font--normal">Normal</span>
<span class="font--light">Light</span>
<span class="font--bold">Bold</span>
<!-- font styles -->
<span class="font--italic">Italic</span>
<span class="font--light-italic">Light Italic</span>
<span class="font--bold-italic">Bold Italic</span>

Ellipsis

The ellipsis class is just a small little helper class to help text form overflowing and word wrapping. This will clip the text to a single line and append three dotes to the end.

<div class="ellipsis">Long text here</div>

Text, borders and background colors

This helper helps to modify elements colors and even overriding existing colors set by the components. They are comprised out of color shades. The standard color and a lighter version of the same color sets.

The three-helper work in the exact same way by modifying the text, background and border colors of an element. This helper gets its colors from a color-map in the _settings.sass file.

Any color that is added to the color-maps will automatically generate classes for that color.

This also create button with the colors added under the .btn class group. Read more about buttons in the components section.

read more

Selectable

The selectable class has three different identifiers with one modifier. The job of this helper is preventing a user to select an element on the page. (Try to select this text)

• The .selectable__true will allow a user to click or grab a single word within this class.
• The .selectable__false will make the content in the element unselectable.
• The .selectable__all will select everthing in this element with a single click of the mouse.
• The .selectable__{modifier}--cursor will do the same as above but, will add the appropriate cursor for this element.

<div class="selectable__true">...</div>
<div class="selectable__false">...</div>
<div class="selectable__all">...</div>
<!-- display cursor -->
<div class="selectable__true--cursor">...</div>
<div class="selectable__false--cursor">...</div>
<div class="selectable__all--cursor">...</div>

Hide and Show

Elements can be hidden or shown in two different ways. This can be done globally or by breakpoints. Simply use ether one of these classes. For global use the .hide or .show classes. If you want to hide or show an element on a specific screen size. The you can use this for breakpoints sizes .{prefix}-show or .{prefix}-hide

Responsive Images

The .responsive__image class will keep the image element from overflowing the parent element. This will also make the image mobile friendly because the image never exceeds the boundary of the webpage.

 <img src="#" class="responsive__image" alt="">

Responsive Embed

The responsive helper will help you to make responsive video’s, iframes, embeds, object’s, maps and svg’s. There are three types of embeds you can do. Square, normal screen size and wide-screen size. Just wrap the target element with an div with a class of any of these .responsive__square, .responsive__screen or .responsive__wide-screen. Make the object you want to constrain a child element of the div you created.

Optionally

If something went wrong you can’t add a class of .responsive__item to the element you want to make responsive, by overriding the default css code.

Images Shapes

The .responsive__image class will keep the image element from overflowing the parent element. This will also make the image mobile friendly because the image never exceeds the boundary of the webpage.

 <img src="#" class="responsive__image" alt="">

Box Shadow helpers

The shadow helper class can be add to any block element on the page. By default there are 10 spread levels, but more more can be added by altering the $shadow__level__mount__count in _setting.sass file

<div class="panel shadow--level-4">
  <div class="panel__body" >...</div>
</div>