ChakraGrid.js

Summary

ChakraGrid is the next generation grid template, improving the CSS-only approaches to responsive grids such as Bootstrap and Materialize.css. ChakraGrid is both JavaScript and CSS based which allows the plugin to dynamically align the heights of columns in each row resulting in a more flushed grid, less prone to the annoying gaps caused by Bootstrap or Materialize.

ChakraGrid uses the width of the parent element(the div with class=ChakraGrid), not the entire screen width like Bootstrap and Materialize to determine which size class to use for the columns.

The developer can choose between the Materialize and Bootstrap size classes or provide custom size classes.

The basic skeleton for ChakraGrid is:

<div class="ChakraGrid" alignHeights="true" sizing="bootstrap">
    <div class="cRow">
        <div class="cCol" xl="2" lg="3" md="4" sm="6">
            Cell1 Content
        </div>
        <div class="cCol" xl="2" lg="3" md="4" sm="6">
            Cell2 Content
        </div>
        <div class="cCol" xl="2" lg="3" md="4" sm="6">
            Cell3 Content
        </div>
    </div>
</div>

Note that the main container element has class ChakraGrid, and the .ChakraGrid element consists of .cRow elements which consist of .cCol elements.

Initializing

$('.ChakraGrid').ChakraGrid();

Grid Components

Rows

A row contains one or multiple cells and ensure a line break after the last item. A row does not necessarily need to have all content on the same horizontal line, overflow cells will continue underneath on a new line. The available width is broken into 12 equally sized sections called columns.

Cells

This is the basic building block of page content. The developer specifies how many columns each cell can take. If the attribute “fillWidth”=true is set for orphan .cCol elements, they will expand to fill any extra columns on the line

Centering Cell Content Vertically:

A common need is to center a cell’s content vertically. To do this, just wrap the cell content in a div with class vcenter:

<div class="cCol" xl="2" lg="3" md="4" sm="4">
	<div class="vcenter">
		<p>"Banking establishments are more dangerous than standing armies." -Thomas Jefferson</p>
	</div>
</div>

Custom Column Size Classes:

Need to customize the dimensional definitions of xl, lg, md & sm:

<div class="ChakraGrid" sizing="custom" xl="1200" lg="992" md="768" sm="544">
	...
</div>