panych
2/6/2014 - 5:56 PM

Justify-blocks sass mixin

Justify-blocks sass mixin

// Mixin to layout blocks to justify parent width
// Works IE6+, Chrome, FF, Opera, Safari
//
// NOTE Don't forget to set font-size, line-height and text-align to child 
// elements.
// NOTE that whitespace between list items is required.
// ISSUE: extra space at bottom. 
//
// Usage example:
// HTML:
//  <ul class="navigation">
//    <li>Item 1</li>  
//    <li>Item 2</li>  
//    <li>Item 3</li>  
//  </ul>
//
// SCSS:
//  .navigation {
//    @include justify-blocks;
//  }
//
//  .navigation > li {
//    display: inline-block;
//    font-size: 14px;
//    line-height: 1.3;
//    text-align: left;
//    text-align-last: left;
//  }
//

@mixin justify-blocks {
  line-height: 0;
  font-size: 0;
  text-align: justify;
  text-align-last: justify;
  text-justify: newspaper;
  *zoom: 1;
  

  &:after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 0;
    visibility: hidden;
    overflow: hidden;
  }
}