40 grid artifacts for responsive web sites

The exquisite and gorgeous design style is being replaced by the flexible and ingenious response design. Today, smoother, more interactive response-style Web templates are evolving at a high speed. The response design revolution is taking place quietly, changing the way the web design develops. At the same time, excellent responsive web pages enable users to stay on the page longer.

To this end, I prepared a set of response Web pages used in grid system tools, to share with you.

1, Gridpak

A set of responsive grid systems designed by Erskine. Download a set of files from the Gridpak that contain the corresponding png,css and JS to create your own response grid system. There are instructional videos on the website.

2, semantic

The semantic grid system is a modern CSS grid system. It allows you to set the width of the grid bar, the number of grids, and support the pixel and the percentage of the two computing methods free switch.

3. Response Calculator

A simple computing tool that can help you make your PSD a Web site with precision.

4. BASE Frame

The base framework is a super simple, responsive frame that can create a grid that fits into a variety of screen sizes.

5, Rwdgrid

Rwdgrid is a grid system that is created from a popular 960Grid system. This response grid system can be adapted to mobile phones, tablets, desktop computers and other sizes.

6. Simple GRID

Simple Grid is a lightweight basic grid system, not a CSS framework. In this system, the content and the grid that once occupied different grids, the adaptive grid composed of responsive pages.

7, proportional grid

Do not consider width, try to test the scale to control the grid system. This is a way to control the grid by a fixed ratio, using the class to set your grid and control the breakpoint.

8. one% CSS Grid

The One%css grid system is made up of 12 columns of flexible CSS grids. It is designed to be a quick and easy tool for building responsive web pages. You don't have to resize and edge over and over again, a one%css to help you get everything done.

9, Bourbon NEAT

This is an open source adaptive grid framework built on bourbon, designed to create a flexible grid system to build responsive web sites.

10. KUBE CSS Frame

Kube is an advanced and flexible CSS framework that can be used in all modern browsers and is free for commercial use.

11, Responsify

Responsify is a browser-based tool that can help you build your own web templates. You can easily set the number of columns, leave the white width, the number of breakpoints, and then download the zip file.

12, Gridless

Gridless is a cross-platform html5/css3 template for mobile and different browsers. It is the basic template, through editing, adjustment and rewriting, to adapt to the design requirements of different projects.

13, Simplegrid

When building a Web site, the number of code in the grid system is the primary issue to consider. This tool keeps the code of the grid system simple and intuitive, creates fewer tags and classes as little as possible, and removes unnecessary classes.

14, FLUID GRID CALCULATOR

When building a Web site, how many columns you want to grid, how wide each column is, how wide the spacing is, these parameters can be set directly in the grid computer. The calculator returns all of their possible parameters and provides a complete stylesheet download.

15. GOLDEN GRID SYSTEM

The grid system divides the browser into an average of 18 columns, and the top two columns are used as boundaries of the grid, and the remaining 16 columns are freely grouped or even folded. On a tablet, they can be divided into 8 columns, and on the phone they are grouped into 4 columns. In general, it can easily cover screens ranging from 240px to 2560px in width.

16, Columnal

Columnal It's easy to make prototypes. The default width of the columnal is 1140px, which automatically adapts when it appears in other browsers and adapts to the vast majority of browsers.

17, responsive design bookmarklet response bookmark

This scripting tool can generate a set of custom bookmarks to test the response site layout to see how they fit under different window sizes.

18. Gumby Frame

The Gumby framework is a flexible and sensitive CSS framework based on SASS. Using this framework and UI kit, you can quickly create logical pages and program prototypes.

19, Gridset

Gridset help you quickly create a responsive web site prototype without complex operations. It provides all the development aids you need, based on existing tags, without any new class or HTML code. 30 days free trial, also can choose to pay monthly or yearly.