Sass outline experiment

gistfile1.sass

// Mixins define the various layouts and options of a module, other modules are not allowed to override styles on subnodes of a module.


// HTML
// 
// <ol class="article-list">
//   <li>
//      <article class="article-item">
//         <h1>Sass outline experiment</h1>
//         <dl>
//           <dt>Date</dt>
//           <dd><time>28 Januari 2015</time>
//         </dl>
//         <p>Mixins define the various layouts and options of a module, other modules are not allowed to override styles on subnodes of a module.</p>
//      </article>
//   </li>
//   ...
// </ol>


// CSS
// 
// - article-item.scss
// Default styles are mostly cosmetic, no layout, layout is handled in mixin
.article-item {
  
  h1 {
    font-size:2em;
  }
  
  .meta {
    font-size:.875em;
  }
  
  .intro {
    font-style:italic;
  }
  
}

@mixin article-item-layout-vertical {

  .article-item {
    
    // overrides horizontal layout (if set)
    .meta,
    .intro {
      display:block;
      width:auto;
    }
    
  }
  
}

@mixin article-item-layout-horizontal {

  .article-item {
    
    .meta,
    .intro {
      display:inline-block;
    }
    
    .meta {
      width:33.33%;
    }
    
    .intro {
      width:66.66%;
    }
    
  }

}


// - article-item-list.scss
.article-item-list {
  
  margin:0;
  padding:0;
  
  // by default articles are layed out vertically
  @include article-item-layout-vertical;
  
  @media (min-width:30em) {
  
    // at 30em's there's enough room for the horizontal layout
    @include article-item-layout-horizontal;
    
  }
  
  @media (min-width:40em) {
    
    > li {
      display:inline-block;
      width:50%;
    }
    
    // switch back to vertical view, as list items are now too small
    @include article-item-layout-vertical;
    
  }
  
  @media (min-width:50em) {
    
    // at 50em's there's again enough room for the article items to move to horizontal view
    @include article-item-layout-horizontal;
    
  }
  
}