-
Notifications
You must be signed in to change notification settings - Fork 3
Home
Zebra is a CSS grid system based on the BEM methodology, that can be customized through the modification of built in SASS variables. Zebra provides a varying number of CSS classes (depending on what settings you choose) that allow you to quickly add rows and columns to your project.
Base columns follow a slightly simplified version of the BEM methodology, combining the properties of .col (a block) with it's size --XofX or --auto (modifiers). This keeps your DOM cleaner, as classes have been combined when possible.
<div class="col--3of12">Zebra's simplified column classes</div>
<div class="col col--9of12">Typical BEM usage</div>Zebra utilizes the font-size: 0; fix to remove whitespace between inline-block elements. This means that any elements within a .row will have no font size, unless you have declared your typography styles independently of the browser defaults.
Structurally, columns should always be placed directly within rows, as this means that the font-size: 0; fix will always be applied.