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
+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
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>
Default styling without modifier classes.
+outer-container applied to this wrapping grid.