ChocolateChip-UI - Documentation

Docs

Everything You Need to Know

Layouts

Grids

ChocolateChip-UI provides a grid system that you can use for you app layouts. This is based on CSS flexbox.

.grid & .col

You build grids using two classes: grid and col. The grid class create a row. Inside of this you put tags with a class of col. You indicate how much a column should take up in relation to other columns by giving it another class. This class begins with flex- followed by a numerical value to index its CSS flex value. You can use a value from 1 to 10:

// Define some grids:
<div class='grid'>
  <div class='col flex-1'>1</div>
  <div class='col flex-1'>1</div>
  <div class='col flex-1'>1</div>
</div>

Giving all columns the same flex value, in this case, flex-1, means that they all get an equal amount of the available space:

Live Example

See the Pen Grids 1 by Robert Biggs (@rbiggs) on CodePen.

By increasing the flex value of a column, we increase its width relative to the other columns:

// Define some grids:
<div class='grid'>
  <div class='col flex-1'>1</div>
  <div class='col flex-2'>2</div>
  <div class='col flex-3'>3</div>
</div>

Live Example

See the Pen Grids 2 by Robert Biggs (@rbiggs) on CodePen.

Equal Height Columns

You don't have to worry about the column heights not matching in a grid. They will always be equal height, regardless of thee content:

See the Pen Grids 6 by Robert Biggs (@rbiggs) on CodePen.

Column Gutters

All the above examples have the columns up against each other. You can put gutters between your columns with the gutter-5 and gutter-10 classes on the grid container:

// Grid with 5px gutter between columns:
<div class='grid gutter-5'>
  <div class='col flex-1'></div>
  <div class='col flex-2'></div>
  <div class='col flex-1'></div>
</div>

Live Example

See the Pen Grids 3 by Robert Biggs (@rbiggs) on CodePen.

Gradated Column Widths

You can use a particular column value, say 10, as the base for defining column flex values. This allows to create some interesting layout patters:

Columns Basd on 10

See the Pen Grids 4 by Robert Biggs (@rbiggs) on CodePen.

Columns Basd on 6

See the Pen Grids 7-gutterless by Robert Biggs (@rbiggs) on CodePen.

Flex Wrap

You can make a grid wrap when the content doesn't fit the available screen width. This is useful when the device is rotated from landscape to portrait. To do so, just add the class wrap to the grid container:

See the Pen Grids 5 by Robert Biggs (@rbiggs) on CodePen.

Responsie Grids

By default, the widths of columns are responsive. However, an narrow mobile devices in portrait mode it may be difficult to display columns effectively. You can tell your grid to automatically collapse to a collection of stacked elemets when the screen is too narrow. You do that by putting the class responsive on the grid:

// Responsive grid.
// Notice the class "responsive" on this grid:
<div class='grid gutter-5 responsive'>
  <div class='col flex-1'></div>
  <div class='col flex-2'></div>
  <div class='col flex-1'></div>
</div>

Centered Grids

You can center the columns in a grid using the class center on the grid container:

See the Pen Grids 8 by Robert Biggs (@rbiggs) on CodePen.

Fixed Width Columns

When using grids, sometimes you may want on column to have a constant fixed width. You can do that by difining a width for it with a class, or an inline style on it:

See the Pen Grids 9 by Robert Biggs (@rbiggs) on CodePen.