Combining a jQuery Plugin with a CSS Grid for lovely coding.
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Welcome to the homepage of JSFrame, a jQuery Plugin for making CSS grids even easier.

The idea of jsFrame came from me using by Andy Taylor more and more, especially for quick prototyping. The only thing that irritates me with using such grids (not specifically, but generally) is the extra classes, and the fact that I had to add them. So I decided to come up with a jQuery Plugin which did that for me. And that is where jsFrame came from.

A few notes before we continue:

jsFrame *currently only supports However in the future I will be adding options such that the user could use any css grid / framework (they all follow certain patterns).

*I made this for my own use and it works well. I don’t intend to spend hours of support on this, so please make sure you’ve read through all this before asking me!

Common troubleshooting issues.

*Have you included the jQuery source?
*Are the links to the CSS files correct?
*Have you included jsFrame.js?


jsFrame is very simple. Firstly, make sure the CSS files are all linked to correctly. Then include jQuery and jsFrame.js like so:

   <script src="" type="text/javascript" charset="utf-8"></script>
   <script src="jsframe.js" type="text/javascript" charset="utf-8"></script>

Now you’re all set in terms of files included. Create a new script tag and add this line to execute the plugin:

   $(function() {

All done. Now we need to look at how your HTML needs to look.

Sorting out teh HTMLz

So usually when using you would add classes such as ‘onecol’ or ‘last’. jsFrame takes care of that, all you need to do is tell it is how wide each column is. So to set up a row with three columns of width 3,5 and 4 respectively, your code should look like this (I’ve omitted the closing of divs just to save space):

   <div class="container">
      <div class="row" rel="3.5.4">
         <div>this div will be 3 cols wide</div>
         <div>this one will be 5</div>
         <div>and this will be 4</div>
   <!--closing of divs would be here-->

When jsFrame finds a div with a class of “row” it searches and finds the value of that div’s rel tag. Each number should be the width of the div that you want it to be, in order and seperated by a period (‘.’). jsFrame will also automatically add a class of “last” to the last div. That code is then changed on run time to this:

<!--top two divs omitted-->
   <div class="threecol">...</div>
   <div class="fivecol">...</div>
   <div class="fourcol last"...</div>

Now I don’t know about you, but I find that much easier than manually adding all classes.

A word of warning.

Just remember, if your user does not have JS installed, they wont get any of this. Personally I only use this for mock-ups or sites when I am 100% I can not worry about people without JS. How you decide to use this is up to you.

Help Me!

If you’re stuck, get in touch:
*@Jack_Franklin on Twitter

One final Note
p. All the CSS files included inside ‘grid’ are from, and I take no credit for them.