blob: 99035730f4e8e2f387abfedf906322b39e83b5ad (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
# Layout
Mechanisms of creating layouts.
## Basic Grid
Applying the <dfn>`.basicgrid`</dfn> class to an element creates a grid with a
minimum column width of 15ch.
You can use the following classes to adjust the minimum width for columns or
manually set the <dfn>`--column-width`</dfn> variable.
| Class | Column width |
|-------------------------|-------------------------------------------|
| <dfn>`colwidth-s`</dfn> | `--column-width` = 15ch (same as default) |
| <dfn>`colwidth-m`</dfn> | `--column-width` = 24ch |
| <dfn>`colwidth-l`</dfn> | `--column-width` = 35ch |
If you want an element to take up multiple columns, use the `col-*` classes:
* <dfn>`.col-2`</dfn>
* <dfn>`.col-3`</dfn>
* <dfn>`.col-4`</dfn>
* <dfn>`.col-5`</dfn>
* <dfn>`.col-6`</dfn>
* <dfn>`.col-7`</dfn>
* <dfn>`.col-8`</dfn>
* <dfn>`.col-9`</dfn>
* <dfn>`.col-10`</dfn>
* <dfn>`.col-11`</dfn>
* <dfn>`.col-12`</dfn>
## Full Bleed
Add the <dfn>`.full-bleed`</dfn> class to make an element go outside its
container and span the whole width of the viewport.
|
