Load up grid.css or grid.min.css
Afterwards you can add your own custom css files.
Then add a <div> box and add class "row". Now add, within the row you created, another <div> with a class like "col-12" (see Column Classes below). What we've just done is; (1) Create a box for our columns to be placed in. (2) Created a column that uses the full width of the row.
There are a few rules you need to stick to in order to make this work, don't worry though, it's pretty simple
As explained above, you always start by creating a row and within that you add your columns. To add columns you simply add "col-var" where var is a number between 1 and 12. If you create a column with a var lower than 12, make sure to create another column next to it, to get the right width you need to make sure that the var of both columns together are a sum of 12. Let's turn that into a piece of code shall we?
This will output the following :
If you want to place more than just two columns next to each other, just add another <div class="col-var"> </div>.
The result:
To make the columns & rows look better on desktop computers, there is also a wrapper included in the source code. To add it just place the columns and rows within <div class="wrapper"> </div>. This will set the max-width of the rows and columns to 1200px, this can easily be changed to fit your needs.
There are 12 types of columns. These are all very much alike, but just so you get to know all options they're displayed below.
| Class | Width (%) |
|---|---|
| .col-1 | 8⅓ % |
| .col-2 | 16⅔ % |
| .col-3 | 25% |
| .col-4 | 33⅓ % |
| .col-5 | 41⅔ % |
| .col-6 | 50% |
| Class | Width (%) |
|---|---|
| .col-7 | 58⅓ % |
| .col-8 | 66⅔ % |
| .col-9 | 75% |
| .col-10 | 83⅓ % |
| .col-11 | 91⅔ % |
| .col-12 | 100% |
There are 5 classes that add some functionality to your columns or wrappers. These take care of styling, but are mainly for the more obvious parts in your website.
| Class | Function | Description |
|---|---|---|
| .blank-col | Height Styling | Adds a 150px high empty space. Useful to see what something looks like before adding text. |
| .sticky | Sticky Header | Sticks a column to the top, useful for headers, like the one used on this page. |
| .no-back | Background Coloring | 'removes' the background of a wrapper, making it look better. Useful in combination with .hidden-col. |
| .hidden-col | Column Alignment | Makes a column invisible, useful to align other columns in the same row to a certain side. |
| .no-mobile | Cross-device reaction | Hides the column if the width of the screen <= 500px. Use in combination with the viewport tag! |
There are 14 classes that add basic styling to your columns or wrappers. These mainly take care of easy styling, but are mainly to give you some ideas on what is possible.
| Class | Function | Description |
|---|---|---|
| .warn | Column Color Styling | Changes the background of a column to #FFDB4D (yellow) |
| .note | Column Color Styling | Changes the background of a column to #5CADFF (blue) |
| .error | Column Color Styling | Changes the background of a column to #FF5353 (red) |
| .correct | Column Color Styling | Changes the background of a column to #33D685 (green) |
| .rounded | Column Border Decoration | Rounds all corners of a column 100px |
| .top-r | Column Border Decoration | Rounds the top right corner of a column 100px |
| .top-l | Column Border Decoration | Rounds the top left corner of a column 100px |
| .bottom-r | Column Border Decoration | Rounds the bottom right corner of a column 100px |
| .bottom-l | Column Border Decoration | Rounds the bottom left corner of a column 100px |
| .rad-r | Column Border Decoration | Rounds the right corners of a column 100px |
| .rad-l | Column Border Decoration | Rounds the left corners of a column 100px |
| .text-left | Text Alignment | Aligns text within a wrapper, row or column to the left |
| .text-right | Text Alignment | Aligns text within a wrapper, row or column to the right |
| .center | Text Alignment | Centers text within a wrapper, row or column |
© 2015 Guus Lieben - Lentus