standard.scss

/**
 * base/box-sizing
 *
 * Apply a natural box layout model to all elements while respecting
 * plugins or other components that leverage other behavior.
 *
 * http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 * http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}


/**
 * layout/table-grid
 *
 * A fluid layout grid in which columns will be evenly spaced.
 *
 * http://chrisnager.github.io/ungrid/
 */

@media (min-width: 30em) {
  .row {
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  .col {
    display: table-cell;
  }
}


/**
 * utilities/break-long-words
 *
 * Handles long words in small containers by adding a hyphen inside the word
 * or splitting the string if it's too long and hypens aren't supported.
 *
 * Support: Internet Explorer 8+, Firefox 6+, iOS 4.2, Safari 5.1+ and Chrome 13+.
 *
 * http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
 */

.break-long-words {
  -ms-word-break: break-all;
      word-break: break-all;

  /* Non standard for WebKit */
  word-break: break-word;

  -webkit-hyphens: auto;
     -moz-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}


/**
 * utilities/hide-element
 *
 * Hide element from the visual design but keep accessible for assistive technologies.
 *
 * Support: Internet Explorer 6+, Firefox 6+, iOS 4.2, Safari 5.1+ and Chrome 13+.
 *
 * http://yaccessibilityblog.com/library/css-clip-hidden-content.html
 * http://adaptivethemes.com/using-css-clip-as-an-accessible-method-of-hiding-content
 */

.hide-element {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
}

/**
 * utilities/aspect-ratio
 *
 * Maintain aspect ratio on nested object (image, video, etc.)
 */

.aspect-ratio {
  height: 0;
  padding-top: 56.25%;
  position: relative;
}

.aspect-ratio__object {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 100;
}

utilities.scss

.clearfix { @include clearfix; }

.is-hidden    { display:    none !important; }
.is-invisible { visibility: none !important; }

.block        { display: block        !important; }
.inline       { display: inline       !important; }
.inline-block { display: inline-block !important; }

.left  { float: left  !important; }
.right { float: right !important; }

.text-left   { text-align: left   !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right  !important; }

.mt0 { margin-top:    0   !important; }
.mt1 { margin-top:    1em !important; }
.mb0 { margin-bottom: 0   !important; }
.mb1 { margin-bottom: 1em !important; }