Grid & Frameworks
Columnal
Columnal is a Pulp+Pixels project, which has been borrowed from cssgrid.net while some code inspirations has been taken from 960.gs. Columnal helps you a lot in your responsive web design, by making your grids flexible to change dynamically when the browser window is resized.
Skeleton
Skeleton is a simple and powerful CSS framework, which is mainly liked by developers and designers because of its simplicity and efficiency. There is no heavy-lifting with Javascript here, only good and pure CSS with clean documentation.
LessFramework 4
Less Framework is more or less a framework, in the name of its creator. It is an adaptive CSS grid system based on using inline CSS media queries, which makes the development of responsive websites much easier.
Semantic Grid System
Semantic Grid System is used to design responsive grid layouts. It uses pre-processed CSS extensions like LESS, SCSS or Stylus to deliver maximum efficiency. You can select column and gutter widths, choose the number of columns and switch between pixels and percentages.
Golden Grid System
Golden Grid System is a fluid-grid system which serves as the starting point of your responsive web design. It enables the website to serve good-looking pages ranging from 240 to 2560px.
320 and Up
320 and Up is a CSS media queries boilerplate, which serves to be the starting template for your responsive design. It follows a completely reverse approach than the several other boilerplates available.
Inuit.css
Inuit.css is a CSS framework, which is extremely easy to use, even for novices. It has a minimalist approach, thus you need to deal with only things that are needed, but if need be, it can also be extended with a handful of plugins available.
Gridless
Gridless is a boilerplate for creating responsive and cross-browser websites with beautiful typography. This tool focuses on progressive development of a project, and it serves as the starting point of any design.
1140 CSS Grid
1140 CSS Grid is a great CSS grid system designed by Melbourne designer Andy Taylor, which lets your design fit perfectly at 1140px for large monitors and your fluid layout will adapt seamlessly to other smaller resolutions with very little extra work.
1KBCSSGrid
1KB CSS Grid designed by Tyler Tate, is a simple and lightweight CSS Grid generator. It will allow you to set the number of columns, column width and gutter width, and you can get a downloadable CSS for your websites grid.
Bootstrap
Bootstrap, created and maintained, by Mark Otto and Jacob Thornton at Twitter, is an excellent set of user interface elements, layouts, and javascript tools, freely available for you to download and use in your web design projects.
Fluid Grid Calculator
This simple tool will help you to quickly grab the CSS of your fluid grid website design.
Fluid Grids
Fluid Grid is a simple yet useful fluid grid framework, that creates responsive layouts based on 6, 7, 8, 9, 10, 12 or 16 columns.
Flurid
Flurid is a simple and very useful cross-browser CSS grid framework with up to 16 columns. And moreover it doesn’t hide pixels into margins.
Gridset
Gridset is a tool for making grids of any type, such as, columnar, asymmetrical, fixed, ratio, compound, responsive and more. This tool by Mark Boulton, is still in beta, but proves to be promising. And did I mention, using it is as simple as embedding a link.
Gridpak
Gridpak is an online responsive grid generator, where the number of columns, padding, and gutter can be changed, and custom breakpoints can be added. The CSS is generated by the tool and made ready for download. It also provides PNG grid templates, which can be used for designing purposes in Photoshop.
SimpleGrid
SimpleGrid, developed by Michael Kuhn, is a very simple and straightforward CSS framework for creating infinite grid-based layouts. By default, SimpleGrid is prepared for 4 distinct ranges of screen sizes.
Susy
Susy by Oddbird, is similar in action to the Semantic Grid System. It uses no extra markup or any other special classes, but is only aimed to the users of Saas and its extension Compass.
Tiny Fluid Grid
Tiny Fluid Grid is an awesome web app, that can help you determine the grid system of your website in an interactive way. You can set the number of columns, gutter percentage, minimum and maximum width of your website’s layout, and can get a downloadable CSS for it.
Variable Grid System
Variable Grid System is designed and developed by SprySoft and is based on the 960 Grid System. It allows the developers and designers to generate the custom grid and then download the accompanying CSS file based on that grid.
Sketch Sheets & Wireframes
Responsive Web Design Sketch Sheets
This tool is useful in mapping out the placements of various elements in your website layout across various devices. With the help of this device, you can form an idea of where to place the necessary elements of a website for different screen sizes and resolutions.
Responsive Wireframes
Responsive Wireframes is an experimental tool created by James Mellers of Adobe. It is built with only HTML and CSS (no images or JS were used) which you can use to visualize how your responsive design would look like on actual browsers of various desktops and mobile devices.
StyleTiles
Style Tiles gives you a way to develop an idea of how a website would look like, independent of the complicated styles that come into play. It gives you the opportunity for a perfect responsive design workflow and also the ability to integrate client feedbacks.
JavaScript & jQuery Plugins
Adapt.Js
Adapt.js is a Javascript solution and an excellent alternative to the CSS media queries. Using @media approach is good practice, but this does not work for all browsers. Nathan Smith, the creator of 960 Grid System, released Adapt.js, a very lightweight javascript library to overcome this problem.
Isotope
Isotope is an amazing jQuery plugin, which proves to be very useful while designing a responsive design. It not only helps to rearrange the elements of a page when the browser window is resized or the screen size is smaller, but it also helps to filter those elements.
Masonry
Masonry is an excellent jQuery plugin, which is used to create dynamic and adaptive layouts. This plugin helps to rearrange the elements in your responsive design, so they can fit better in the open-spots on the grid.
