Sha256: 40c7b3b46fa86e563f3bd75aa62df6c3e83e40c094dc8599b10e359690281c1c
Contents?: true
Size: 1.91 KB
Versions: 16
Compression:
Stored size: 1.91 KB
Contents
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.](http://groopt.com) in October of 2013.
Version data entries
16 entries across 16 versions & 1 rubygems