There is nothing quite like a grid, is there? Clean, functional and simple to use, it is a basic tool in the designer’s arsenal. That is why there are so many resources available on the web to assist you with creating, using or sharing grids.
Here is a list of 10 brilliant resources to put into your own little grid-based design box.
If you feel like doing it without having to create your own CSS framework (I can already see a bunch of you nodding your heads with great enthusiasm), you can check out these boilerplates.
HTML5 is fast becoming the No. 1 used, experimented on and recommended format for just about any project. The versatility provided by the update to the old classic is a big reason for that, and there have been some amazing experiments that show what it is really capable of.
Compatible with both HTML5 and CSS3, this boilerplate makes it easier to create websites viewable on multiple browsers, with design specifics like layout and typography as a main focus.
If you want to go with what is affectionately referred to as "old" frameworks – showing how quickly new technology truly is released – you can try out these dinosaurs that are still just as good as the day they were released.
This is one of the original sites dedicated to existing framework and design. A great deal of new designs originated from this source. You can find a lot here to get you along.
Standing for "Yet Another Multicolumn Layout," this framework describes its products as "bulletproof and flexible." That is a promise it is able to keep, as it gives you the tools you need for simple and rapid CSS framework development. It has everything you need, so YAML is a must to check out.
Brand Spankin’ New Frames
Sometimes you want something new and cutting edge. These websites offer that, though most of them take bits here and there from the old classics to keep them relevant to the original grid we have all come to know and love.
This grid system is a really nice one. It was created by taking a number of CSS layouts and combining their elements. Then, custom coding was thrown in the mix to provide a unique style. Each piece for the new system was taken from both 960GS and CSSGrid, based on their elastic grid design.
If your main concern is having a boilerplate that is mobile friendly, this might be the choice for you. The CSS/JS mixed files are made to allow for development that works at any screen size. The flexibility makes it easy to create one site that will work on mobile screens as well as standard laptop or computer screens.
For front-end framework compatible with the standard CSS3 – as well as HTML5, jQuery and PHP – your best bet is G5. It is a great starter for any basic website, made specifically for fostering efficiency in web development. It has a great list of features.
The name is a bit of a mouthful. But the layout is clean and simple, working on a six-column grid. If you are a beginner who doesn’t know that much coding, you will want to stick with this one. It has a full tutorial on how to change things like the column titles and content. It also shows you how to add or remove columns without disrupting the design.
This is a jQuery-specific plug-in that creates a unique layout with a great image-heavy design. The whole build is based on a grid that is different from many of the standard column designs you see today. It pushes it all into a much more compact and well-organized design than the CSS floats standard.
Less Framework is extremely simple. It takes a single grid and gives you four layout options and three typography presets in one package. The idea is that you have a more basic layout, allowing for a more adaptive website without the need for future framework. Whether it is viewed on a PC, laptop, tablet or mobile device, it will fit properly.
Whether you are a fan of frameworks or not, you will find what you need to take advantage of simple grids for web designs on these 10 sites. They give you amazing resources, and they are only a few of what is out there.
Leave your suggestions for other great tools to put into your grid-based design resource box in the comment section below.