ChakraGrid jQuery Plugin

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>

Download for More Fun

file_downloadChakraGrid
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan
"It all seemed so well timed"
-Bob Dylan

Resize Me!

Quote Grid

"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away."

Antoine De Saint

"All paid jobs absorb and degrade the mind."

Aristotle

"Banking establishments are more dangerous than standing armies."

Thomas Jefferson

"You need something special to give you hope
But hope's just a word
That maybe you've said and maybe you've heard
On some windy corner 'round a wide-angled curve
But that's what you need man, and you need it bad
And yer trouble is you know it too good
"Cause you look an' you start getting the chills
Cause you can't find it on a dollar bill
And it ain't on Macy's window sill"

Bob Dylan

"I strive to be brief but I become obscure."

Horace

"Be The Change You Wish To See In The World."

Mahatma Gandhi

"Though you might hear laughin', spinnin', Swingin' madly across the sun
It's not aimed at anyone, it's just escapin' on the run
And but for the sky there are no fences facin'
And if you hear vague traces of skippin' reels of rhyme
To your tambourine in time, it's just a ragged clown behind
I wouldn't pay it any mind
It's just a shadow you're seein' that he's chasing."

Bob Dylan

"Money does not represent such a value as men have placed upon it. All my money has been invested into experiments with which I have made new discoveries enabling mankind to have a little easier life."

Nikola Tesla

"Peace can only come as a natural consequence of universal enlightenment."

Nikola Tesla

"The desire that guides me in all I do is the desire to harness the forces of nature to the service of mankind."

Nikola Tesla

"Let the future tell the truth, and evaluate each one according to his work and accomplishments. The present is theirs; the future, for which I have really worked, is mine."

Nikola Tesla


Resize Me!

Photo Mosaic


Resize Me!

Materialize Form Demo


Resize Me!

Ali G Phrases

"I Is Here With None Other Than My Main Man"
"Respect"
"Check It"
"Safe"
"Boom, Selector"
"Let me understand what you is saying"
"Boo Yah Kah Shaa!
"Aiiii"
"Whatever"
"So you better listen up and recognize"
"Easy Now"
"Big Up Yourself"
"Does you think"
"Techmology"
"Hear Me Now"
"Innit"
"Science, Is it good or is it whack?"
"So we is meant to believe"
"West Staines Massive"
"What date does you hold the Fourth of July on?"
"Does the moon really exist?"
"Alright, You is heard it here."
"You'd better learn about these things from my man Buzz Lightyear, here."

Resize Me!

Explore Chakra7 Today