CSS utility classes

dead-center.css

/**
 * Dead center an image both vertically and horizontally inside
 * a containing element.
 *
 * Notes:
 *     The dead-center container needs height and width set,
 *     and the image to be centered can't exceed those dimenstions.
 *
 * Example:
 *     <div class="example dead-center">
 *       <div>
 *         <img src="http://placehold.it/80x80">
 *       </div>
 *     </div>
 *
 *     .example {
 *       height: 100px;
 *       width: 100px;
 *     }
 *
 * Browser tested:
 *     - Chrome 16.0.912.63
 *     - Firefox 8.0.1
 *     - Internet Explorer 8
 *     - Opera 11.51
 *     - Safari 5.1.2
 *
 *     NOTE: Browser's that doesn't support this technique falls 
 *     back on an inline image inside the box. If you switch the 
 *     container element from a DIV to a SPAN, you'll simply get an 
 *     inline image - since height and width won't affect the SPAN.
 */

.dead-center {
  display: table;
  text-align: center;
}

.dead-center div {
  display: table-cell;
  line-height: 0;
  vertical-align: middle;
}

hide-element.css

/**
 * Hide element from the visual design but keep it accessible
 * for assistive technologies.
 *
 * source: http://yaccessibilityblog.com/library/css-clip-hidden-content.html
 * source: http://adaptivethemes.com/using-css-clip-as-an-accessible-method-of-hiding-content
 */

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

hide-text.css

/**
 * Hides text from the visual canvas whilst keeping it accessible for 
 * assistive technologies. Meant to be used for image replacement.
 *
 * source: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
 */

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

l-unpolluted.css

/**
 * Provide a distraction free layout for the user during her current flow
 * by showing the least amount content possible for reaching her goals.
 */

.l-unpolluted .nav-site,
.l-unpolluted .nav-user {
  display: none;
}

retina-image.scss

// source: http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss

@mixin retina-image($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    background-image: url($image);
    background-size: $width $height;
  }
}

word-wrap.css

/**
 * Word wrapping/hyphenation by controlled splitting of words to improve
 * the layout of paragraphs.
 *
 * This is working in Internet Explorer 8+, Firefox 6+, iOS 4.2, Safari 5.1+ and Chrome 13+.
 *
 * source: http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
 */

.word-wrap {
  -ms-word-break: break-all;
      word-break: break-all;
      word-break: break-word;

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

Schysst! heigth -> height i kommentaren bara.

Fixat. Tack!