Traditional design methods just a few years ago meant that you had to design a homepage all by itself, stitching together wireframes and content boxes and then hope for the best, but gradually this technique has disappeared and new, more modern, methods of rapid website development have emerged. Most notably, CSS3 introduced Flex-box — an easy to use grid function that you could use to create content layouts and have them adapt to any device natively, but still — some are resistant, while others take even more complicated approaches for absolute design precision.
When you open a new website, typically what you are going to see is the header part of the site, content area and a sidebar (even websites who don’t use WordPress as their CMS) — those main areas also include their own design layouts and specifications, and the rabbit hole continues to get deeper, but with such a huge demand for mobile layouts these days, it’s crucial to find a way to design a homepage (or any other page) layout that would look well across all mediums, devices, and software. So.. we thought it might be useful to our fellow developers that we put together a collection of CSS & HTML frameworks and systems for developing grid layouts.
Want more frameworks? Try our other roundups:
Why spend weeks working on perfecting a layout, when you can use a simple grid system to automatically design the layout for you. Needless to say that these designs are adaptable to any situation, so you can save yourself from the headache of having to work out kinks and quirks of the design layout itself, and instead of that focus on fulfilling those grid boxes with the content that you want to put there. There is a great deal of variety and different styles that you’ll find throughout these grid systems, take some time to visit the demo pages and maybe even write down what you’re looking for so you have an easier time to find the matching framework for your needs.
Msdotcom/WinJS Grid Framework
Msdotcom grid system uses the Microsoft color scheme that provides and automated output of a SASS built responsive grid, which developers can manually control to adjust grid parameters and outline. Using padding and float parameters, you can create the spacing you require between each individual grid elements. The really cool thing about Msdotcom system is that it’s all based on a configuration file, so grids and columns can quickly be prototyped only by using a single config file. Grids are the foundation of your design, while columns is where you put your content, and with this framework it’s easy to separate both to create a solid design experience.
Dead Simple Grid
Grids should never be complicated, in their true essence they’re just HTML elements putting together an overall design, and Vladimir Agafonkin is one of the developers who embraces that concept. His grid framework Dead Simple Grid comes in at only two hundred bytes of CSS code; that is such a minimal amount of code, your pages won’t even notice that it’s there.. You can separate the grid to feature a main content area, and a flexible sidebar if you desire. This kind of a grid would suit blogs and general homepage layouts where minimal design is preferred. Responsive design is integrated thanks to media queries, so the grid will look flawless on any device it’s being used on.
Bourbon is a very successful library of mixins for SASS preprocessor. This of course, has made Neat an appealing choice for those who use Bourbon and SASS already. Neat gives developers access to a fluid grid system that’s fast and easy enough to setup in minutes, but flexible to the point where unlimited changes and adjustments wouldn’t become a problem.
Grd is a CSS grid system that uses Flexbox as the backend tool for creating flexible and modern responsive layouts. Using the Live Demo you can play with the settings and different design customizations to see if Grd could solve your problem of getting a particular design element integrated in your existing workflow. We found it easy to make headers, footers, and general content areas using nothing but a dropdown of settings.
Structure, which is also based on Flexbox, uses declarative syntax patterns (similar to those in Angular.js) in order to define sections and layout parameters. Some developers have complained that the final markup of the page cannot be validated, but the idea is that using Structure you can create a declarative grid that doesn’t mess with traditional CSS attributes, like classes and identification names.
Grid is an awfully easy to use semantic grid system that provides responsive design capabilities. You’ll need to get your hands on Compass and SASS to get it working. The classes ae defined as rows and columns, so you can select from small, medium and large columns and build layouts based upon them.
۹۶۰ Grid System
Hundreds of thousands of websites have used Nathan Smith’s 960 Grid System to power their design layout. It’s an efficient tool for streamlining the workflow of hard working web developers. Through the choice of two different column layouts (12 & 16 respectively), developers can quickly bootstrap a homepage that’ll support any kind of dynamic and static input. It’s possible to add more columns, but you’ll need to work with the documentation to understand the use more clearly.
Unsemantic is the follow up version of the 960 grid that provides full responsive design capabilities. Through unique pull classes developers can rearrange the layout of the page they’re producing, which could help to promote and showcase most important content at any given time, a known strategy to help search engines better understand the purpose of each content element. Unsemantic is also a proud user of Media Queries, so established front-end devs won’t have a tough time to customize this grid framework for their own needs.
Gridlex does stand out because of its stellar design and ease of use. The simplicity of this Flexbox based grid framework is astonishing, the vision is simple — wrap your columns within your grid, and if necessary to any additional adjustments to make your final design look irresistible. Just by looking at the demo’s of websites that use Gridlex it’s evident that this is a top of the line grid system and you won’t be disappointed by what it can do for your own projects and workflow.
Responsive Grid System
Responsive Grid System has a lot going for it, the perfect domain name, a clear vision and the required tools to make responsive grid design a breeze! The Grid Generator gives a simple form input where you can specify the number of columns you’d like to use, and the margin you’d like to see between them.. click submit and you’ve got yourself a ready to go code output of your next responsive grid layout. The author, Graham, is happy to do all the hard work for you if you so desire, you can get in touch with him at the footer of the page.
Gridly was built as a minimal grid layout system to support the most modern browsers today. It’s lightweight structure helps developers to have an easy time for getting a grid/column layout up and running without too much hassle. The absurdly minimal size of this library will leave you wanting for more for projects to come.
Formstone isn’t a single managed grid system by itself, it’s actually a library for front-end developers who are in need of highly customizable components and web elements that make up a traditional web page that you encounter on daily basis. Being a modular, responsive and automated library — Formstone can be used not only for the purpose of scaling a big-time website project, but also for the use of the grid layout itself.
۱۲۰۰px Grid System
Browsers have moved beyond the traditional below-1000px layouts, so 1200px is a great successor to the existing 960 grid system we mentioned earlier. You can select custom column width, how many columns you want, and the space margin between each of the columns, all of which will be put together into a 1200px grid layout.
Where would Bootstrap be today if it wasn’t for it’s grid system upon which everything else was built on? We’re still eagerly waiting for Bootstrap 4 to arrive, but in the meantime.. you can’t resist saying yes to a framework that has managed to establish itself as one of the most prominent front-end frameworks of this century. Millions of websites are powered by the features of Bootstrap, yet none of it would be possible if it wasn’t for the grid framework that comes integrated into the core of Bootstrap.
Foundation is another successful front-end library that supports responsive design, the latest version (Foundation 6) brings to the table even more modern features and elements that can help developers provide their clients with incredibly versatile designs. The easy to use templates provided by Foundation gives you a chance to take a rest from all this grid development, and instead focus on what’s important — the stuff that you’re going to put within that grid itself.
Skeleton has a beautiful and natural design that’s going to leave you for wanting more. The idea behind Skeleton is that it’s best used for small projects, or projects where you don’t feel like using a full-fledged framework would be appropriate. Skeleton provides you with the essentials that you’d need to get a website prototype up and running; a grid layout, typography options for headings and sections, button elements for all your form needs, and in fact custom forms so you can save time for having to code your own, a nice addition of lists, tables and code syntax, and a media queries framework so your designs become fully responsive!
Responsive Grid System 2
Responsive Grid System (version 2) is a mobile-first grid system that’s super tiny in size, yet highly effective in style. Select from a range of column layouts (24, 16, 12), customize the margins and paddings between the columns, and use polyfills to create a stellar design layout.
Responsive Grid System for your Next Project
Responsive Grid System for your Next Project uses the same classes as 960 grid system, it’s built to serve mobile visitors first, provides a boilerplate for header management, and has been tested with all modern browsers so you’re in good hands. This can be used as a base grid system that will help you to build responsive web design with your existing proficiency over popular grid system.
IceCream is as good as the name suggests, nice and tasty! If you’re a developer who only needs a grid system and nothing else, IceCream is likely to be your ultimate savior! Create custom grids with unlimited possibilities in a matter of minutes.
HTML5 Boilerplate is a robust boilerplate framework (template) for front-end developers who want to kickstart their project without the extra fuss involved when using bigger frameworks like Bootstrap or Foundation.