jquery.columns

jquery.columns extends the native jQuery css method to be able parse viewport relative units (vh & vw only) and provides a method to quickly create reponsive layouts.

Demo: http://elclanrs.github.com/jquery.columns/

License: MIT
Support: IE8*, IE9-10, Webkit, Firefox, Opera
* IE8 requires polyfills for html5 and media queries.

How to use it:

Create block containers at body level so they cover 100% width and add a class row-X where X is "columns per row". Then put as many div.col inside as you want. You can push columns using the class push-X.

<header class="row-1">
  <div class="col">
    <!-- content -->
  </div>
</header>

<article class="row-3">
  <div class='col'> 
    <!-- content -->
  </div>
  <div class='col'>
    <!-- content -->
  </div>
  <div class="col">
    <!-- content -->
  </div>
  <div class='col'> 
    <!-- content -->
  </div>
  <div class='col'>
    <!-- content -->
  </div>
  <div class="col">
    <!-- content -->
  </div>
</article>

<footer class="row-3">
  <div class="col">
    <!-- content -->  
  </div>
  <div class="col push-1">
    <!-- content -->  
  </div>
</footer>

Then call the plugin:

$.columns.quickSetup()

When you add columns dynamically make sure to call $.columns.refresh() after they've been added to the DOM.

Options:

Adjust breakPoints and fontSize min and max values and everything in between will be auto-adjusted based the current window size.

defaults = {
  center: true // center layout?
  breakPoints: [ [1024, 95], [2560, 45] ] // [ [min res, width percent], [max res, width percent] ]
  fontSize: [14, 16] // [min, max] in pixels
}

You can also change the number of columns of a row at different width breakpoints by simply giving an id to your row containers and calling $.columns.setCols:

$.columns.setCols({
  // set 2 columns per row on #mycontainer when window is less than 1280,
  // and 1 column per row when it's less than 1024
  'mycontainer': [ [1024, 1], [1280, 2] ]
  'mycontainer2' [ [1024, 1] ] 
})

To calculate the maximum width of the layout in pixels (ie. for image sizes):

widthInPx = maxRes * (widthPercent * 100); // Default: 2560 * (45/100) = 1152px

Using the extended css method:

With jquery.columns you can pass viewport units to the css method and it will be converted to px and updated on window.resize, so the integration is seamless.

Note: Make sure to pass an object when setting viewport units even if just one property.

// This centers an element in the middle of the screen and
// auto-adjusts when the window is resized to keep proportions
$('element').css({
  width: '50vw',
  height: '50vh',
  marginLeft: '25vw'
  marginTop: '25vh',
  fontSize: '5vw'
})

// You may have to trigger window.resize 
// to load the changes for the first time
$(window).resize()