5.0 - Grids

Wyrm uses Bourbon's Neat grid system with $border-box-sizing: true. Please visit their site for full documenation. Wyrm's +media() breakpoint settings are set as follows in wyrm_core/_grid_settings.sass.

  • +media($desktop-wide) is 12 columns, min-width: 1400px wide.
  • +media($desktop) is 12 columns, min-width: 769px wide.
  • +media($tablet) is 8 columns, max-width: 768px.
  • +media($mobile) is 4 columns, max-width: 480px.

Because Wyrm is used in a couple different Ember setups, we added the +omega-type mixin to wyrm_core/neat_extra.sass. It's essentially the same as Neat's +omega mixin, but uses nth-of-type to make play nice with Ember's love of adding additional DOM objects in between your constructed markup.

<div class="grid-example">
   <p>+outer-container applied to this wrapping grid.</p>
   <aside>+span-columns(4)</aside>
   <section>+span-columns(8) +omega-type</section>
</div>