modular-grid

Modular Grid System

Usage

• Drop _modular.scss and the grid folder into your assets folder. Then overwrite any options and @import 'modular';.
• Initially the grid system has six columns, you can change this in grid/_defaults.scss
• An element's width can be defined with the classes .m1 through .m6 (m6 being 100% width).
• To define an element's width at several resolutions you extend or use like so: .m6-3-1. The first number is the mobile width, the second is the tablet size, the last is the desktop size. So our module with .m6-3-1 will be full screen width for mobile, half screen width for tablets, and take up 1/6th width for desktop users.
• You can also use a value of 0 to hide an element at that particular resolution.
• In order to create a complete row you need to extend or use classes so that the total size at each resolution equals the column count. (in this case 6)
• You can push things from the left by using the .l# or .l#-#-# classes. You can also keep rows clear by using .r# or .r#-#-#to add right margin.
• If you want to corral the little modules and put them in a nice bucket @extend %container will give the element a nice width with good margins for the three sizes.

Example: These two divs will constitute a row at all three resolutions.

<div class="m2-4-4">
I'm 2 columns wide at mobile size, and 4 columns wide at other resolutions.
</div>
<div class="m4-2-2">
I'm 4 columns wide at mobile size, and 2 columns wide at other resolutions.
</div>

TODO

• Create a gem for easy install.
• Add the ability to leave off numbers and have it just assume the remaining widths are the last value
• Work on the unrolling the loops or something to make the code more legible/faster.
• Create Stylus and Less versions.

Attribution

This was kindly open-sourced by Groopt Inc. in October of 2013.