IMNOW / Web Design
#
#
#
30 Flexible Grid Tools for Responsive Websites
In order to create a responsive website, apart from the effort and time (unless you are using IM Creator), it require two major things. One is the flexible fluid grid while the other one is responsive images. In order to create those flexible fluid grids, you need certain tools and these tools will help you quickly develop the template. That is exactly what this article is about. We are presenting 30 flexible grid tools for responsive websites which you can enjoy after the break. As always, your comments are welcome.
30. Gridpak
Gridpak is a responsive web design tool that can be used for creating grids for your website template. It was created by Erskine Design.
29. The Grid
This is a 12-column flexible grid which can be scaled out to an arbitrary size which is defined by the maximum-width of the row. It is also easily nested which means you can build complicated layouts without getting into a lot of custom elements.
Golden Grid System is a simple grid system for responsive web design. It includes elastic gutters, a baseline grid that can be zoomed upon, folding columns, and a very nice grid overlay script.
27. Susy
The web is a responsive domain. This responsive-ness stretches from the development process to the end-user. In order to ensure this responsive-ness, you need to create custom grids that are powerful and reliable. in order to do just that, you need Susy.
This particular grid system has been made by combining several other grid system tools. Of course, custom code has been thrown into the development process of this particular tools as well. This is an elastic grid system where some code has been inspired by 960.gs for example the idea for subcolumns.
Using this particular tool you can switch between pixels and percentages while setting several limits. You can set column and gutter widths and choose the number of columns as well. This can be achieved without the use o .grid_x classes in your markup which is a lot less pain.
This is very simple calculator which will help you turn your PSD pixel perfection into the start of your responsive website. Everybody needs a calculator specially if you are looking for extreme accuracy.
23. Adapt
This is a very light tool. The size is hardly 850 bytes. It is a JavaScript file that will determine which CSS file to load before a page is rendered by the browser. If the browser is tilted or somehow resized, this particular tool checks the new width and serves the appropriate CSS file.
22. Gridless
This tool will help you make future-proof responsive websites with ease. Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.
21. Simple Grid
This particular tool is responsive, self-aware and sensible. It offers infinite nesting, with one class per element. It is uniquely simple to use and perfect for beginners.
20. Base Framework
This is quite a powerful tool indeed. It is a responsive framework which is designed to work for mobile devices, netbooks, tablets and desktop computers.
19. Bourbon Neat
This is a tool for Sass and Bourbon. It is a very lightweight semantic grid framework.
This one probably has it all. It is also minimalistic and simple to use. On top of that, it is adaptive and responsive. It offers a revolutionary flexible grid and beautiful typography and offers complete freedom at that.
17. One% CSS Grid
This is a very fluid CSS grid system which works on a 12 column basis. It was designed to be used as a base while building responsive web layouts. It requires minimum effort from you and saves time.
16. RWD Grid
This grid system is based on the 960 grid system. It is responsive and ranges from mobile, tablet, laptops and wide screen displays.
15. Responsify
This is a browser based tool. It will allow you to create your own responsive templates all in one browser. Easy done, easy said.
14. Simple Grid
This tool was created for developers that need barebones grid. It works perfectly with 1140px layouts and can adapt to multiple layouts.
This is a CSS framework and is as simple as it is possible to make.
12. Ivory
This particular tool can adapt to any size from phones to big-screen TVs. It offers four width layouts including 1200px, 1140px, 1024px and 960px.
11. Responsive Aeo
It offers 12 columns and less code. It offers simplicity and minimal effort on your part.
10. Gumby
This tool is built with the power of SASS which is a powerful CSS preprocessor.
9. Skeleton
These are a small collection of CSS files which can help you develop your websites rapidly. They will look beautiful on any screen-size too.
8. 1080 GS
This is an expansion of the 960 Grid System. All they did was basically add 120 pixels whilst utilizing similar margins. It is perfectly fine for beginners.
7. 960 GS
This was an effort to streamline web development by the provision of commonly used dimensions that would be based on a width of 960px. It offers two variants the 12 and 16 columns.
This is the ultimate resource when it comes to grid systems.
5. 978 GS
867 is a grid layout system which uses 12 columns with 30px gutters. The columns are based on 54px.
This particular tool will create custom grid systems in valid css/xhtml. It can be used for rapid prototyping, development and production environments.
This is not a framework. It is not a boilerplate either. What it is, is a quick, flexible and easy way to create responsive websties.
MUELLER is a modular grid system. It can be used both for responsive and non-responsive layouts. The tool is based on Compass.
If you are looking to generate underlying CSS grid for your website, this tool is a quick and easy way to do just that. The file generated by CSS is based on the 960 grid system.
