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 your own variable file if you want to continue receiving CastleCSS updates.

Breakpoint	Viewport width	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_06

b0_06 b3_18

b0_12 b3_06

b0_12 b3_03

b0_12 b3_06

auto

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

b3_x5

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

group 1/2

1/2

Order

You can switch the order of items by applying the 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

Long grid item

Grid item

Long grid item

A most super duper long, longer, longest 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

						
							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

* 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