Jar Grid is a super simple grid system that saves you time when working on simple projects
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
img
scss
LICENSE.txt
README.md
favicon.ico
index.html

README.md

#Jar Responsive Grid

Jar is a super simple resposnive grid that handles the brakepoints of your layout while you focus on developing.

#Get Jar

*Get up and running by downloading Jar http://kaprilam.github.io/Jar//
*Get up and running by cloning the repo,(for stable releases download from site or clone from stable branch since the project is in constant development).

#Jar Quick-Start

Jar is very semantic, to make use of the rows and grid you just have to add the class .*row* to a container (either *article* or *div* for better results) and then nest your columns using the size you'd like it to be.


````Html
You'll get a container 6 cols wide based on a 12 cols grid.
You'll get a container 6 cols wide based on a 12 cols grid.
````

What Jar includes out of the box

1.Offset columns : You can offset columns adding the prefix .offset-Number of columns.

    <article class="row">
      <div class="offset-six">
        Will offset the width equivalent to six
      </div>
    </article>
  1. Choose left or right position for your element, you can either push things to right or left using .lefty or .righty classes.
  <article class="row">
    <nav>
    <span class="lefty">
      Brand(on the left side of nav)
    </span>
      <div class="container>
        nav. links
      </div>
    </nav>
  </article>
3.Wrap your content on a full with container or a centralize padded container using _.container-full_ and .container_ classes respectively.
````Html
<div class="container">
  <article class="row">
    <div class="six">
      content
    </div>
    <div class="six">
      more content
    </div>
  </article>
</div>
````
````Html
  <div class="container-full">
  <article class="row">
    <div class="six">
      content
    </div>
    <div class="six">
      more content
    </div>
  </article>
</div>
````

For more information on how to use Jar

[Checkout Jar Grid here](http://kaprilam.github.io/jar//)