ChocolateChip-UI provides a convenient grid system based on CSS flexbox. This means your grid columns use flex to determine their widths. This gives you responsive layouts. Because the grids use flexbox, there are no floats involved, and no need to clear floats, etc. Also all columns are automatically equal height in the same grid.
To make a grid, just put the class grid on a div:
|
1
2
|
// Define a grid:<div class='grid'></div> |
This gives you a grid row. Inside this you can create grid columns with the class col.
|
1
2
3
4
5
6
|
// Define a grid with 3 columns:<div class='grid'> <div class='col'>1</div> <div class='col'>2</div> <div class='col'>3</div></div> |
By default all columns have a flex value of 1, so they will all have the same width. You can give columns a specific flex value using specific classes that ChocolateChip-UI uses. These are as follows:
|
1
2
3
4
5
6
7
8
9
10
|
<div class='flex-1'></div><div class='flex-2'></div><div class='flex-3'></div><div class='flex-4'></div><div class='flex-5'></div><div class='flex-6'></div><div class='flex-7'></div><div class='flex-8'></div><div class='flex-9'></div><div class='flex-10'></div> |
Live Example using “flex-1”
By giving columns various flex values you can create complex layouts for you app
Columns Based on Total Flex Value of 10
Equal Height Columns
As we mentioned, columns in the same grid row are always equal height.
Column Gutters
You can give your grid, both rows and columns, some preset gutters. To do so you can put one of two classes on the grid row: gutter-5 or gutter-10.
If you want some other gutter value, you can create your own class. Below is a possible class you could use:
.gutter-15 {
margin: 15px;
}
Then you can use your class on your grids like with our own gutter classes.
Centered Grids
You can center the columns to the grid row, creating space around them, using the center class:
Fixed Width Columns
By their nature, flex columns are dynamic. They flex to fill whatever space is available on screen. This is great for mobile devices, such as when the user changes the orientation of a mobile device from portrait to landscape. You can rest assure that you layout will work equally well in all situations. However, sometimes you may need to give a particular column a fixed width. You can do this by giving it a special class. On this class you will define the width you want, and you will also set its flex value to 0:
.fixedWidth {
-webkit-flex: none;
flex: none;
width: 250px;
}
Putting the above class on a column will force it to always have a width of 250 pixels. Any other columns in its grid row will use whatever space is left after that column is rendered. Below is an example of fixed columns:
Learning About Layout in ChocolateChip-UI
To learn more about layouts in ChocolateChip-UI, visit the following links: