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

Inspiration

"True greatness comes not by favoritism but by fitness."
-Dr. Martin Luther King
"Do not watch the clock. Do what it does. Keep going."
-Sam Levenson
"Fortune sides with him who dares."
-Virgil
"There is only one real happiness in life, and that is the happiness of creating"
-Frederick Delius
"Music begins where the possibilities of language ends"
-Jean Sibelius
"To live a creative live, we must lose our fear of being wrong."
-Joseph Chilton Pearce
"The poet makes himself a seer by a long, gigantic and rational derangement of all the senses. All forms of love, suffering, and madness. He searches himself."
-Arthur Rimbaud
"When you hit a wrong note, it's the next note that makes it good or bad"
-Miles Davis
"A musician must make music, an artist must paint, a poet must write, if he is to be ultimately at peace with himself."
-Abraham Maslow
"I’ve learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel."
—Maya Angelou
"I can’t change the direction of the wind, but I can adjust my sails to always reach my destination."
—Jimmy Dean
"The only way to do great work is to love what you do."
—Steve Jobs
"I have learned over the years that when one’s mind is made up, this diminishes fear."
—Rosa Parks
"I would rather die of passion than of boredom."
—Vincent van Gogh
"We can easily forgive a child who is afraid of the dark; the real tragedy of life is when men are afraid of the light."
—Plato
"Don't help them to bury the light. Don't give in without a fight."
-Roger Waters
"Do you want to know who you are? Don't ask. Act! Action will delineate and define you."
-Thomas Jefferson
"Even if you fall on your face you're still moving forward."
-Victor Kiam
"Well done is better than well said."
-Benjamin Franklin
"I've failed over and over again. And that is why I succeed."
-Michael Jordan
"The secret of getting ahead is getting started."
-Mark Twain
"Act as if what you do makes a difference. It does."
-William James
"Everything you've ever wanted is on the other side of fear."
-George Adair
"At the end of the day, let there be no excuses, no explanations, no regrets." -Steve Maraboli

Resize Me!
"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!

"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!

Explore Chakra7 Today

"I just want to be there in love and in justice and in truth and in commitment to others" -Martin Luther King Jr.