Utility spacers

Manipulate your spacing the easy way

Add padding and margin with these default classes. See utility.scss for more utility classes.

Padding p{side} {-breakpoint} {-size}

Add padding with the class p. This is adjustable per element and breakpoint.

The padding uses the $padding-default which is set to 12px by default.

The standard padding of CastleCSS is 12px;

It's also possible to give an element 2 or 3 times the default padding like this. Example: p-2x (padding: 24px;) p-3x (padding: 24px;)

Options

Default padding

Add uniform padding to an element with the class p. The value of p is $padding-default

top, bottom, left ór right padding.

Place the padding on the top, right, bottom or left only with respectively; pt,pr, pb en pl.
Combine this with 2x and 3x for bigger paddings. Example: pl-b2-3x (padding-left breakpoint $2+: 36px)

You can also combine this with classes for 2x and 3x. Example: pl-b2-3x (padding-left breakpoint $2+: 36px)

No padding

Turn off padding for a breakpoint by using the class p-0 or p-{breakpoint}-0. Example: p-b2-0 (no padding $b2+) or pt-b3-0 (no padding-top breakpoint $b3+).



Class Value
p padding: $padding-default
pl padding-left: $padding-default
pt padding-top: $padding-default
pr padding-right: $padding-default
pb padding-bottom: $padding-default
p-2x padding: $padding-default*2
p{side}-2x padding-{side}: $padding-default*2
p{side}-{breakpoint}-2x padding-{side}: $padding-default*2 ( {breakpoint}+ )
p-3x padding: $padding-default*3
p{side}-3x padding-{side}: $padding-default*3
p{side}-{breakpoint}-3x padding-{side}: $padding-default*3 ( {breakpoint}+ )

Margin m{side} {-breakpoint} {-size}

Add margin with the class m. This is adjustable per element and breakpoint.

The margin uses the $margin-default which is set to 12px by default.

The standard margin of CastleCSS is 12px;

It's also possible to give an element 2 or 3 times the default margin like this. Example: m-2x (margin: 24px;) m-3x (margin: 24px;)

Options

Default margin

Add uniform margin to an element with the class m. The value of m is $margin-default

top, bottom, left ór right margin.

Place the margin on the top, right, bottom or left only with respectively; mt,mr, mb en ml.
Combine this with 2x and 3x for bigger margins. Example: ml-b2-3x (margin-left breakpoint $2+: 36px)

You can also combine this with classes for 2x and 3x. Example: ml-b2-3x (margin-left breakpoint $2+: 36px)

No margin

Turn off margin for a breakpoint by using the class m-0 or m-{breakpoint}-0. Example: m-b2-0 (no margin $b2+) or mt-b3-0 (no margin-top breakpoint $b3+).

Class Value
m margin: $margin-default
ml margin-left: $margin-default
mt margin-top: $margin-default
mr margin-right: $margin-default
mb margin-bottom: $margin-default
m-2x margin: $margin-default*2
m{side}-2x margin-{side}: $margin-default*2
m{side}-{breakpoint}-2x margin-{side}: $margin-default*2 ( {breakpoint}+ )
m-3x margin: $margin-default*3
m{side}-3x margin-{side}: $margin-default*3
m{side}-{breakpoint}-3x margin-{side}: $margin-default*3 ( {breakpoint}+ )


Examples

I have $margin-default all around and margin-bottom 3x from breakpoint 4 and up. I also have $padding-default.
					
I have $padding-default*2 all around and padding-top 3x from breakpoint 4 and up.