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 |