29. The Grid
IMNOW / Web Design
  • #
  • #
  • #

30 Flexible Grid Tools for Responsive Websites

4.06.14 By Ali No comments

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

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

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.

28. Golden Grid System

28. Golden Grid System

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

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.

26. Columnal CSS Grid System

26. Columnal CSS Grid System

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.

25. Semantic Grid System

25. Semantic Grid System

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.

24. Responsive Calculator

24. Responsive Calculator

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

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

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

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

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

19. Bourbon Neat

This is a tool for Sass and Bourbon. It is a very lightweight semantic grid framework.

18. Kube CSS Framework

18. Kube CSS 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

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

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

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

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.

13. Toast CSS Framework

13. Toast CSS Framework

This is a CSS framework and is as simple as it is possible to make.

12. Ivory

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

11. Responsive Aeo

It offers 12 columns and less code. It offers simplicity and minimal effort on your part.

10. Gumby

10. Gumby

This tool is built with the power of SASS which is a powerful CSS preprocessor.

9. Skeleton

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

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

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.

6. The Grid System

6. The Grid System

This is the ultimate resource when it comes to grid systems.

5. 978 GS

5. 978 GS

867 is a grid layout system which uses 12 columns with 30px gutters. The columns are based on 54px.

4. Grid System Generator

4. Grid System Generator

This particular tool will create custom grid systems in valid css/xhtml. It can be used for rapid prototyping, development and production environments.

3. Responsive Grid System

3. Responsive Grid System

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.

2. Mueller Grid System

2. Mueller Grid System

MUELLER is a modular grid system. It can be used both for responsive and non-responsive layouts. The tool is based on Compass.

1. Variable Grid System

1. Variable Grid System

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.

 

3
promo-2
promo-1

MORE

1. Delivery Method

5 Aspects of User-Friendly Notifications

28.07.14 By Ali No comments

App design is as unquestionably tricky as it is competitive; there are just so many aspects that need to be taken into consideration, including one which is too often ignored: notifications. Notifications serve a very simple purpose: to update app users...

more
4. Sketch Tips
10. GIMP
Free-Dropdown-PSDs15
3
promo-2
promo-1
free-switch-toggle-psd-11

50 Free Toggle, Switch, Button PSD Designs

3.07.14 By Ali No comments

So you are creating a brand new website and you need some toggle buttons and switches. What do you do? For those of you who don't have the time or the Photoshop skills to create them yourselves, the internet has answers - and we have already found them...

more
Notification Box PSDs-39
ZebraPrintTextures15
Light-Effects-Photoshop-Brushes-13
3
promo-2
promo-1