Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

README.md

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()

About

Viewport relative responsive grids

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.