adaptGrid

  AdaptGrid is a fluid grid framework designed with ease of use and simplicity in mind. Built using LESS and CSS3 media queries, with 'Mobile First'mind'. You can create variant responsive grids on the fly with a simple tools.

Fork me on GitHub
Download

Why Use it?

Css3/html5

Built-on CSS3 and HTML5 semantics to allow you to start captializing on a next generation standard.

Quick Start

First, clone the AdaptGrid from Github. Then add the grid and class in your web. Lastly, compile the Less and view the awesome changes in your browser

Semantic

Everything is now semantic. Now you can have the cleanest markup without sacrificing the utility and speed of AdaptGrid.

Mobile Fisrt

Now you can build for small devices first. Then, as devices get larger and larger, layer in more complexity.

Responsive

Make Responsive Theme part of your website design, or upgrade your current one to a mobile friendly Theme that automatically adapts to any screen resolution or device.

Less

You don't have to know a ton about Less to take this class. The first hour covers an introduction, with the second hour focused on implementing it. You'll be writing Less in no time.

Basic Grid

For a simple two column layout, create a row and add the appropriate number of span- columns. As this is a 12-column grid, each span- spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1
<div class="row">
    <div class="span-1">1</div>
    <div class="span-11">11</div>
</div>
<div class="row">
    <div class="span-2">2</div>
    <div class="span-10">10</div>
</div>
<div class="row">
    <div class="span-3">3</div>
    <div class="span-9">9</div>
</div>
<div class="row">
    <div class="span-4">4</div>
    <div class="span-8">8</div>
</div>

Offsetting columns

Offsets allow you to create additional space between columns in a row. Like the rest of the grid, they're nestable. You can use classes like prefix-4 and suffix-8 to manipulate your column positions in different ways. You can offset up to 11 since you wouldn't ever offset a full-width column. Also you can add no-gutter class to eliminate the gutter.

pre-6 span-6
span-6 suf-6
pre-1 span-4 suf-1
pre-1 span-4 suf-1
pre-2 span-8 suf-2
<div class="row no-gutter">
    <div class="span-6 prefix-6">pre-6 span-6</div>
</div>
<div class="row no-gutter">
    <div class="span-6 suffix-6">span-6 suf-6</div>
</div>
<div class="row no-gutter">
    <div class="span-4 prefix-1 suffix-1">pre-1 span-4 suf-1</div>
    <div class="span-4 prefix-1 suffix-1">pre-1 span-4 suf-1</div>
</div>
<div class="row no-gutter">
    <div class="span-8 prefix-2 suffix-2">pre-2 span-8 suf-2</div>
</div>

Centered columns

Centered columns are placed in the middle of the row. This is accomplished by adding a class of center depending on which breakpoint you want the row to center on.

span-7 center
span-9 center
span-11 center
<div class="row center">
    <div class="span-7">span-7 center</div>
</div>
<div class="row center">
    <div class="span-9">span-9 center</div>
</div>
<div class="row center">
    <div class="span-11">span-11 center</div>
</div>

Infinitely Nest columns

8
8 Nested
8 Nested Again
4
4
4
<div class="row">
  <div class="span-8">8
    <div class="row">
      <div class="span-8">8 Nested
        <div class="row">
          <div class="span-8">8 Nested Again</div>
          <div class="span-4">4</div>
        </div>
      </div>
      <div class="span-4">4</div>
    </div>
  </div>
  <div class="span-4">4</div>
</div>

Responsive

Resize the browser to see the example layouts change. There is two breakpoints currently.

For tablet device, you can add tablet- prefix to the previous classes. e.g: tablet-span-x, tablet-prefix-x, tablet-suffix-x.

The mobile is the same: mobile-span-x, mobile-prefix-x, mobile-suffix-x.

s-4 pre-1 suf-1 t-s-10 t-pre-0 t-suf-0
s-3 t-s-5 m-s-2
s-3 t-s-5 m-s-4
s-4 t-s-8 t-pre-2 m-s-6 m-pre-0
s-4 t-s-6 m-s-3
s-4 t-s-4 m-s-3
<div class="row">
    <div class="span-4 prefix-1 suffix-1 tablet-span-10 tablet-prefix-0 tablet-suffix-0">s-4 pre-1 suf-1 t-s-10 t-pre-0 t-suf-0</div>
    <div class="span-3 tablet-span-5 mobile-span-2">s-3 t-s-5 m-s-2</div>
    <div class="span-3 tablet-span-5 mobile-span-4">s-3 t-s-5 m-s-4</div>
</div>
<div class="row">
    <div class="span-4 tablet-span-8 tablet-prefix-2 mobile-span-6 mobile-prefix-0">s-4 t-s-8 t-pre-2 m-s-6 m-pre-0</div>
    <div class="span-4 tablet-span-6 mobile-span-3">s-4 t-s-6 m-s-3</div>
    <div class="span-4 tablet-span-4 mobile-span-3">s-4 t-s-4 m-s-3</div>
</div>

Tiles Grid

Tiles are an awesome new way to lay out elements on a page that you want to maintain their “grid" style layout. This allows you to preserve the look and feel of things like a grid of profile images in a friends list, or other block-style content generated by your application across devices. Tiles are invoked using the has- class in association with a columns class to determine the layout.

Also, it support differenet device with the prefix tablet- and mobile-.

eq
eq
eq
eq
eq
eq
eq
eq
  • eq
  • eq
  • eq
  • eq
  • eq
  • eq
  • eq
  • eq
  • eq
  • eq
  • eq
  • eq
<div class="row has-8 tablet-has-4 mobile-has-2">
    <div class="column">eq</div>
    <div class="column">eq</div>
    <div class="column">eq</div>
    <div class="column">eq</div>
    <div class="column">eq</div>
    <div class="column">eq</div>
    <div class="column">eq</div>
    <div class="column">eq</div>
</div>                
<ul class="row has-4 tablet-has-2 mobile-has-1">
    <li class="column">eq</li>
    <li class="column">eq</li>
    <li class="column">eq</li>
    <li class="column">eq</li>
    <li class="column">eq</li>
    <li class="column">eq</li>
    <li class="column">eq</li>
    <li class="column">eq</li>
    <li class="column">eq</li>
    <li class="column">eq</li>
    <li class="column">eq</li>
    <li class="column">eq</li>
</ul>

Phrase Grid

Phrase Grid use fraction phrase to define the column width instead of number. It's easier to read and understand.

full
half
half
two-third
third
three-fourth
fourth
<div class="row">
    <div class="column full">full</div>
    <div class="column half">half</div>
    <div class="column half">half</div>
    <div class="column two-third">two-third</div>
    <div class="column third">third</div>
    <div class="column three-fourth">three-fourth</div>
    <div class="column fourth">fourth</div>
</div>

The classes are: full, half, two-fourth, three-sixth, third, two-sixth, two-third, fourth, three-fourth, fifth, two-fifth, three-fifth, four-fifth, sixth, five-sixth.

Infinitely Nest columns

two-third
two-third
half
half
third
third
<div class="row">
  <div class="column two-third">two-third
    <div class="row">
      <div class="column two-third">two-third
        <div class="row">
          <div class="column half">half</div>
          <div class="column half">half</div>
        </div>
      </div>
      <div class="column third">third</div>
    </div>
  </div>
  <div class="column third">third</div>
</div>

Responsive

You can add table- and mobile- prefix to make them adapt different viewports.

fourth tablet-half mobile-full
fourth tablet-half mobile-half
fourth tablet-half mobile-half
fourth tablet-half mobile-full
<div class="row">
    <div class="column fourth tablet-half mobile-full">fourth tablet-half mobile-full</div>
    <div class="column fourth tablet-half mobile-half">fourth tablet-half mobile-half</div>
    <div class="column fourth tablet-half mobile-half">fourth tablet-half mobile-half</div>
    <div class="column fourth tablet-half mobile-full">fourth tablet-half mobile-full</div>
</div>

Adapt grid system uses fluid item widths and fixed gutters.

The column widths have percentage values, and the gutters have px values.

Semantic Grid

Set span and gutter widths, choose the number of spans, and switch between pixels and percentages. All without any span-x classes in your markup.

Your Markup

<section>
    <article>
        <p>I’m using Semantic Grid.</p>
    </article>
    <aside>
        <p>Good Good</p>
    </aside>
</section>

The Less

section {
    #semantic > .row();
}
article {
    #semantic > .span(8);
}
aside {
    #semantic > .span(4);
}

Prefix and Suffix

The .prefix() and .suffix() mixins allow you apply left and right indents to your columns.

// LESS
article {
   .prefix(2);
}

// Compiled CSS
article {
   margin-left: 170px;
}
// LESS
article {
   .suffix(2);
}

// Compiled CSS
article {
   margin-right: 170px;
}

How Use It?

First, you should download the latest version.

Then, you have to do is include the grid file: use CSS or LESS.

If you are using the CSS:

// CSS
<link rel="stylesheet" href="css/grid-full.css">

But if you are using the LESS:

You should import the mixins file

// import
@import "adaptGrid/mixins.less";

And link the grid

// LESS
<link rel="stylesheet/less" type="text/css" href="adaptGrid/grid.less">

Do this all, you can use the grid system in you site. Just like that introduced before.

Clone or fork via GitHub

Clone the entire project or fork your own version of Bootstrap to make it your own by visiting us on GitHub.

Cross Browser

It works well in Chrome, Safari, Firefox, IE9+.* It works without problems even on IE8. But IE7 and IE8 don't support CSS3 Media Queries (IE7 don't support box-sizing too), so it's necessary to use JavaScript to push them to work with it.