This is not a 1.0 release. Things are moving at a fast pace, please note you might have some refactoring to do using this code.

Floats

Using the xs,sm,md,lg breakpoints you can modify how an element floats. Example: sm-float-left will only float the element at the sm breakpoint and up.

Float Left
Float Right
Float None
<div class="clearfix">
  <div class="xs-float-left">Float Left</div>
  <div class="xs-float-right">Float Right</div>
</div>
<div class="xs-float-none">Float None</div>

Responsive Borders

Using the xs,sm,md,lg breakpoints you can modify an elements border. Example: sm-btb1 will only set the top and bottom border to 0.1rem or 1px on the element at the sm breakpoint and up.

Utility Description
xs, sm, md, lg breakpoints
b, btb, brl, bt, br, bb bl bordert = top, r = right, b = bottom, l = left
(0-1) amount of spacing

border-top-width:    0.1rem;
border-bottom-width: 0.1rem;

Applied on all screen sizes

Right and left borders for medium screens and up
<div class="box box--default xs-btb1 xs-ptb2 xs-prl1">
<pre><code class="styleguide">
border-top-width:    0.1rem;
border-bottom-width: 0.1rem;
</code></pre>
  <p>Applied on all screen sizes</p>
</div>

<div class="box box--default xs-brl0 md-brl1 xs-mt1 xs-ptb2 xs-prl1">
  Right and left borders for medium screens and up
</div>

Responsive Display

Using the xs,sm,md,lg breakpoints you can modify how an elements is displayed. Example: sm-none will only hide the element at the sm breakpoint and up.

This content will not be displayed on screens at the sm breakpoint and up.
This content will not be displayed screens at the xs breakpoint, but will be displayed on screens at the sm breakpoints and up..
<div class="xs-inline sm-none">
  This content will not be displayed on screens at the <code class="styleguide">sm</code> breakpoint and up.
</div>

<div class="xs-none sm-inline">
  This content will not be displayed screens at the <code class="styleguide">xs</code> breakpoint, but will be displayed on screens at the <code class="styleguide">sm</code> breakpoints and up..
</div>

Responsive Height

Using the xs,sm,md,lg breakpoints you can modify how what the elements min-height is. Example: sm-2 will only set the height to 4rem or 40px on the element at the sm breakpoint and up.

This will have a min-height of 8rem or 80px on screen sizes at the sm breakpoint and up, and the base line height at screen sizes on sizes at the xs breakpoint.
This content will have a height of 4rem or 40px on screens at the xs breakpoint, and 16rem or 160px on screens at the sm breakpoint and up.
<div class="box box--styleguide">
  <div class="sm-4">
    This will have a min-height of <code class="styleguide">8rem</code> or <code class="styleguide">80px</code> on screen sizes at the <code class="styleguide">sm</code> breakpoint and up, and the base line height at screen sizes on sizes at the <code class="styleguide">xs</code> breakpoint.
  </div>
</div>

<div class="box box--styleguide xs-mt1">
  <div class="xs-2 sm-8">
    This content will have a height of <code class="styleguide">4rem</code> or <code class="styleguide">40px</code> on screens at the <code class="styleguide">xs</code> breakpoint, and <code class="styleguide">16rem</code> or <code class="styleguide">160px</code> on screens at the <code class="styleguide">sm</code> breakpoint and up.
  </div>
</div>

Responsive Line Height

Using the xs,sm,md,lg breakpoints you can modify an elements line-height. Example: sm-inset2 will only set the line-height to 4rem or 40px on the element at the sm breakpoint and up.

This content will have a line height of 4rem or `40px` on screens at the xs breakpoint, and 8rem or 80px on screens at the sm breakpoint and up.
<div class="xs-inset2 sm-inset4">
  This content will have a line height of <code class="styleguide">4rem</code> or `40px` on screens at the <code class="styleguide">xs</code> breakpoint, and <code class="styleguide">8rem</code> or <code class="styleguide">80px</code> on screens at the <code class="styleguide">sm</code> breakpoint and up.
</div>

Responsive Margin

Using the xs,sm,md,lg breakpoints you can modify an elements margin. Example: sm-mb2 will only set the bottom margin to 4rem or 40px on the element at the sm breakpoint and up.

Class Description
xs, sm, md, lg breakpoints
m, mtb, mrl, mt, mr, mb ml margint = top, r = right, b = bottom, l = left
(0-8) amount of spacing

margin-top:    2rem;
margin-bottom: 2rem;

Applied on all screen sizes

Left and right margins grows along with screen size
<div class="box box--default xs-mtb1 xs-ptb2 xs-prl1">
<pre><code class="styleguide">
margin-top:    2rem;
margin-bottom: 2rem;
</code></pre>
  <p>Applied on all screen sizes</p>
</div>

<div class="box box--default sm-mrl1 md-mrl2 lg-mrl3 xs-p1">
  Left and right margins grows along with screen size
</div>

Responsive Padding

Using the xs,sm,md,lg breakpoints you can modify an elements padding. Example: sm-ptb2 will only set the bottom and top padding to 2rem or 20px on the element at the sm breakpoint and up.

Utility Description
xs, sm, md, lg breakpoints
p, ptb, prl, pt, pr, pb pl paddingt = top, r = right, b = bottom, l = left
(0-8) amount of spacing

padding-top:    2rem;
padding-right:  1rem;
padding-bottom: 2rem;
padding-left:   1rem;

Applied to all screen sizes

Right and left padding grows along with screen size
<div class="box box--default xs-ptb2 xs-prl1">
<pre><code class="styleguide">
padding-top:    2rem;
padding-right:  1rem;
padding-bottom: 2rem;
padding-left:   1rem;
</code></pre>
  <p>Applied to all screen sizes</p>
</div>
<div class="box box--default xs-prl1 sm-prl2 md-prl3 lg-prl4 xs-mt1 xs-ptb2 xs-prl1">
  Right and left padding grows along with screen size
</div>

Responsive Text Alignment

Using the xs,sm,md,lg breakpoints you can modify an elements text-align property. Example: sm-text-center will only set the elements text to center at the sm breakpoint and up.

Text Align Left
Text Align Center
Text Align Right
Text Align Justify
<div class="xs-text-left">Text Align Left</div>
<div class="xs-text-center">Text Align Center</div>
<div class="xs-text-right">Text Align Right</div>
<div class="xs-text-justify">Text Align Justify</div>

Responsive Width

Using the xs,sm,md,lg breakpoints you can modify an elements width. Example: sm-6of12 will only set the width to 50% on the element at the sm breakpoint and up.

Utility Description
xs, sm, md, lg breakpoints
0-12 column amount
of 1of12 meaning you know you'll get a percent and not rhyhtm unit.
12 column total (default is 12)
50% width for all screen sizes
Full width for screens at the xs breakpoint, 50% width for screens at the sm breakpoint, and 25% width for screens at the lg breakpoint.
<div class="xs-6of12">
  <div class="box box--styleguide">
    50% width for all screen sizes
  </div>
</div>

<div class="sm-6of12 lg-3of12 xs-mt1">
  <div class="box box--styleguide">
    Full width for screens at the <code class="styleguide">xs</code> breakpoint, 50% width for screens at the <code class="styleguide">sm</code> breakpoint, and 25% width for screens at the <code class="styleguide">lg</code> breakpoint.
  </div>
</div>

Text

Use the text-- modifiers to change how text is displayed within an element.

Class Description
text--italic Italic text
text--underline Underline text
text--line-through Line through text
text--lowercase Lowercase text
text--uppercase Uppercase text
text--capitalize Capitalized text
Italic Underline Line through Lowercase Uppercase Capitalize
<span class="text--italic">Italic</span>
<span class="text--underline">Underline</span>
<span class="text--line-through">Line through</span>
<span class="text--lowercase">Lowercase</span>
<span class="text--uppercase">Uppercase</span>
<span class="text--capitalize">Capitalize</span>

Extensions

Class Description
text--black This is the darkest gray text
text--gray-darker This is the darker gray text
text--gray-dark This is the dark gray text
text--gray This is the gray text
text--gray-light This is the light gray text
text--gray-lighter This is the lighter gray text
text--white This is the lightest gray text
text--default default information
text--primary primary information
text--success success information
text--info sidenote information
text--warning warning information
text--danger destructive information
text--inverse default information
Darkest Gray Darker Gray Dark Gray Gray Light Gray Lighter Gray Lightest Gray Default Primary Success Info Warning Danger Inverse
<span class="text--black">Darkest Gray</span>
<span class="text--gray-darker">Darker Gray</span>
<span class="text--gray-dark">Dark Gray</span>
<span class="text--gray">Gray</span>
<span class="text--gray-light">Light Gray</span>
<span class="text--gray-lighter">Lighter Gray</span>
<span class="text--white">Lightest Gray</span>
<span class="text--default">Default</span>
<span class="text--primary">Primary</span>
<span class="text--success">Success</span>
<span class="text--info">Info</span>
<span class="text--warning">Warning</span>
<span class="text--danger">Danger</span>
<span class="text--inverse">Inverse</span>

Typography

These are the heading sizes that you can use site wide. The responsive Helpers are optional, and can be used to modify the font-size at different screen sizes. using the xs,sm,md,lg breakpoints.

If you want to change the font-sizes for utility classes its highly recommended that you use the fortitude-font-scale function when setting up your project. (see example below)

Don't know what a font-scale is? Check this out.

You'll notice there is a xs-inset4 applied to the first 2 font-sizes, this is just setting the line-height to 4rem or 40px we do this so the text will fit nicely within the vertical rhythm grid.

// settings/_overrides.scss

// change this variable to change the font-size that is used on the body element
// and the font-size that is used as a base font-size for the `fortitude-font-scale` function.
$fortitude-base-font-size: 1.2rem;

// change this variable if you want override the font-scale-ratio when calculating the font sizes.
$fortitude-base-font-ratio: 1.25;

// change this variable if you want to override any of the default font helpers.
$fortitude-responsive-font-sizes: (
  "alpha": fortitude-font-scale(3),
  "beta": fortitude-font-scale(2),
  "gamma": fortitude-font-scale(1),
  "delta": fortitude-font-scale(0),
  "epsilon": fortitude-font-scale(-1),
  "zeta": fortitude-font-scale(-2)
);

// Use caution when changing the font scale - the defaults
// here are solid for a variety of designs & styles, and
// changing them has wide-ranging effects

h1 3.125rem

h2 2.5rem

h3 2rem

h4 1.6rem

h5 1.28rem
h6 1.024rem
<h1 class="xs-alpha xs-inset4">h1 3.125rem</h1>
<h2 class="xs-beta xs-inset4">h2 2.5rem</h2>
<h3 class="xs-gamma">h3 2rem</h3>
<h4 class="xs-delta">h4 1.6rem</h4>
<h5 class="xs-epsilon">h5 1.28rem</h5>
<h6 class="xs-zeta">h6 1.024rem</h6>