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).
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.
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.
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.
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-.
Phrase Grid use fraction phrase to define the column width instead of number. It's easier to read and understand.
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.
You can add table- and mobile- prefix to make them adapt different viewports.
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.