Websites and humans have one thing in common. Both went through a great deal of evolution and change. The only difference is that we took millions of years to get to where we are today. Websites took just 10 years. Gone are the days of creating just a nifty looking website with a cool banner and a Contact US page. New technology and innovation has given birth to new demands and requirements that today’s websites must be able to cope with. Nowadays, it is all about websites that are interactive and responsive.
Creating responsive websites is a pleasant and refreshing shift from the previous paradigm of website design. There are 2 very important elements to creating such a website:
- Create a flexible fluid grid
- Including Responsive Images
Today’s post will keep the focus on fluid grid tools and highlight 12 of them that can be used to create flexible and responsive websites.
1. Fluid Grids
Download Link: http://csswizardry.com/fluid-grids/
This tool is now officially in Beta. Users have the ability to not only create grid sets but also save and manage them and integrate them into different projects. It’s highly advanced algorithm anticipates every possible column configuration and provide users with a simple set of classes to create their layout.
Download Link: http://gridsetapp.com/
3. Responsive Calculator
This tool by Stu Robson is based on a ‘pixels to percentages’ functionality. While there are many others like it, this tool is unique because it not only creates fluid grids, it also generates all CSS rules for the user which can be copy pasted directly into the stylesheets.
Download Link: http://rwdcalc.com/
Download Link: http://gridpak.com/
5. Semantic Grid System
CSS and web design go hand in hand. Nowadays pre-processed CSS’s are all the rage among designers and this is where Semantic Grid System comes in. This tool utilizes pre-processed CSSs in a highly efficient manner in the grid system without using any unnecessary classes.
Download Link: http://semantic.gs/
6. Columnal CSS Grid System
Nicke Gorsline of Pulp+Pixels created this grid tool based on the 1140px grid system. However that’s not all. This CSS grid system also comes with a design kit that contains highly useful sketch sheets and templates for CSS debugging styles.
Download Link: http://www.columnal.com/
7. Simple Grid
Download Link: http://simplegrid.info/
8. Golden Grid System
Users of this tool have rightfully crowed it a very handy nickname; folding. This is because this grid tool easily ‘folds’ from 16 columns to 8 and then 4 if needed. The Golden Grid System also features a small browser overlay which is extremely useful when testing. Check out the website for the latest and most up-to-date version.
Download Link: http://goldengridsystem.com/
Download Link: http://github.com/davatron5000/Foldy960
Finally a tool just for Sass users. SUZY creates a grid system that uses no special classes or markup when creating fluid grids. In that sense it is almost similar to the Semantic Grid System, only that SUSY has a catchy name.
Download Link: http://susy.oddbird.net/
11. A Better Photoshop Grid for RWD
We can’t talk about Grid Tools and not mention this one. Unlike the Columnal CSS Grid System that works on 1140px, this one uses a 1000px base. The round number makes calculating percentages much easier all thanks to its creator, Elliot Stocks.
12. 1140PX CSS Grid
Someone had to step up to Nick Gorsline. Andy Taylor created the 1140px CSS Grid tool, also based on the 1140px approach. The tool allows great versatility since it can accommodate resolutions ranging from widescreen monitors to Smartphone mobiles.
Download Link: http://cssgrid.net/
The idea behind this post is not to enforce all of the above mentioned Grid Tools on web site designers. In fact the goal here is to educate them on the tools and technology that is currently out there that they can utilize. Designers are encourages to try out these tools and use them in their design projects. Go through a process of elimination and then determine which tools work best for you.
About the author: Jennifer Mathews is a creative design consultant for LogoSnap.com. For over five years she has been helping small businesses create a brand image and grow their online presence. Jennifer likes to stay ahead of trends, explore new mediums and blog about her experiences.