Sizes
Fluid & Fixed sizes for consistent designs
Fluid Sizes
1
2
3
4
5
6
7
8
9
10
The props :
--o-size-fluid-1
--o-size-fluid-2
--o-size-fluid-3
--o-size-fluid-4
--o-size-fluid-5
--o-size-fluid-6
--o-size-fluid-7
--o-size-fluid-8
--o-size-fluid-9
--o-size-fluid-10
The classes :
o-size-1
o-size-2
o-size-3
o-size-4
o-size-5
o-size-6
o-size-7
o-size-8
o-size-9
o-size-10
Gap classes :
o-gap-1
o-gap-2
o-gap-3
o-gap-4
o-gap-5
o-gap-6
o-gap-7
o-gap-8
o-gap-9
o-gap-10
Padding classes :
o-pad-1
o-pad-2
o-pad-3
o-pad-4
o-pad-5
o-pad-6
o-pad-7
o-pad-8
o-pad-9
o-pad-10
Padding block :
o-pad-bl-1
o-pad-bl-2
o-pad-bl-3
o-pad-bl-4
o-pad-bl-5
o-pad-bl-6
o-pad-bl-7
o-pad-bl-8
o-pad-bl-9
o-pad-bl-10
Padding inline :
o-pad-in-1
o-pad-in-2
o-pad-in-3
o-pad-in-4
o-pad-in-5
o-pad-in-6
o-pad-in-7
o-pad-in-8
o-pad-in-9
o-pad-in-10
Padding top :
o-pad-t-1
o-pad-t-2
o-pad-t-3
o-pad-t-4
o-pad-t-5
o-pad-t-6
o-pad-t-7
o-pad-t-8
o-pad-t-9
o-pad-t-10
Padding right :
o-pad-r-1
o-pad-r-2
o-pad-r-3
o-pad-r-4
o-pad-r-5
o-pad-r-6
o-pad-r-7
o-pad-r-8
o-pad-r-9
o-pad-r-10
Padding bottom :
o-pad-b-1
o-pad-b-2
o-pad-b-3
o-pad-b-4
o-pad-b-5
o-pad-b-6
o-pad-b-7
o-pad-b-8
o-pad-b-9
o-pad-b-10
Padding left :
o-pad-l-1
o-pad-l-2
o-pad-l-3
o-pad-l-4
o-pad-l-5
o-pad-l-6
o-pad-l-7
o-pad-l-8
o-pad-l-9
o-pad-l-10
Margin classes :
o-mrg-1
o-mrg-2
o-mrg-3
o-mrg-4
o-mrg-5
o-pad-6
o-mrg-7
o-mrg-8
o-mrg-9
o-mrg-10
Margin block :
o-mrg-bl-1
o-mrg-bl-2
o-mrg-bl-3
o-mrg-bl-4
o-mrg-bl-5
o-mrg-bl-6
o-mrg-bl-7
o-mrg-bl-8
o-mrg-bl-9
o-mrg-bl-10
Margin inline :
o-mrg-in-1
o-mrg-in-2
o-mrg-in-3
o-mrg-in-4
o-mrg-in-5
o-mrg-in-6
o-mrg-in-7
o-mrg-in-8
o-mrg-in-9
o-mrg-in-10
Margin top :
o-pad-t-1
o-mrg-t-2
o-mrg-t-3
o-mrg-t-4
o-mrg-t-5
o-mrg-t-6
o-mrg-t-7
o-mrg-t-8
o-mrg-t-9
o-mrg-t-10
Margin right :
o-mrg-r-1
o-mrg-r-2
o-mrg-r-3
o-mrg-r-4
o-mrg-r-5
o-mrg-r-6
o-mrg-r-7
o-pad-r-8
o-mrg-r-9
o-mrg-r-10
Margin bottom :
o-mrg-b-1
o-mrg-b-2
o-mrg-b-3
o-mrg-b-4
o-pad-b-5
o-mrg-b-6
o-mrg-b-7
o-mrg-b-8
o-mrg-b-9
o-mrg-b-10
Margin left :
o-mrg-l-1
o-mrg-l-2
o-mrg-l-3
o-pad-l-4
o-mrg-l-5
o-mrg-l-6
o-mrg-l-7
o-mrg-l-8
o-mrg-l-9
o-mrg-l-10
Fixed Sizes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
The props :
--o-size-1
--o-size-2
--o-size-3
--o-size-4
--o-size-5
--o-size-6
--o-size-7
--o-size-8
--o-size-9
--o-size-10
The classes :
o-size-fixed-1
o-size-fixed-2
o-size-fixed-3
o-size-fixed-4
o-size-fixed-5
o-size-fixed-6
o-size-fixed-7
o-size-fixed-8
o-size-fixed-9
o-size-fixed-10
Gap classes :
o-gap-fixed-1
o-gap-fixed-2
o-gap-fixed-3
o-gap-fixed-4
o-gap-fixed-5
o-gap-fixed-6
o-gap-fixed-7
o-gap-fixed-8
o-gap-fixed-9
o-gap-fixed-10
Padding classes :
o-pad-fixed-1
o-pad-fixed-2
o-pad-fixed-3
o-pad-fixed-4
o-pad-fixed-5
o-pad-fixed-6
o-pad-fixed-7
o-pad-fixed-8
o-pad-fixed-9
o-pad-fixed-10
Padding block :
o-pad-bl-fixed-1
o-pad-bl-fixed-2
o-pad-bl-fixed-3
o-pad-bl-fixed-4
o-pad-bl-fixed-5
o-pad-bl-fixed-6
o-pad-bl-fixed-7
o-pad-bl-fixed-8
o-pad-bl-fixed-9
o-pad-bl-fixed-10
Padding inline :
o-pad-in-fixed-1
o-pad-in-fixed-2
o-pad-in-fixed-3
o-pad-in-fixed-4
o-pad-in-fixed-5
o-pad-in-fixed-6
o-pad-in-fixed-7
o-pad-in-fixed-8
o-pad-in-fixed-9
o-pad-in-fixed-10
Padding top :
o-pad-t-fixed-1
o-pad-t-fixed-2
o-pad-t-fixed-3
o-pad-t-fixed-4
o-pad-t-fixed-5
o-pad-t-fixed-6
o-pad-t-fixed-7
o-pad-t-fixed-8
o-pad-t-fixed-9
o-pad-t-fixed-10
Padding right :
o-pad-r-fixed-1
o-pad-r-fixed-2
o-pad-r-fixed-3
o-pad-r-fixed-4
o-pad-r-fixed-5
o-pad-r-fixed-6
o-pad-r-fixed-7
o-pad-r-fixed-8
o-pad-r-fixed-9
o-pad-r-fixed-10
Padding bottom :
o-pad-b-fixed-1
o-pad-b-fixed-2
o-pad-b-fixed-3
o-pad-b-fixed-4
o-pad-b-fixed-5
o-pad-b-fixed-6
o-pad-b-fixed-7
o-pad-b-fixed-8
o-pad-b-fixed-9
o-pad-b-fixed-10
Padding left :
o-pad-l-fixed-1
o-pad-l-fixed-2
o-pad-l-fixed-3
o-pad-l-fixed-4
o-pad-l-fixed-5
o-pad-l-fixed-6
o-pad-l-fixed-7
o-pad-l-fixed-8
o-pad-l-fixed-9
o-pad-l-fixed-10
Margin classes :
o-mrg-fixed-1
o-mrg-fixed-2
o-mrg-fixed-3
o-mrg-fixed-4
o-mrg-fixed-5
o-pad-fixed-6
o-mrg-fixed-7
o-mrg-fixed-8
o-mrg-fixed-9
o-mrg-fixed-10
Margin block :
o-mrg-bl-fixed-1
o-mrg-bl-fixed-2
o-mrg-bl-fixed-3
o-mrg-bl-fixed-4
o-mrg-bl-fixed-5
o-mrg-bl-fixed-6
o-mrg-bl-fixed-7
o-mrg-bl-fixed-8
o-mrg-bl-fixed-9
o-mrg-bl-fixed-10
Margin inline :
o-mrg-in-fixed-1
o-mrg-in-fixed-2
o-mrg-in-fixed-3
o-mrg-in-fixed-4
o-mrg-in-fixed-5
o-mrg-in-fixed-6
o-mrg-in-fixed-7
o-mrg-in-fixed-8
o-mrg-in-fixed-9
o-mrg-in-fixed-10
Margin top :
o-pad-t-fixed-1
o-mrg-t-fixed-2
o-mrg-t-fixed-3
o-mrg-t-fixed-4
o-mrg-t-fixed-5
o-mrg-t-fixed-6
o-mrg-t-fixed-7
o-mrg-t-fixed-8
o-mrg-t-fixed-9
o-mrg-t-fixed-10
Margin right :
o-mrg-r-fixed-1
o-mrg-r-fixed-2
o-mrg-r-fixed-3
o-mrg-r-fixed-4
o-mrg-r-fixed-5
o-mrg-r-fixed-6
o-mrg-r-fixed-7
o-pad-r-fixed-8
o-mrg-r-fixed-9
o-mrg-r-fixed-10
Margin bottom :
o-mrg-b-fixed-1
o-mrg-b-fixed-2
o-mrg-b-fixed-3
o-mrg-b-fixed-4
o-pad-b-fixed-5
o-mrg-b-fixed-6
o-mrg-b-fixed-7
o-mrg-b-fixed-8
o-mrg-b-fixed-9
o-mrg-b-fixed-10
Margin left :
o-mrg-l-fixed-1
o-mrg-l-fixed-2
o-mrg-l-fixed-3
o-pad-l-fixed-4
o-mrg-l-fixed-5
o-mrg-l-fixed-6
o-mrg-l-fixed-7
o-mrg-l-fixed-8
o-mrg-l-fixed-9
o-mrg-l-fixed-10
Reading Sizes
These sizes are optimized for reading comfort. They should be used to limit the width of text elements.
Please note that these sizes are relative to the font-size as they are specified in ch. ch stands for character height and is a css relative unit very handy when you need to define a dimension as a number of characters.
Content sizes
1 - 20ch
2 - 45ch
3 - 60ch
Full - 100%
The props :
--o-size-content-1
--o-size-content-2
--o-size-content-3
The classes :
o-content-1
o-content-2
o-content-3
o-content-full
Heading sizes
1 - 20ch
2 - 25ch
3 - 35ch
The props :
--o-size-header-1
--o-size-content-2
--o-size-header-3
The classes :
o-header-1
o-header-2
o-header-3