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.
Built-on CSS3 and HTML5 semantics to allow you to start captializing on a next generation standard.
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
Everything is now semantic. Now you can have the cleanest markup without sacrificing the utility and speed of AdaptGrid.
Now you can build for small devices first. Then, as devices get larger and larger, layer in more complexity.
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.
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.
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).
<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>
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.
<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 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.
<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>
<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>
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
.
<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 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-
.
<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 use fraction phrase to define the column width instead of number. It's easier to read and understand.
<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
.
<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>
You can add table-
and mobile-
prefix to make them adapt different viewports.
<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.
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.
<section>
<article>
<p>I’m using Semantic Grid.</p>
</article>
<aside>
<p>Good Good</p>
</aside>
</section>
section {
#semantic > .row();
}
article {
#semantic > .span(8);
}
aside {
#semantic > .span(4);
}
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;
}
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 the entire project or fork your own version of Bootstrap to make it your own by visiting us on GitHub.
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.