Spacing

Cocobits uses a base-8 scale as eight can be easily divided or multiplied to create a spatial system that offers flexibility and consistency across blocks, elements and content.

Syntax Definition


Syntax Definition
m margin
p padding
x right and left
y top and bottom
t top
r right
b bottom
l left

Scale Size

Scale Size
0 0px
1 4px
2 8px
3 16px
4 24px
5 32px
6 40px

Margin


Class value Breakpoint Scale Margin size
mx-{breakpoint}-auto sm, md, lg, xl - margin-right: auto
margin-left: auto
m-{breakpoint}-{scale} sm, md, lg, xl 0-6 margin: size
mt-{breakpoint}-{scale} sm, md, lg, xl 0-6 margin-top: size
mr-{breakpoint}-{scale} sm, md, lg, xl 0-6 margin-right: size
mb-{breakpoint}-{scale} sm, md, lg, xl 0-6 margin-bottom: size
ml-{breakpoint}-{scale} sm, md, lg, xl 0-6 margin-left: size
mx-{breakpoint}-{scale} sm, md, lg, xl 0-6 margin-right: size
margin-left: size
my-{breakpoint}-{scale} sm, md, lg, xl 0-6 margin-top: size
margin-bottom: size
m-sm-4
mt-sm-4
mb-sm-4
<div class="m-sm-4">...</div>

Negative Margin

Sets negative margin spaces.

Class value Breakpoint Scale Margin size
mt-{breakpoint}-n{scale} sm, md, lg, xl 1-6 margin-top: -size
mr-{breakpoint}-n{scale} sm, md, lg, xl 1-6 margin-right: -size
mb-{breakpoint}-n{scale} sm, md, lg, xl 1-6 margin-bottom: -size
ml-{breakpoint}-n{scale} sm, md, lg, xl 1-6 margin-left: -size
mb-sm-n3
mt-sm-n3
mb-sm-3
mr-sm-n3
<div class="mb-sm-n3">...</div>

Fixed Margin

Class value Scale Margin size
mx-auto - margin-right: auto
margin-left: auto
m-{scale} 0-6 margin: size
mt-{scale} 0-6 margin-top: size
mr-{scale} 0-6 margin-right: size
mb-{scale} 0-6 margin-bottom: size
ml-{scale} 0-6 margin-left: size
mx-{scale} 0-6 margin-right: size
margin-left: size
my-{scale} 0-6 margin-top: size
margin-bottom: size
mt-n{scale} 1-6 margin-top: -size
mr-n{scale} 1-6 margin-right: -size
mb-n{scale} 1-6 margin-bottom: -size
ml-n{scale} 1-6 margin-left: -size

Padding


Class value Breakpoint Scale Padding size
px-{breakpoint}-auto sm, md, lg, xl - padding-right: auto
padding-left: auto
p-{breakpoint}-{scale} sm, md, lg, xl 0-6 padding: size
pt-{breakpoint}-{scale} sm, md, lg, xl 0-6 padding-top: size
pr-{breakpoint}-{scale} sm, md, lg, xl 0-6 padding-right: size
pb-{breakpoint}-{scale} sm, md, lg, xl 0-6 padding-bottom: size
pl-{breakpoint}-{scale} sm, md, lg, xl 0-6 padding-left: size
px-{breakpoint}-{scale} sm, md, lg, xl 0-6 padding-right: size
padding-left: size
py-{breakpoint}-{scale} sm, md, lg, xl 0-6 padding-top: size
padding-bottom: size
p-sm-4
pt-sm-4
px-sm-4
py-sm-4
<div class="p-sm-4">...</div>

Fixed Padding

Class value Scale Padding size
px-auto - padding-right: auto
padding-left: auto
p-{scale} 0-6 padding: size
pt-{scale} 0-6 padding-top: size
pr-{scale} 0-6 padding-right: size
pb-{scale} 0-6 padding-bottom: size
pl-{scale} 0-6 padding-left: size
px-{scale} 0-6 padding-right: size
padding-left: size
py-{scale} 0-6 padding-top: size
padding-bottom: size
In this section