123 lines
5.3 KiB
Markdown
Executable File
123 lines
5.3 KiB
Markdown
Executable File
# Just a simple grid
|
|
|
|
Based on existing grid systems, such as [Twitter Bootstrap Grid System](http://getbootstrap.com/css/#grid) and [csswizardry-grids](http://csswizardry.com/csswizardry-grids/), this is a fluid, flexible and responsive grid that can be scaled up to an arbitrary size, within the `$max-width` of your main `.container`. You also can easily and infinitly nest columns and rows, so you can build out complicated layouts without creating a lot of new custom elements. This is a grid system generated by Sass and it is based on [BEM syntax](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/).
|
|
|
|
## Setup
|
|
|
|
The only thing you need to do to start building your grid is to adjust the number of `$grid-columns`, the desired `$gutter` and the main container `$max-width`.
|
|
|
|
## How it works
|
|
|
|
Grid systems, as you may know, are used for creating page layouts through a series of rows and columns that will host your content:
|
|
|
|
* Your `.row` element(s) must be placed within a `.container`, with a fixed `$max-width` for proper alignment. This elements will split up your page horizontally and will contain groups of `.col`.
|
|
* Your content should be placed within the `.col` blocks, and only `.col` may be immediate children of `.row`.
|
|
* You can nest `.row` and `.col` how many times you need, since you follow the previous standard.
|
|
* Your `.col` width is defined by specifying the number of a single grid columns, in your total `$grid-columns`. For example, a `.col--*-4` will represent a width of 4 columns in your `$grid-columns` total.
|
|
* To control your responsive grid, there are available three class prefixes: `.col--sm-*` for small devices, `.col-md-*` for medium devices and `.col--lg-*` for large devices. All together, in your `.col` element, it will make your grid respond to each one of your default media queries.
|
|
* Finaly, you have the option to move columns to the right using `.col--*-offset-*` classes. These classes increase the left margin of a column by the number of columns you want. For example, `.col--*-offset-4` will push `.col-*-4` over four columns.
|
|
|
|
|
|
## Markup
|
|
|
|
### Basic usage
|
|
Simple column set - `<div class="col col--xs-12 col--sm-12 col--md-12 col--lg-12"></div>` - inside a `.row`.
|
|
|
|
```html
|
|
<div class="row">
|
|
<div class="col col--xs-12 col--sm-12 col--md-12 col--lg-12">
|
|
<p>Col 1</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
|
<p>Col 2</p>
|
|
</div>
|
|
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
|
<p>Col 3</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
|
<p>Col 4</p>
|
|
</div>
|
|
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
|
<p>Col 5</p>
|
|
</div>
|
|
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
|
<p>Col 6</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col col--xs-12 col--sm-12 col--md-8 col--lg-8">
|
|
<p>Col 7</p>
|
|
</div>
|
|
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
|
<p>Col 8</p>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### Offsetting columns
|
|
Increase the left margin of a column by the number of columns you want, along with the responsive class prefixes, if you need.
|
|
|
|
```html
|
|
<div class="row">
|
|
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
|
<p>Col 9 with offset 0</p>
|
|
</div>
|
|
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4 col--xs-offset-4 col--sm-offset-0 col--md-offset-4 col--lg-offset-4">
|
|
<p>Col 10 with offset 4</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col col--xs-12 col--sm-12 col--md-3 col--lg-3 col--xs-offset-0 col--sm-offset-0 col--md-offset-3 col--lg-offset-3">
|
|
<p>Col 11 with offset 3</p>
|
|
</div>
|
|
<div class="col col--xs-12 col--sm-12 col--md-3 col--lg-3 col--xs-offset-0 col--sm-offset-0 col--md-offset-6 col--lg-offset-6">
|
|
<p>Col 12 with offset 6</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6 col--xs-offset-0 col--sm-offset-0 col--md-offset-3 col--lg-offset-3">
|
|
<p>Col 13 with offset 3</p>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### Nesting columns
|
|
To nest your content, add a new `.row` inside a `.col`, and set of `.col-ld-*` columns within an existing `.col-ld-*` column. Nested rows should include a set of columns that add up to 12 or less.
|
|
|
|
```html
|
|
<div class="row">
|
|
<div class="col col--xs-12 col--sm-12 col--md-12 col--lg-12">
|
|
<p>Col 14</p>
|
|
<div class="row">
|
|
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
|
<p>Nested col 14.1</p>
|
|
</div>
|
|
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
|
<p>Nested col 14.2</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### Gutterless columns
|
|
To remove all the gutters from your columns just add the class `.row--gutterless` to your `.row` element.
|
|
|
|
```html
|
|
<div class="row row--gutterless">
|
|
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
|
<p>Col 15</p>
|
|
</div>
|
|
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
|
<p>Col 16</p>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
## Demo
|
|
Check out the demo and play around on [Code Pen](http://codepen.io/pedroreis/pen/ituho) and/or check the compiled CSS on [SassMeister](http://sassmeister.com/gist/c6368fc9a239e1798fcd).
|