Responsive grid layout generator

Responsive grid designs are getting more popular by the day, and its the right thing to do! Responsive design is great to make your website look pretty on multiple resolutions and devices so implementing it on your website should be somehow prior. To help you out a little bit, we’ll talk today about Gridpak, which is an interactive web application to help you generate responsive grid layouts quickly.

The grid generator application allows you to easily set the width of the grid, the number of columns, column padding and gutter (all of this features are standard ones that we have seen on multiple layout generators). The awesomeness about this comes with the ability to add breakpoints for responsive outputs. You can easily change the size of the layout by clicking “add break point”.

After you have chosen your setup, a custom download pack is provided that includes a CSS file (contains all the classes and properties you need to create the responsive design layout), a LESS file (has the same information but includes variables, mixins, and all the great power of LESS), a SCSS file (same as LESS, but in SCSS), a semi-transparent PNG file for each grid (this helps you out with the design) and a JavaScript snippet (allows you to toggle an overlay of your grid on and off using the “G” key).

Responsive grid layout generator

Responsive grid generator

View Gridpak

Related Posts

Responsive grid layout that adapts

HorizontalNav : jQuery plugin that spans a horizontal navigation

jQuery plugin to organize content in a responsive layout

Responsive drop-down navigation for mobiles and small screen devices

Leave a Reply