When using this, the direction parameter will not have any effect ## Classes
When you're happy with your custom grid system, Gridle will provide you with multiple types of classes. Here's the list:
### Container
The container class is not really needed but it's a best practice to wrap all your rows into it so you can define a max-width for your entire grid at once like so
```fn
.container
```
```markup
```
```scss
// somewhere in your scss
.container {
max-width: 960px;
margin: 0 auto;
}
```
### Row
The row class is the one that will wrap all your grid columns.
```fn
.row
.row@{state}
// flex driver
.col
.col@{state}
```
```markup
```
### Row align
Gridle allows you to align your grid elements into a row by setting the alignement class on the row itself like this.
```fn
.row-align-left
.row-align-left@{state}
.row-align-center
.row-align-center@{state}
.row-align-middle
.row-align-middle@{state}
.row-align-top
.row-align-top@{state}
.row-align-middle
.row-align-middle@{state}
.row-align-bottom
.row-align-bottom@{state}
// flex driver
.row-align-around
.row-align-around@{state}
.row-align-between
.row-align-between@{state}
```
```markup
I'm the tallest element in the line
cause of this line
and this one...
and this one...
I will be vertically centered cause I'm the smallest
I will be also vertically centered cause I'm not so tall...
Even with this line...
```
These classes apply a **font-size of 0** on the parent itself and a **font-size of 1rem** on the direct childs. This is to avoid the display:inline-block space thing... You have to set your font on the html tag for this to work fine...
### Row full
This class allows you to make a particular row take the entire screen width without having to close all your container and row elements
```fn
.row-full
.row-full@{state}
```
```markup
```
### Row reverse (flex driver)
This class allows you to reverse the order of your grid items. This work for the **flex driver**
```fn
.row-reverse
.row-reverse@{state}
```
```markup
I will be displayed as the last item
I will be displayed as the second item
I will be displayed as the first item
```
### Grid
These are your actual grid columns.
```fn
.gr-{columns-count}
.gr-{columns-count}@{state}
```
```markup
I make 8 columns width
I make 4 columns width
```
### Grid adapt / grow
This class allows you to tell a grid column to adapt his width **depending on his content**
```fn
.gr-adapt
.gr-adapt@{state}
.gr-grow
.gr-grow@{state}
```
```markup
I will grow to take all the remaining space
I have the gr-table class to fix display issue
I will grow to take all the remaining space
```
> Note the **nowrap** class on the row that tell the grid to not allow for content to go on a new line and the **wrap@mobile** class that allow the content have line break as wanted
### Grid centered
This class **has to be applied on a gr-x** element and will center the column.
```fn
.gr-centered
.gr-centered@{state}
```
```markup
This column will be centered
This column will be centered only on tablet
```
### Grid order (flex driver)
These classes will allows you to reorder your grid items. If you have setup your grid with 12 columns, you will have 12 classes like gr-order-1, gr-order-2, ..., gr-order-12.
```fn
.order-{columns-count}
.order-{columns-count}@{state}
.order-first
.order-first@{state}
.order-last
.order-last@{state}
```
```markup
I will be the last displayed
I will be the first displayed
I will be the second displayed
```
### Push & Pull
The push and pull classes are used to offset the grid's elements or even swap two of them for SEO purposes. The HTML structure will not be altered.
```fn
.push-{columns-count}
.push-{columns-count}@{state}
.pull-{columns-count}
.pull-{columns-count}@{state}
```
```markup
I make 8 columns width and offset 4 columns to the right
I make 4 columns width and offset 8 columns to the left
```
### Prefix & Suffix
The prefix and suffix classes are used to create blanks before or after a grid element.
```fn
.prefix-{columns-count}
.prefix-{columns-count}@{state}
.suffix-{columns-count}
.suffix-{columns-count}@{state}
```
```markup
I make 8 columns width and I have 2 columns of dead space to my right
I make 4 columns width and I have 2 columns of dead space to my left
```
### Wrap / nowrap
This classes are useful to specify on a wrapper that the direct children can or cannot wrap themselves
```fn
.wrap
.wrap@{state}
.nowrap
.nowrap@{state}
```
```markup
```
### Clear Each (default driver)
This mixin will make all the {x}n+1 direct child clear itself automatically.
```fn
.clear-each-{x}
.clear-each-{x}@{state}
```
```markup
I'm a content
I'm a content
I'm a content
I'm a content
```
In order to have these classes, you need to register them before like so :
```fn
@include gridle_register_clear_each( {clearEach} , {clearWhat} : both );
```
```scss
// in your _settings.scss file
@include gridle_register_clear_each(2, both);
@include gridle_register_clear_each(3, left);
```
### Hide, show, ...
These classes are used to hide, show or set to “visibility" to some elements for certain states (cf. States)
```fn
.hide
.show
.show-inline
.not-visible
.visible
.hide@{state}
.show@{state}
.show-inline@{state}
.not-visible@{state}
.visible@{state}
```
```markup
I'm not display (display:none) on "tablet" state
I'm not visible (visibility:hidden) on "mobile" state
I'm hided by default but displayed on mobile
```
### Float
These classes are used to make float some elements for certain states (cf. States)
```fn
.float-left
.float-right
.float-left@{state}
.float-right@{state}
```
```markup
I'm a div that float right normally, but left on mobile
```
### Clear
These classes are used to clear float on some elements for certain states (cf. States)
```fn
.clear
.clear-left
.clear-right
.clear@{state}
.clear-left@{state}
.clear-right@{state}
```
```markup
I'm a div that clear right normally, but left on mobile
```
### Gutters
These classes are used to delete the gutters on certain columns for certain states (cf. States)
```fn
.no-gutter
.no-gutter-left
.no-gutter-right
.no-gutter-top
.no-gutter-bottom
.no-gutter@{state}
.no-gutter-left@{state}
.no-gutter-right@{state}
.no-gutter-top@{state}
.no-gutter-bottom@{state}
.gutter
.gutter-left
.gutter-right
.gutter-top
.gutter-bottom
.gutter@{state}
.gutter-left@{state}
.gutter-right@{state}
.gutter-top@{state}
.gutter-bottom@{state}
```
```markup
```
### Row debug
The debug-row class allows you to display the columns as an overlay.
```fn
.row-debug
.row-debug@{state}
```
```markup
...
```
### Direction
Gridle support direction by passing it in the setup mixin. You can also use the dir="rtl|ltr" html attribute to set the direction only for a part of the template.
```markup
```
> Some of the gridle features like **push, pull, prefix, suffix and row-full need that the dir-attribute setting is set to true** in the setup mixin in order to work properly. If you don't use one of these features, you can let the setting to false, witch is his default value.
### Custom classes
Gridle allows you to generate your own classes available in all the registered states. You can do this like so :
```fn
@include gridle_generate_custom_class( {pattern} , {states} );
```
```scss
// generate a custom class for all the states
@include gridle_generate_custom_class( ('txt','-','align','-','center','@','%state') ) {
text-align: center;
content : "#{gridle_get_current_state_name()}";
}
```
This will generate all these classes for you if your registered states are mobile and tablet :
```
.txt-align-center
.txt-align-center@mobile
.txt-align-center@tablet
```