jQuerin Grid Builder: Custom grid generator based on the responsive grid system

As mobiles and tablets take the web to smaller screens, every publisher wants the website to work seamlessly on these different platforms. It’s practically impossible to make one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle and for several other devices  keeping the resolution compatible. Responsive web designs make it easy to present different formatting and layout to suit the device on which their pages are displayed.jquery_builder

Here is an easy tool based on jquery, Jquerin Grid Builder, it essentially makes building grid based responsive websites quick and easy.

What is Jquerin Grid Builder?

Jquerin Grid Builder is a responsive grid system builder based on the responsive grid system(http://www.responsivegridsystem.com/), which lets you create responsive grids in a visual manner and outputs semantic and clean html & css code. It’s completely free to use all its features, and it’s available on Jquerin(http://jquer.in/builder.html) or Github(https://github.com/kanakiyajay/jQuerin-grid-builder).

Developed by Jay kanakiya, the major features of Jquerin Grid Builder are:

  • Makes your website compatible for any and every platform with compatible resolutions.
  • It allows you to quickly create responsive layout, even with zero knowledge of responsive grid framework.
  • It exports clean html & css with classes and Ids by the user just as a professional web designer would write
  • It can easily be easily integrated in your existing website.

How does it work

Three easy steps and your responsive website that works on any platform is ready

1. Open Jquerin Grid builder(http://jquer.in/builder.html)

2. Create the columns and rows that you want, assign .class and #id, add a //comment

3. Once done with the layout, click on ‘generate code’ button

The Markup

The CSS

Other Important Features

– Have any number of columns: Don’t be stuck with 12, 16 or 24 columns across a whole page. You can have whatever you want, wherever you need it.

Scales to any width: Because it uses percentages, your fluid columns will fit into any width. The margins (gutters) use percentages too.

No Math required: As long as you can count up to the number of columns you need, you’ll be fine.

– Breakpoints are easy: Mobile versions of the grid are already part of the css, or you can cook up your own.

– Fits-in easily: It plugs into your existing HTML and CSS, and it’s so easy to do.

It’s Easy: Use it on as simple or as complex a project as you wish. You’ll be done in minutes.

It’s Smart: There’s no need to hack in any offsets or margin less final columns. It’s the last time you need to use .last and the end of .end.

If you are a web developer, do give JQuerin a spin and share your comments.
[Article contributed by Ishan Vyas. He is an intern at Pluggd.in.]

Add comment

NextBigWhat brings you curated insights and wisdom on product and growth from the wild web.

Over 2 million people receive our weekly curated insights.

Newsletter

Newsletter