I’ve long been bothered by grid systems/frameworks that were either too opinionated or solve too specific a case with way too much hand waving and kata. So like all frustrated people with a penchant for development “I wrote my own.™”

Goals

• Allow for complete removal of the grid system from the markup via extension. (This is why the first version is in SCSS, I had work to get done, and SCSS is what we were using…) Leaving only semantic markup and classes behind.
• Provide a way to expressively declare dimensions for an element and have none of the hullabaloo of ‘first’ ‘last’ etc. etc. etc.
• Be as forward thinking as possible. Don’t bend over backwards to support archaic browsers. We live in the future people. Soon today’s modern browsers will be old, stick with the standards, future you will thank you.
• Create a discussion with this code. What’s the right way to achieve these aims? I wanted to release it so I can learn and maintain the codebase. I hope those of you interested enough in these goals will open pull requests and teach me a thing or two.

Initial Features

• By default the system comes with 6 columns at all resolutions. They can be defined with the classes .m1 through .m6 (m6 being 100% width).

• But what if you want different widths for different resolutions? Well we don’t do things around here like other grid systems. No adding more classes on top of things to get stuff done Mister. Just extend or add a class formatted like so: .m6-3-1. The first number is the mobile width (remember mobile first!), 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 phones, half screen width for tablets, and take up 1/6th width for desktop users. Neat eh? You can also use a 0 for a width and it will disappear at that resolution.

• You can push things from the left by using the .l# classes. You can also keep rows clear you by using .r# to add right margin.

• To make complete rows just make sure the widths for each three resolutions add up to your total column count (the default is 6).

• 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.

But this isn’t ‘Modular’ like, say, Müller-Brockmann’s layout systems…

Well smarty pants, I want to work on that. My next goal is to refine the current features and introduce an easy way to declare heights at different resolutions.

Finally

First, this system is used here at Groopt and has made life way easier and we hope it helps you. Second, we’ve built our products off of the hard work of other people’s open source projects, and we hope to give back in the same manner. Lastly, Please use it, please break it, then fix it, and maybe open a pull request. :D

The Goods

https://github.com/dylan/modular - Check it out here.

https://github.com/dylan/modular/issues - Contribute here.