Spacings
Blueberry includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
Notation
The classes are named using the format
{property}{sides}-{size}
for xs
and
{property}{sides}-{breakpoint}-{size}
for sm
,
md
,
lg
, and
xl
.
Where property is:
-
space
- for class that setpadding-top
andpadding-bottom
Where sides is:
-
space-top
- for class that setpadding-top
-
space-bottom
- for class that setpadding-bottom
-
blank - for classes that set a
padding
on top and bottom sides of the element
Where size is one of:
-
0
- for classes that eliminate thepadding-top
andpadding-bottom
by setting it to0
-
1
- (by default) for classes that set thepadding-top
andpadding-bottom
to$content-space * 2
-
2
- (by default) for classes that set thepadding-top
andpadding-bottom
to$content-space * 4
-
3
- (by default) for classes that set thepadding-top
andpadding-bottom
to$content-space * 8
-
4
- (by default) for classes that set thepadding-top
andpadding-bottom
to$content-space * 12.5
-
5
- (by default) for classes that set thepadding-top
andpadding-bottom
to$content-space * 15