When I begin a new project, half the battle is starting on the right foot. I imagine others feel the same, as they navigate countless tools and blogs trying to work out what is new and recommended. However, no matter what problem we’re trying to solve, a few elements are always necessary, and one of them is a grid system.
While Bootstrap and Foundation are great in many cases, it can take a lot of work to customise them for each project, and the array of options can make them heavy and clunky, with a lot of unnecessary features. With grids, it’s important to find a tool that is lightweight and lets you get to work right away. It should have CSS classes that are easy to use, and it should be responsive design-friendly.
Lots of tools break things down by device type (e.g. mobile, tablet, desktop), but with different models and Retina displays, it isn’t that simple. Follow Trent Walton’s advice: introduce a breakpoint when the design itself breaks and not when a new device size should begin.
Good grid systems rely on design principles to determine better breakpoints: appropriate column widths for typography; 12-, 16-, 18- or 24-column grids that allow flexibility with how columns can be divided; and consistency in spacing.
Relying on clean and lightweight grid systems makes coding a new site a lot easier. It takes out some of the guesswork with structure, but without limiting what you can do.
01. Simple Grid (opens in new tab)
Simple Grid is open source and keeps it simple with a 12-column grid, easy-to-remember class names and nice documentation.
02. Pure (opens in new tab)
Pure is used a lot by one of my colleagues at The Iron Yard. The documentation is so well done, it’s as if it teaches devs about better CSS, design and responsive practices.
03. Flexbox Grid (opens in new tab)
Flexbox Grid is particularly interesting as it's one of the first grid systems I’ve seen that is specifically using the flex display option in CSS.
04. Bootstrap (opens in new tab)
05. Foundation (opens in new tab)
Suitable for any device and any medium, Foundation is a versatile platform for making responsive front-end frameworks. It's easy to use as well as extremely flexible, and the team at Foundation are constantly updating their resources.