Breakpoints & Grid

Easy to use flexbox grid, using the CastleCSS breakpoint system.

The basics

CastleCSS has a completely fluid and nestable flexbox grid, with 12 to 24 columns, depending on the breakpoint you are viewing. The column widths are predefined as fixed percentages and the gutter widths are variables that can be influenced per breakpoint.

To start a new grid in html you first create an element with the g class (which stands for grid).
Only the direct children of this element will function as grid items.

This is how you set the item width per breakpoint: b{breakpoint}_{columnwidth}

For example: This item div class="b0_12 b3_18" is 12 columns wide from breakpoint 0 and up, and 18 columns wide from breakpoint 3 and up.

By default a grid is fluid, but wrapping the g in an element with the class container enables a fixed width per breakpoint.

Breakpoints

Castlecss uses six breakpoints, which are derived from average device resolutions, by default. Up untill breakpoint 3 the grid has 12 columns, but from breakpoint 3 and up it uses 24 columns for extra flexibility.

Per breakpoint it's possible to:

  • Change the breakpoints themselves
  • Set gutter spacing from said breakpoint and up
  • Set the container width

Make these changes in you own variable file if you want to continue receiving CastleCSS updates.

Breakpoint Viewport width Device Class Gutter Container width
$b0 0 + b0_01 t/m 12 12px 100%
$b1 320px + b1_01 t/m 12 12px 100%
$b2 480px + b2_01 t/m 12 12px 100%
$b3 768px + b3_01 t/m 24 12px 768px
$b4 1024px + b4_01 t/m 24 12px 1024px
$b5 1280px + b5_01 t/m 24 12px 1280px
$b6 1600px + b6_01 t/m 24 12px 1400px

Basic grid examples

b0_12
b0_06 b3_12
b0_06 b3_12
b0_06 b3_06
b0_06 b3_18
b0_12 b3_06
b0_12 b3_06
b0_12 b3_06
b0_12 b3_06
b0_12 b3_03
b0_12 b3_03
b0_12 b3_03
b0_12 b3_03
b0_12 b3_06
b0_12 b3_06
auto
					
auto

5 or 7 in a row (breakpoint 3 and up)

b3_x5
b3_x5
b3_x5
b3_x5
b3_x5
b3_x7
b3_x7
b3_x7
b3_x7
b3_x7
b3_x7
b3_x7

Even though 5 and 7 aren't sharable through a grid of 12 or 24, you might still want to be able to do this. That's why you can use the classes x5 en x7 on a grid item (breakpoint 3+)

					

Nested grids

Nesting is easy. Just place a g inside a grid item.

Note: the only thing that's not possible is a g as a direct child of a g

Example of nested

group 1/1

group 1/2

1/2
1/2

group 1/2

1/2
1/2
					

Order

You can switch up the order of the items by giving is a class order-{order}.

Class Value
order-[0-12] order: 0-12;

Gutters

The gutter is adjustable per breakpoint. For example; you can set a default gutter of 12px wide and a gutter of 30px wide at breakpoint 3. You can also use gutter-large or gutter-small if you want to use multiple gutter widths.

Default: padding-left: $grid-gutter

Breakpoint Extra class Gutter CastleCSS Default
$b0   $grid-gutter 12px
$b1   $grid-gutter-b1 12px
$b2   $grid-gutter-b2 12px
$b3   $grid-gutter-b3 12px
$b4   $grid-gutter-b4 12px
$b5   $grid-gutter-b5 12px
$b6   $grid-gutter-b6 12px
all gutter-small $grid-gutter/2 6px
all gutter-large $grid-gutter*2 24px
all gutter-none 0 0

Gutter examples

Default gutter
 
 
							
Large gutter
 
 
							
Small gutter
 
 
							
No gutter
 
 
							

Direction and alignment

Flex direction

With the class dir-{direction} placed on a g you can adjust the main-axis, thus defining the direction flex items are placed in the flex container.

This affects justify-content, align-items and align-self.

Default: flex-direction: row;

Class Value
dir-row flex-direction: row;
dir-row-reverse flex-direction: row-reverse;
dir-column flex-direction: column;
dir-column-reverse flex-direction: column-reverse;

Examples

1
2
3
4
5
						
1
2
3
4
5
						

Justify content

With the jc- class as addition for g it's possible to align items on the primaire axis.

Class Value
jc-flex-start justify-content: flex-start;
jc-flex-end justify-content: flex-end;
jc-center justify-content: center;
jc-space-around justify-content: space-around;
jc-space-between justify-content: space-between;
1
2
3
4
5
						

Auto fill grid

It's possible to let the grid figure out the widths for itself. When you don't know what the width will be but you want the grid to fill out the auto class is a nice addition to the grid (g).

Example
Grid item
Grid item
Grid item
Grid item
Grid item
Long grid item
Grid item
Grid item
Long grid item
A most super duper long, longer, longest grid item
Grid item
Grid item
Grid item
Grid item
						

Flex wrap

Add the class wrap or nowrap to a g element to overwrite flex wrapping.

Default: flex-direction: wrap;

Class Value
wrap flex-wrap: wrap;
nowrap flex-wrap: nowrap;
Example with wrapping
1/2
1/2
1/2
1/2
1/2
						
I should be 1/2
I should be 1/2
I should be 1/2
I should be 1/2
I should be 1/2
Example without wrapping
I should be 1/2
I should be 1/2
I should be 1/2
I should be 1/2
I should be 1/2
						
* When you use nowrap in IE10 the grid items won't stay withing the container. We don't recommend using this option if you need to support IE10.

Align self

With the as- class addition to the gi class you can align grid items vertically to the secondary axis of the grid.

Class Value
as-flex-start align-self: flex-start;
as-flex-end align-self: flex-end;
as-center align-self: center;
as-space-around align-self: space-around;
as-space-between align-self: space-between;
Example
1
 
2
 
 
4
 
5
 
						

Grid pushing

You can "push" grid-items across the grid with push classes: {breakpoint}-push- classes.

Example: b3_push_01 (push 1 column from breakpoint 3 and up.

b{breakpoint}-push[1-12] Push column 1-12
b{breakpoint}-push[1-24] Push column 1-24 breakpoint 3+

Push examples

 
b0_push_03
 
					
b3_push_12