designs
designs copied to clipboard
stacks-archive
uikit spacing design rules
The following is a detailed overview of all spacing rules and values for blockstack uikit.
General rule overview
The classes are named using the format: {property}{sides}-{size}
Property:
m - for classes that set margin
p - for classes that set padding
Sides:
t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
a - for classes that set a margin or padding on all 4 sides of the element
Size:
0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer-x or $spacer-y
2 - (by default) for classes that set the margin or padding to $spacer-x * 1.5 or $spacer-y * 1.5
3 - (by default) for classes that set the margin or padding to $spacer-x * 3 or $spacer-y * 3
Bits
- [ ] Typography
- [ ] Body copy
<body> - [ ] Paragraphs
<p> - [ ] Headings
h1, h2, h3, h4, h5, h6
- [ ] Body copy
Components
Sections
Templates
Headings
Tags:
- [ ]
margin: - ; - [ ]
padding: - ;
h1, h2, h3, h4, h5, h6 {
font-family: 'ProximaNova-Regular', sans-serif;
font-weight: normal;
font-style: normal;
}
Classes: Heading classes add customization
- [ ]
margin: - ; - [ ]
padding: - ;
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: 'ProximaNova-Regular', sans-serif;
font-weight: normal;
font-style: normal;
}