Tokens & classes
We have named our tokens after (BEM), similarly and our classes.
Grid
See also Token naming spreadsheet doc
- $grid.zeta
Our basic token that defines a 12 column grid
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}<Grid></Grid>ZetaGrid() - $grid.zeta.nogaps
Removes the gaps from any grid
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--no-gaps {
grid-column-gap: 0px;
grid-row-gap: 0px;
}<Grid noGap></Grid>ZetaGrid(noGaps:true, ) - $grid.zeta.2col
2 column grid symmetrical.
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--2col {
grid-template-columns: 1fr 1fr;
}
/* No gaps */
grid-zeta.grid-zeta--2col.grid-zeta--no-gaps { grid-column-gap: 0px; grid-row-gap: 0px;}<Grid columns={2}></Grid>ZetaGrid(col:2,) - $grid.zeta.2col.nogaps
2 column grid symmetrical, no gaps
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--2col {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--2col.grid-zeta--no-gaps {
grid-column-gap: 0px;
grid-row-gap: 0px;
}<Grid
columns={2}
noGap
>
</Grid>ZetaGrid(col:2,noGaps:true, ) - $grid.zeta.4col
4 column grid symmetrical.
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--4col {
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta.grid-zeta--4col:tiny {
grid-template-columns: 1fr 1fr;
}
/* No gaps */
grid-zeta.grid-zeta--4col.grid-zeta--no-gaps { grid-column-gap: 0px; grid-row-gap: 0px;}<Grid columns={4}></Grid>ZetaGrid(col:4,) - $grid.zeta.4col.nogaps
4 column grid symmetrical, no gaps
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--4col {
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta.grid-zeta--4col:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--4col.grid-zeta--no-gaps {
grid-column-gap: 0px;
grid-row-gap: 0px;
}<Grid
columns={4}
noGap
>
</Grid>ZetaGrid(col:4,noGaps:true, ) - $grid.zeta.8col
8 column grid symmetrical.
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--8col {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta.grid-zeta--8col:small {
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta.grid-zeta--8col:tiny {
grid-template-columns: 1fr 1fr;
}
/* No gaps */
grid-zeta.grid-zeta--8col.grid-zeta--no-gaps { grid-column-gap: 0px; grid-row-gap: 0px;}<Grid columns={8}></Grid>ZetaGrid(col:8,) - $grid.zeta.8col.nogaps
8 column grid symmetrical, no gaps
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--8col {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta.grid-zeta--8col:small {
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta.grid-zeta--8col:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--8col.grid-zeta--no-gaps {}<Grid
columns={8}
noGap
>
</Grid>ZetaGrid(col:8,noGaps:true, ) - $grid.zeta.16col
16 column grid symmetrical.
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--16col {
grid-column-gap: 16px;
grid-row-gap: 16px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta.grid-zeta--16col:xl {}.grid-zeta.grid-zeta--16col:small {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta.grid-zeta--16col:medium {
grid-column-gap: 16px;
grid-row-gap: 16px;
}.grid-zeta.grid-zeta--16col:large {
grid-column-gap: 24px;
grid-row-gap: 24px;
}.grid-zeta.grid-zeta--16col:tiny {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
/* No gaps */
grid-zeta.grid-zeta--16col.grid-zeta--no-gaps { grid-column-gap: 0px; grid-row-gap: 0px;}<Grid columns={16}></Grid>ZetaGrid(col:16,) - $grid.zeta.16col.nogaps
16 column grid symmetrical, no gaps
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--16col {
grid-column-gap: 16px;
grid-row-gap: 16px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta.grid-zeta--16col:small {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta.grid-zeta--16col:medium {
grid-column-gap: 16px;
grid-row-gap: 16px;
}.grid-zeta.grid-zeta--16col:large {
grid-column-gap: 24px;
grid-row-gap: 24px;
}.grid-zeta.grid-zeta--16col:tiny {
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta.grid-zeta--16col.grid-zeta--no-gaps {
grid-column-gap: 0px;
grid-row-gap: 0px;
}<Grid
columns={16}
noGap
>
</Grid>ZetaGrid(col:16,noGaps:true, ) - $grid.zeta.11to1
11 to 1 column grid a-symmetrical.
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--11to1 {
grid-template-columns: 11fr 1fr;
}
/* No gaps */
grid-zeta.grid-zeta--11to1.grid-zeta--no-gaps { grid-column-gap: 0px; grid-row-gap: 0px;}to be embeded<Grid columns="11fr 1fr"></Grid> - $grid.zeta.11to1.nogaps
11 to 1 column grid a-symmetrical, no gaps
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--11to1 {
grid-template-columns: 11fr 1fr;
}.grid-zeta.grid-zeta--11to1.grid-zeta--no-gaps {}<Grid
columns="11fr 1fr"
noGap
>
</Grid>ZetaGrid(noGaps:true, asymmetricWeight:11, ) - $grid.zeta.10to2
10 to 2 column grid a-symmetrical.
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--10to2 {
grid-template-columns: 10fr 2fr;
}
/* No gaps */
grid-zeta.grid-zeta--10to2.grid-zeta--no-gaps { grid-column-gap: 0px; grid-row-gap: 0px;}<Grid columns="10fr 2fr"></Grid>ZetaGrid(asymmetricWeight:10, ) - $grid.zeta.10to2.nogaps
10 to 2 column grid a-symmetrical, no gaps
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--10to2 {
grid-template-columns: 10fr 2fr;
}.grid-zeta.grid-zeta--10to2.grid-zeta--no-gaps {}<Grid
columns="10fr 2fr"
noGap
>
</Grid>ZetaGrid(noGaps:true, asymmetricWeight:10, ) - $grid.zeta.9to3
9 to 3 column grid a-symmetrical.
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--9to3 {
grid-template-columns: 9fr 3fr;
}
/* No gaps */
grid-zeta.grid-zeta--9to3.grid-zeta--no-gaps { grid-column-gap: 0px; grid-row-gap: 0px;}<Grid columns="9fr 3fr"></Grid>ZetaGrid(asymmetricWeight:9, ) - $grid.zeta.9to3.nogaps
9 to 3 column grid a-symmetrical, no gaps
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--9to3 {
grid-template-columns: 9fr 3fr;
}.grid-zeta.grid-zeta--9to3.grid-zeta--no-gaps {}<Grid
columns="9fr 3fr"
noGap
>
</Grid>ZetaGrid(noGaps:true, asymmetricWeight:9, ) - $grid.zeta.8to4
8 to 4 column grid a-symmetrical.
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--8to4 {
grid-template-columns: 8fr 4fr;
}
/* No gaps */
grid-zeta.grid-zeta--8to4.grid-zeta--no-gaps { grid-column-gap: 0px; grid-row-gap: 0px;}<Grid columns="8fr 4fr"></Grid>ZetaGrid(asymmetricWeight:8, ) - $grid.zeta.8to4.nogaps
8 to 4 column grid a-symmetrical, no gaps
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--8to4 {
grid-template-columns: 8fr 4fr;
}.grid-zeta.grid-zeta--8to4.grid-zeta--no-gaps {}<Grid
columns="8fr 4fr"
noGap
>
</Grid>ZetaGrid(noGaps:true, asymmetricWeight:8, ) - $grid.zeta.7to5
7 to 5 column grid a-symmetrical.
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--7to5 {
grid-template-columns: 7fr 5fr;
}
/* No gaps */
grid-zeta.grid-zeta--7to5.grid-zeta--no-gaps { grid-column-gap: 0px; grid-row-gap: 0px;}<Grid columns="7fr 5fr"></Grid>ZetaGrid(asymmetricWeight:7, ) - $grid.zeta.7to5.nogaps
7 to 5 column grid a-symmetrical, no gaps
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--7to5 {
grid-template-columns: 7fr 5fr;
}.grid-zeta.grid-zeta--7to5.grid-zeta--no-gaps {}<Grid
columns="7fr 5fr"
noGap
>
</Grid>ZetaGrid(noGaps:true, asymmetricWeight:7, ) - $grid.zeta.5to7
5 to 7 column grid a-symmetrical.
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--5to7 {
grid-template-columns: 5fr 7fr;
}
/* No gaps */
grid-zeta.grid-zeta--5to7.grid-zeta--no-gaps { grid-column-gap: 0px; grid-row-gap: 0px;}<Grid columns="5fr 7fr"></Grid>ZetaGrid(asymmetricWeight:5, ) - $grid.zeta.5to7.nogaps
5 to 7 column grid a-symmetrical, no gaps
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--5to7 {
grid-template-columns: 5fr 7fr;
}.grid-zeta.grid-zeta--5to7.grid-zeta--no-gaps {}<Grid
columns="5fr 7fr"
noGap
>
</Grid>ZetaGrid(noGaps:true, asymmetricWeight:5, ) - $grid.zeta.4to8
4 to 8 column grid a-symmetrical.
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--4to8 {
grid-template-columns: 4fr 8fr;
}
/* No gaps */
grid-zeta.grid-zeta--4to8.grid-zeta--no-gaps { grid-column-gap: 0px; grid-row-gap: 0px;}<Grid columns="4fr 8fr"></Grid>ZetaGrid(asymmetricWeight:4, ) - $grid.zeta.4to8.nogaps
4 to 8 column grid a-symmetrical, no gaps
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--4to8 {
grid-template-columns: 4fr 8fr;
}.grid-zeta.grid-zeta--4to8.grid-zeta--no-gaps {}<Grid
columns="4fr 8fr"
noGap
>
</Grid>ZetaGrid(noGaps:true, asymmetricWeight:4, ) - $grid.zeta.3to9
3 to 9 column grid a-symmetrical.
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--3to9 {
grid-template-columns: 3fr 9fr;
}
/* No gaps */
grid-zeta.grid-zeta--3to9.grid-zeta--no-gaps { grid-column-gap: 0px; grid-row-gap: 0px;}<Grid columns="3fr 9fr"></Grid>ZetaGrid(asymmetricWeight:3, ) - $grid.zeta.3to9.nogaps
3 to 9 column grid a-symmetrical, no gaps
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--3to9 {
grid-template-columns: 3fr 9fr;
}.grid-zeta.grid-zeta--3to9.grid-zeta--no-gaps {}<Grid
columns="3fr 9fr"
noGap
>
</Grid>ZetaGrid(noGaps:true, asymmetricWeight:3, ) - $grid.zeta.2to10
2 to 10 column grid a-symmetrical.
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--2to10 {
grid-template-columns: 2fr 10fr;
}
/* No gaps */
grid-zeta.grid-zeta--2to10.grid-zeta--no-gaps { grid-column-gap: 0px; grid-row-gap: 0px;}<Grid columns="2fr 10fr"></Grid>ZetaGrid(asymmetricWeight:2, ) - $grid.zeta.2to10.nogaps
2 to 10 column grid a-symmetrical, no gaps
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--2to10 {
grid-template-columns: 2fr 10fr;
}.grid-zeta.grid-zeta--2to10.grid-zeta--no-gaps {}<Grid
columns="2fr 10fr"
noGap
>
</Grid>ZetaGrid(noGaps:true, asymmetricWeight:2, ) - grid.zeta.1to11
1 to 11 column grid a-symmetrical.
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--1to11 {
grid-template-columns: 1fr 11fr;
}
/* No gaps */
grid-zeta.grid-zeta--2to10.grid-zeta--no-gaps { grid-column-gap: 0px; grid-row-gap: 0px;}<Grid columns="1fr 11fr"></Grid>ZetaGrid(asymmetricWeight:1, ) - grid.zeta.1to11.nogaps
1 to 11 column grid a-symmetrical, no gaps
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--1to11 {
grid-template-columns: 1fr 11fr;
}.grid-zeta.grid-zeta--1to11.grid-zeta--no-gaps {}<Grid
columns="1fr 11fr"
noGap
>
</Grid>ZetaGrid(noGaps:true, asymmetricWeight:1, ) - grid.zeta.120px.1fr.80px.2fr.76px.1fr.3fr.40px
8 column grid hybrid.
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--120px-1fr-80px-2fr-76px-1fr-3fr-40px {
grid-template-columns: 120px 1fr 80px 2fr 76px 1fr 3fr 40px;
}
/* No gaps */
grid-zeta.grid-zeta--120px-1fr-80px-2fr-76px-1fr-3fr-40px--no-gaps { grid-column-gap: 0px; grid-row-gap: 0px;}<Grid columns="120px 1fr 80px 2fr 76px 1fr 3fr 40px"></Grid>ZetaGrid(col:8,hybrid: true, children:[GridItem(width: 120), Flexible(child: GridItem()),GridItem(width: 80), Flexible(flex: 2, child: GridItem()), GridItem(width: 76), Flexible(child: GridItem()), Flexible(flex: 3, child: GridItem()), GridItem(width: 40), ], ) - grid.zeta.120px.1fr.80px.2fr.76px.1fr.3fr.40px.nogaps
8 column grid hybrid.
.grid-zeta {
display: grid;
width: 100%;
justify-items: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}.grid-zeta:medium {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:small {
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}.grid-zeta:xl {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}.grid-zeta:tiny {
grid-template-columns: 1fr 1fr;
}.grid-zeta.grid-zeta--120px-1fr-80px-2fr-76px-1fr-3fr-40px {
grid-template-columns: 120px 1fr 80px 2fr 76px 1fr 3fr 40px;
}.grid-zeta.grid-zeta--120px-1fr-80px-2fr-76px-1fr-3fr-40px.grid-zeta--no-gaps {}<Grid
columns="120px 1fr 80px 2fr 76px 1fr 3fr 40px"
noGap
>
</Grid>ZetaGrid(col:8,noGaps:true, hybrid: true, children:[GridItem(width: 120), Flexible(child: GridItem()),GridItem(width: 80), Flexible(flex: 2, child: GridItem()), GridItem(width: 76), Flexible(child: GridItem()), Flexible(flex: 3, child: GridItem()), GridItem(width: 40), ], )
Spacing
Spacing tokens can be applied only via margin and padding. Se also the spacing-scale.
See also Token naming spreadsheet doc
- $spacing.zeta
Adds 0rem default margins and paddings
This is some text inside of a div block..spacing-zeta {
margin-top: 0rem;
margin-right: 0rem;
margin-bottom: 0rem;
margin-left: 0rem;
padding-top: 0rem;
padding-right: 0rem;
padding-bottom: 0rem;
padding-left: 0rem;
}ZetaSpacing(child) - $spacing.zeta.square
Adds 0rem paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--square {
padding: 0rem;
}ZetaSpacing(type: SpacingType.square,)ZetaSpacing.square(child) - $spacing.zeta.squish
Adds 0rem top and bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--squish {
padding-top: 0rem;
padding-bottom: 0rem;
}ZetaSpacing.squish(child) - .spacing.zeta.center
Although center is positioning an auto spacing left and right can be used in css only
content.spacing-zeta.spacing-zeta--center {
margin-right: auto;
margin-left: auto;
}Although center is positioning an auto spacing left and right can be used in css only
Although center is positioning an auto spacing left and right can be used in css only
- $spacing.zeta.inline
Adds 0rem left and right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline {
padding-right: 0rem;
padding-left: 0rem;
}ZetaSpacing.inline(child) - $spacing.zeta.inline.start
Adds 0rem left paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start {
padding-left: 0rem;
}ZetaSpacing.inline.start(child) - $spacing.zeta.inline.end
Adds 0rem right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline--end {
padding-right: 0rem;
}ZetaSpacing.inline.end(child) - $spacing.zeta.stack
Adds 0rem bottom margin
This is some text inside of a div block..spacing-zeta.spasing-zeta--stack {
margin-bottom: 0rem;
}ZetaSpacing.stack(child) - $spacing.zeta.x1
Adds 0.25rem margins and/or paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--x1 {
margin-top: 0.25rem;
margin-right: 0.25rem;
margin-bottom: 0.25rem;
margin-left: 0.25rem;
padding-top: 0.25rem;
padding-right: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.25rem;
}ZetaSpacing(child, size: ZetaSpacing.x1) - $spacing.square.x1
Adds 0.25rem paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--square.spacing-zeta--x1 {
padding: 0.25rem;
}ZetaSpacing.square(child, size: ZetaSpacing.x1) - $spacing.zeta.squish.x1
Adds 0.25rem top and bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--squish.spacing-zeta--x1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}ZetaSpacing.squish(child, size: ZetaSpacing.x1) - $spacing.zeta.inline.x1
Adds 0.25rem left and right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline.spacing-zeta--x1 {
padding-right: 0.25rem;
padding-left: 0.25rem;
}ZetaSpacing.inline(child, size: ZetaSpacing.x1) - $spacing.zeta.inline.start.x1
Adds 0.25rem left paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start.spacing-zeta--x1 {
padding-left: 0.25rem;
}ZetaSpacing.inline.start(child, size: ZetaSpacing.x1) - $spacing.zeta.inline.end.x1
Adds 0.25rem right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-end.spacing-zeta--x1 {
padding-right: 0.25rem;
}ZetaSpacing.inline.end(child, size: ZetaSpacing.x1) - $spacing.zeta.stack.x1
Adds 0.25rem bottom margin
This is some text inside of a div block.
.spacing-zeta.spacing-zeta--stack.spacing-zeta--x1 {
margin-bottom: 0.25rem;
}ZetaSpacing.stack(child, size: ZetaSpacing.x1) - $spacing.zeta.xxs
Adds 0.25rem margins and/or paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--xxs {
margin-top: 0.5rem;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
margin-left: 0.5rem;
padding-top: 0.5rem;
padding-right: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0.5rem;
}ZetaSpacing(child, size: ZetaSpacing.xxs) - $spacing.zeta.square.xxs
Adds 0.25rem paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--square.spacing-zeta--xxs {
padding: 0.25rem;
}ZetaSpacing.square(child, size: ZetaSpacing.xxs) - $spacing.zeta.squish.xxs
Adds 0.25rem top and bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--squish.spacing-zeta--xxs {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}ZetaSpacing.squish(child, size: ZetaSpacing.xxs) - $spacing.zeta.inline.xxs
Adds 0.25rem left and right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline.spacing-zeta--xxs {
padding-right: 0.25rem;
padding-left: 0.25rem;
}ZetaSpacing.inline(child, size: ZetaSpacing.xxs) - $spacing.zeta.inline.start.xxs
Adds 0.25rem left paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start.spacing-zeta--xxs {
padding-left: 0.25rem;
}ZetaSpacing.inline.start(child, size: ZetaSpacing.xxs) - $spacing.zeta.inline.end.xxs
Adds 0.25rem right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-end.spacing-zeta--xxs {
padding-right: 0.25rem;
}ZetaSpacing.inline.end(child, size: ZetaSpacing.xxs) - $spacing.zeta.stack.xxs
Adds 0.25rem bottom margin
This is some text inside of a div block.
.spacing-zeta.spacing-zeta--stack.spacing-zeta--x1 {
margin-bottom: 0.25rem;
}ZetaSpacing.stack(child, size: ZetaSpacing.xxs) - $spacing.zeta.x2
Adds 0.5rem margins and/or paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--x2 {
margin-top: 0.5rem;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
margin-left: 0.5rem;
padding-top: 0.5rem;
padding-right: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0.5rem;
}ZetaSpacing(child, size: ZetaSpacing.x2) - $spacing.zeta.square.x2
Adds 0.5rem paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--square.spacing-zeta--x2 {
padding: 0.5rem;
}ZetaSpacing.square(child, size: ZetaSpacing.x2) - $spacing.zeta.squish.x2
Adds 0.5rem top and bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--squish.spacing-zeta--x2 {
margin-top: 0rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}ZetaSpacing.squish(child, size: ZetaSpacing.x2) - $spacing.zeta.inline.x2
Adds 0.5rem left and right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline.spacing-zeta--x2 {
padding-right: 0.5rem;
padding-left: 0.5rem;
}ZetaSpacing.inline(child, size: ZetaSpacing.x2) - $spacing.zeta.inline.start.x2
Adds 0.5rem left paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start.spacing-zeta--x2 {
padding-left: 0.5rem;
}ZetaSpacing.inline.start(child, size: ZetaSpacing.x2) - $spacing.zeta.inline.end.x2
Adds 0.5rem right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-end.spacing-zeta--x2 {
padding-right: 0.5rem;
}ZetaSpacing.inline.end(child, size: ZetaSpacing.x2) - $spacing.zeta.stack.x2
Adds 0.5rem bottom margin
This is some text inside of a div block..spacing-zeta.spacing-zeta--stack.spacing-zeta--x2 {
margin-bottom: 0.5rem;
}ZetaSpacing.stack(child, size: ZetaSpacing.x2) - $spacing.zeta.xs
Adds 0.5rem margins and/or paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--xs {
margin-top: 0.5rem;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
margin-left: 0.5rem;
padding-top: 0.5rem;
padding-right: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0.5rem;
}ZetaSpacing(child, size: ZetaSpacing.xs) - $spacing.zeta.square.xs
Adds 0.5rem paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--square.spacing-zeta--xs {
padding: 0.5rem;
}ZetaSpacing.square(child, size: ZetaSpacing.xs) - $spacing.zeta.squish.xs
Adds 0.5rem top and bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--squish.spacing-zeta--xs {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}ZetaSpacing.squish(child, size: ZetaSpacing.xs) - $spacing.zeta.inline.xs
Adds 0.5rem left or right padding
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline.spacing-zeta--xs {
padding-right: 0.5rem;
padding-left: 0.5rem;
}ZetaSpacing.inline(child, size: ZetaSpacing.xs) - $spacing.zeta.inline.start.xs
Adds 0.5rem left padding
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start.spacing-zeta--xs {
padding-left: 0.5rem;
}ZetaSpacing.inline.start(child, size: ZetaSpacing.xs) - $spacing.zeta.inline.end.xs
Adds 0.5rem right padding
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-end.spacing-zeta--xs {
padding-right: 0.5rem;
}ZetaSpacing.inline.end(child, size: ZetaSpacing.xs) - $spacing.zeta.stack.xs
Adds 0.5rem bottom margin
This is some text inside of a div block..spacing-zeta.spacing-zeta--stack.spacing-zeta--xs {
margin-bottom: 0.5rem;
}ZetaSpacing.stack(child, size: ZetaSpacing.xs) - $spacing.zeta.x3
Adds 0.75rem either or both margins and paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--x3 {
margin-top: 0.75rem;
margin-right: 0.75rem;
margin-bottom: 0.75rem;
margin-left: 0.75rem;
padding-top: 0.75rem;
padding-right: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 0.75rem;
}ZetaSpacing(child, size: ZetaSpacing.x3) - $spacing.zeta.square.x3
Adds 0.75rem padding
This is some text inside of a div block..spacing-zeta.spacing-zeta--square.spacing-zeta--x3 {
padding-top: 0.75rem;
padding-right: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 0.75rem;
}ZetaSpacing.square(child, size: ZetaSpacing.x3) - $spacing.zeta.squish.x3
Adds 0.75rem top and bottom padding
This is some text inside of a div block..spacing-zeta.spacing-zeta--squish.spacing-zeta--x3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}ZetaSpacing.squish(child, size: ZetaSpacing.x3) - $spacing.zeta.inline.x3
Adds 0.75rem left or/and right padding
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline.spacing-zeta--x3 {
padding-right: 0.75rem;
padding-left: 0.75rem;
}ZetaSpacing.inline(child, size: ZetaSpacing.x3) - $spacing.zeta.inline.start.x3
Adds 0.75rem left padding
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start.spacing-zeta--x3 {
padding-left: 0.75rem;
}ZetaSpacing.inline.start(child, size: ZetaSpacing.x3) - $spacing.zeta.inline.end.x3
Adds 0.75rem right padding
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-end.spacing-zeta--x3 {
padding-right: 0.75rem;
}ZetaSpacing.inline.end(child, size: ZetaSpacing.x3) - $spacing.zeta.stack.x3
Adds 0.75rem bottom margin
This is some text inside of a div block..spacing-zeta.spacing-zeta--stack.spacing-zeta--x3 {
margin-bottom: 0.75rem;
}ZetaSpacing.stack(child, size: ZetaSpacing.x3) - $spacing.zeta.s
Adds 0.75rem either or both margins and paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--s {
margin-top: 0.75rem;
margin-right: 0.75rem;
margin-bottom: 0.75rem;
margin-left: 0.75rem;
padding-top: 0.75rem;
padding-right: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 0.75rem;
}ZetaSpacing(child, size: ZetaSpacing.s) - $spacing.zeta.square.s
Adds 0.75rem paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--square.spacing-zeta--s {
padding-top: 0.75rem;
padding-right: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 0.75rem;
}ZetaSpacing.square(child, size: ZetaSpacing.s) - $spacing.zeta.squish.s
Adds 0.75rem top and bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--squish.spacing-zeta--s {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}ZetaSpacing.squish(child, size: ZetaSpacing.s) - $spacing.zeta.inline.s
Adds 0.75rem left and right padding
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline.spacing-zeta--s {
padding-right: 0.75rem;
padding-left: 0.75rem;
}ZetaSpacing.inline(child, size: ZetaSpacing.s) - $spacing.zeta.inline.start.s
Adds 0.75rem left padding
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start.spacing-zeta--s {
padding-left: 0.75rem;
}ZetaSpacing.inline.start(child, size: ZetaSpacing.s) - $spacing.zeta.inline.end.s
Adds 0.75rem right padding
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-end.spacing-zeta--s {
padding-right: 0.75rem;
}ZetaSpacing.inline.end(child, size: ZetaSpacing.s) - $spacing.zeta.stack.s
Adds 0.75rem bottom margin
This is some text inside of a div block..spacing-zeta.spacing-zeta--stack.spacing-zeta--s {
margin-bottom: 0.75rem;
}ZetaSpacing.stack(child, size: ZetaSpacing.s) - $spacing.zeta.x4
Adds 1rem either or both margins and paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--x4 {
margin-top: 1rem;
margin-right: 1rem;
margin-bottom: 1rem;
margin-left: 1rem;
padding-top: 1rem;
padding-right: 1rem;
padding-bottom: 1rem;
padding-left: 1rem;
}ZetaSpacing(child, size: ZetaSpacing.x4) - $spacing.zeta.square.x4
Adds 1rem paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--square.spacing-zeta--x4 {
padding-top: 1rem;
padding-right: 1rem;
padding-bottom: 1rem;
padding-left: 1rem;
}ZetaSpacing.square(child, size: ZetaSpacing.x4) - $spacing.zeta.squish.x4
Adds 1rem top and bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--squish.spacing-zeta--x4 {
padding-top: 1rem;
padding-bottom: 1rem;
}ZetaSpacing.squish(child, size: ZetaSpacing.x4) - $spacing.zeta.inline.x4
Adds 1rem left and right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline.spacing-zeta--x4 {
padding-right: 1rem;
padding-left: 1rem;
}ZetaSpacing.inline(child, size: ZetaSpacing.x4) - $spacing.zeta.inline.start.x4
Adds 1rem left paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start.spacing-zeta--x4 {
padding-left: 1rem;
}ZetaSpacing.inline.start(child, size: ZetaSpacing.x4) - $spacing.zeta.inline.end.x4
Adds 1rem right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-end.spacing-zeta--x4 {
padding-right: 1rem;
}ZetaSpacing.inline.end(child, size: ZetaSpacing.x4) - $spacing.zeta.stack.x4
Adds 1rem bottom margin
This is some text inside of a div block..spacing-zeta.spacing-zeta--stack.spacing-zeta--x4 {
margin-bottom: 1rem;
}ZetaSpacing.stack(child, size: ZetaSpacing.x4) - $spacing.zeta.b
Adds 1rem either or both margins and paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--b {
margin-top: 1rem;
margin-right: 1rem;
margin-bottom: 1rem;
margin-left: 1rem;
padding-top: 1rem;
padding-right: 1rem;
padding-bottom: 1rem;
padding-left: 1rem;
}ZetaSpacing(child, size: ZetaSpacing.b) - $spacing.zeta.square.b
Adds 1rem paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--square.spacing-zeta--b {
padding-top: 1rem;
padding-right: 1rem;
padding-bottom: 1rem;
padding-left: 1rem;
}ZetaSpacing.square(child, size: ZetaSpacing.b) - $spacing.zeta.squish.b
Adds 1rem top and bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--squish.spacing-zeta--b {
padding-top: 1rem;
padding-bottom: 1rem;
}ZetaSpacing.squish(child, size: ZetaSpacing.b) - $spacing.zeta.inline.b
Adds 1rem left and right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline.spacing-zeta--b {
padding-right: 1rem;
padding-left: 1rem;
}ZetaSpacing.inline(child, size: ZetaSpacing.b) - $spacing.zeta.inline.start.b
Adds 1rem left paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start.spacing-zeta--b {
padding-left: 1rem;
}ZetaSpacing.inline.start(child, size: ZetaSpacing.b) - $spacing.zeta.inline.end.b
Adds 1rem right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-end.spacing-zeta--b {
padding-right: 1rem;
}ZetaSpacing.inline.end(child, size: ZetaSpacing.b) - $spacing.zeta.stack.b
Adds 1rem bottom margin
This is some text inside of a div block..spacing-zeta.spacing-zeta--stack.spacing-zeta--b {
margin-bottom: 1rem;
}ZetaSpacing.stack(child, size: ZetaSpacing.b) - $spacing.zeta.x5
Adds 1.25rem either or both margins and paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--x5 {
margin-top: 1.25rem;
margin-right: 1.25rem;
margin-bottom: 1.25rem;
margin-left: 1.25rem;
padding-top: 1.25rem;
padding-right: 1.25rem;
padding-bottom: 1.25rem;
padding-left: 1.25rem;
}ZetaSpacing(child, size: ZetaSpacing.x5) - $spacing.zeta.square.x5
Adds 1.25rem paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--square.spacing-zeta--x5 {
padding-top: 1.25rem;
padding-right: 1.25rem;
padding-bottom: 1.25rem;
padding-left: 1.25rem;
}ZetaSpacing.square(child, size: ZetaSpacing.x5) - $spacing.zeta.squish.x5
Adds 1.25rem top and bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--squish.spacing-zeta--x5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}ZetaSpacing.squish(child, size: ZetaSpacing.x5) - $spacing.zeta.inline.x5
Adds 1.25rem left and right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline.spacing-zeta--x5 {
padding-right: 1.25rem;
padding-left: 1.25rem;
}ZetaSpacing.inline(child, size: ZetaSpacing.x5) - $spacing.zeta.inline.start.x5
Adds 1.25rem left paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start.spacing-zeta--x5 {
padding-left: 1.25rem;
}ZetaSpacing.inline.start(child, size: ZetaSpacing.x5) - $spacing.zeta.inline.end.x5
Adds 1.25rem right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-end.spacing-zeta--x5 {
padding-right: 1.25rem;
}ZetaSpacing.inline.end(child, size: ZetaSpacing.x5) - $spacing.zeta.stack.x5
Adds 1.25rem bottom margin
This is some text inside of a div block..spacing-zeta.spacing-zeta--stack.spacing-zeta--x5 {
margin-bottom: 1.25rem;
}ZetaSpacing.stack(child, size: ZetaSpacing.x5) - $spacing.zeta.x6
Adds 1.5rem either or both margins and paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--x6 {
margin-top: 1.5rem;
margin-right: 1.5rem;
margin-bottom: 1.5rem;
margin-left: 1.5rem;
padding-top: 1.5rem;
padding-right: 1.5rem;
padding-bottom: 1.5rem;
padding-left: 1.5rem;
}ZetaSpacing(child, size: ZetaSpacing.x6) - $spacing.zeta.square.x6
Adds 1.5rem paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--square.spacing-zeta--x6 {
padding-top: 1.5rem;
padding-right: 1.5rem;
padding-bottom: 1.5rem;
padding-left: 1.5rem;
}ZetaSpacing.square(child, size: ZetaSpacing.x6) - $spacing.zeta.squish.x6
Adds 1.5rem top and bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--squish.spacing-zeta--x6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}ZetaSpacing.squish(child, size: ZetaSpacing.x6) - $spacing.zeta.inline.x6
Adds 1.5rem left and right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline.spacing-zeta--x6 {
padding-right: 1.5rem;
padding-left: 1.5rem;
}ZetaSpacing.inline(child, size: ZetaSpacing.x6) - $spacing.zeta.inline.start.x6
Adds 1.5rem left paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start.spacing-zeta--x6 {
padding-left: 1.5rem;
}ZetaSpacing.inline.start(child, size: ZetaSpacing.x6) - $spacing.zeta.inline.end.x6
Adds 1.5rem right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta-inline-end.spacing-zeta--x6 {
padding-right: 1.5rem;
}ZetaSpacing.inline.end(child, size: ZetaSpacing.x6) - $spacing.zeta.stack.x6
Adds 1.5rem bottom margin
This is some text inside of a div block..spacing-zeta.spacing-zeta--stack.spacing-zeta--x6 {
margin-bottom: 1.5rem;
}ZetaSpacing.stack(child, size: ZetaSpacing.x6) - $spacing.zeta.m
Adds 1.5rem either or both margins and paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--m {
margin-top: 1.5rem;
margin-right: 1.5rem;
margin-bottom: 1.5rem;
margin-left: 1.5rem;
padding-top: 1.5rem;
padding-right: 1.5rem;
padding-bottom: 1.5rem;
padding-left: 1.5rem;
}ZetaSpacing(child, size: ZetaSpacing.m) - $spacing.zeta.square.m
Adds 1.5rem paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--square.spacing-zeta--m {
padding-top: 1.5rem;
padding-right: 1.5rem;
padding-bottom: 1.5rem;
padding-left: 1.5rem;
}ZetaSpacing.square(child, size: ZetaSpacing.m) - $spacing.zeta.squish.m
Adds 1.5rem top and bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--squish.spacing-zeta--m {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}ZetaSpacing.squish(child, size: ZetaSpacing.m) - $spacing.zeta.inline.m
Adds 1.5rem left and or right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline.spacing-zeta--m {
padding-right: 1.5rem;
padding-left: 1.5rem;
}ZetaSpacing.inline(child, size: ZetaSpacing.m) - $spacing.zeta.inline.start.m
Adds 1.5rem left paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start.spacing-zeta--m {
padding-left: 1.5rem;
}ZetaSpacing.inline.start(child, size: ZetaSpacing.m) - $spacing.zeta.inline.end.m
Adds 1.5rem right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-end.spacing-zeta--m {
padding-right: 1.5rem;
}ZetaSpacing.inline.end(child, size: ZetaSpacing.m) - $spacing.zeta.stack.m
Adds 1.5rem bottom margins
This is some text inside of a div block..spacing-zeta.spacing-zeta--stack.spacing-zeta--m {
margin-bottom: 1.5rem;
}ZetaSpacing.stack(child, size: ZetaSpacing.m) - $spacing.zeta.x7
Adds 1.75rem either or both margins and paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--x7 {
margin-top: 1.75rem;
margin-right: 1.75rem;
margin-bottom: 1.75rem;
margin-left: 1.75rem;
padding-top: 1.75rem;
padding-right: 1.75rem;
padding-bottom: 1.75rem;
padding-left: 1.75rem;
}ZetaSpacing(child, size: ZetaSpacing.x7) - $spacing.zeta.square.x7
Adds 1.75rem paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--square.spacing-zeta--x7 {
padding-top: 1.75rem;
padding-right: 1.75rem;
padding-bottom: 1.75rem;
padding-left: 1.75rem;
}ZetaSpacing.square(child, size: ZetaSpacing.x7) - $spacing.zeta.squish.x7
Adds 1.75rem top and bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--squish.spacing-zeta--x7 {
padding-top: 1.75rem;
padding-bottom: 1.75rem;
}ZetaSpacing.squish(child, size: ZetaSpacing.x7) - $spacing.zeta.inline.x7
Adds 1.75rem left and right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline.spacing-zeta--x7 {
padding-right: 1.75rem;
padding-left: 1.75rem;
}ZetaSpacing.inline(child, size: ZetaSpacing.x7) - $spacing.zeta.inline.start.x7
Adds 1.75rem left paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start.spacing-zeta--x7 {
padding-left: 1.75rem;
}ZetaSpacing.inline.start(child, size: ZetaSpacing.x7) - $spacing.zeta.inline.end.x7
Adds 1.75rem right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-end.spacing-zeta--x7 {
padding-right: 1.75rem;
}ZetaSpacing.inline.end(child, size: ZetaSpacing.x7) - $spacing.zeta.stack.x7
Adds 1.75rem bottom margins
This is some text inside of a div block..spacing-zeta.spacing-zeta--stack.spacing-zeta--x7 {
margin-bottom: 1.75rem;
}ZetaSpacing.stack(child, size: ZetaSpacing.x7) - $spacing.zeta.x8
Adds 2rem either or both margins and paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--x8 {
margin-top: 2rem;
margin-right: 2rem;
margin-bottom: 2rem;
margin-left: 2rem;
padding-top: 2rem;
padding-right: 2rem;
padding-bottom: 2rem;
padding-left: 2rem;
}ZetaSpacing(child, size: ZetaSpacing.x8) - $spacing.zeta.square.x8
Adds 2rem paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--square.spacing-zeta--x8 {
padding-top: 2rem;
padding-right: 2rem;
padding-bottom: 2rem;
padding-left: 2rem;
}ZetaSpacing.square(child, size: ZetaSpacing.x8) - $spacing.zeta.squish.x8
Adds 2rem top and bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--squish.spacing-zeta--x8 {
padding-top: 2rem;
padding-right: 0rem;
padding-bottom: 2rem;
padding-left: 0rem;
}ZetaSpacing.squish(child, size: ZetaSpacing.x8) - $spacing.zeta.inline.x8
Adds 2rem left and right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline.spacing-zeta--x8 {
padding-right: 2rem;
padding-left: 2rem;
}ZetaSpacing.inline(child, size: ZetaSpacing.x8) - $spacing.zeta.inline.start.x8
Adds 2rem left paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start.spacing-zeta--x8 {
padding-left: 2rem;
}ZetaSpacing.inline.start(child, size: ZetaSpacing.x8) - $spacing.zeta.inline.end.x8
Adds 2rem right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-end.spacing-zeta--x8 {
padding-right: 2rem;
}ZetaSpacing.inline.end(child, size: ZetaSpacing.x8) - $spacing.zeta.stack.x8
Adds 2rem bottom margins
This is some text inside of a div block..spacing-zeta.spacing-zeta--stack.spacing-zeta--x8 {
margins-bottom: 2rem;
}ZetaSpacing.stack(child, size: ZetaSpacing.x8) - $spacing.zeta.l
Adds 2rem either or both margins and paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--l {
margin-top: 2rem;
margin-right: 2rem;
margin-bottom: 2rem;
margin-left: 2rem;
padding-top: 2rem;
padding-right: 2rem;
padding-bottom: 2rem;
padding-left: 2rem;
}ZetaSpacing(child, size: ZetaSpacing.l) - $spacing.zeta.square.l
Adds 2rem paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--square.spacing-zeta--l {
padding-top: 2rem;
padding-right: 2rem;
padding-bottom: 2rem;
padding-left: 2rem;
}ZetaSpacing.square(child, size: ZetaSpacing.l) - $spacing.zeta.squish.l
Adds 2rem top and bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--squish.spacing-zeta--l {
padding-top: 2rem;
padding-bottom: 2rem;
}ZetaSpacing.squish(child, size: ZetaSpacing.l) - $spacing.zeta.inline.l
Adds 2rem left and right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline.spacing-zeta--l {
padding-right: 2rem;
padding-left: 2rem;
}ZetaSpacing.inline(child, size: ZetaSpacing.l) - $spacing.zeta.inline.start.l
Adds 2rem left paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start.spacing-zeta--l {
padding-left: 2rem;
}ZetaSpacing.inline.start(child, size: ZetaSpacing.l) - $spacing.zeta.inline.end.l
Adds 2rem right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-end.spacing-zeta--l {
padding-right: 2rem;
}ZetaSpacing.inline.end(child, size: ZetaSpacing.l) - $spacing.zeta.stack.l
Adds 2rem bottom marginsm
This is some text inside of a div block..spacing-zeta.spacing-zeta--stack.spacing-zeta--l {
margin-bottom: 2rem;
}ZetaSpacing.stack(child, size: ZetaSpacing.l) - $spacing.zeta.x9
Adds 2.25rem either or both margins and paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--x9 {
margin-top: 2.25rem;
margin-right: 2.25rem;
margin-bottom: 2.25rem;
margin-left: 2.25rem;
padding-top: 2.25rem;
padding-right: 2.25rem;
padding-bottom: 2.25rem;
padding-left: 2.25rem;
}ZetaSpacing(child, size: ZetaSpacing.x9) - $spacing.zeta.square.x9
Adds 2.25rem paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--square.spacing-zeta--x9 {
padding-top: 2.25rem;
padding-right: 2.25rem;
padding-bottom: 2.25rem;
padding-left: 2.25rem;
}ZetaSpacing.square(child, size: ZetaSpacing.x9) - $spacing.zeta.squish.x9
Adds 2.25rem top and bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--square.spacing-zeta--x9 {
padding-top: 2.25rem;
padding-right: 2.25rem;
padding-bottom: 2.25rem;
padding-left: 2.25rem;
}ZetaSpacing.squish(child, size: ZetaSpacing.x9) - $spacing.zeta.inline.x9
Adds 2.25rem left and right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline.spacing-zeta--x9 {
padding-right: 2.25rem;
padding-left: 2.25rem;
}ZetaSpacing.inline(child, size: ZetaSpacing.x9) - $spacing.zeta.inline.start.x9
Adds 2.25rem left paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start.spacing-zeta--x9 {
padding-left: 2.25rem;
}ZetaSpacing.inline.start(child, size: ZetaSpacing.x9) - $spacing.zeta.inline.end.x9
Adds 2.25rem right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-end.spacing-zeta--x9 {
padding-right: 2.25rem;
}ZetaSpacing.inline.end(child, size: ZetaSpacing.x9) - $spacing.zeta.stack.x9
Adds 2.25rem bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--stack.spacing-zeta--x9 {
margin-bottom: 2.25rem;
}ZetaSpacing.stack(child, size: ZetaSpacing.x9) - $spacing.zeta.x10
Adds 2.5rem either or both margins and paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--x10 {
margin-top: 2.5rem;
margin-right: 2.5rem;
margin-bottom: 2.5rem;
margin-left: 2.5rem;
padding-top: 2.5rem;
padding-right: 2.5rem;
padding-bottom: 2.5rem;
padding-left: 2.5rem;
}ZetaSpacing(child, size: ZetaSpacing.x10) - $spacing.zeta.square.x10
Adds 2.5rem paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--square.spacing-zeta--x10 {
padding-top: 2.5rem;
padding-right: 2.5rem;
padding-bottom: 2.5rem;
padding-left: 2.5rem;
}ZetaSpacing.square(child, size: ZetaSpacing.x10) - $spacing.zeta.squish.x10
Adds 2.5rem top and bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--squish.spacing-zeta--x10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}ZetaSpacing.squish(child, size: ZetaSpacing.x10) - $spacing.zeta.inline.x10
Adds 2.5rem left and right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline.spacing-zeta--x10 {
padding-right: 2.5rem;
padding-left: 2.5rem;
}ZetaSpacing.inline(child, size: ZetaSpacing.x10) - $spacing.zeta.inline.start.x10
Adds 2.5rem left paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start.spacing-zeta--x10 {
padding-left: 2.5rem;
}ZetaSpacing.inline.start(child, size: ZetaSpacing.x10) - $spacing.zeta.inline.end.x10
Adds 2.5rem right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-end.spacing-zeta--x10 {
padding-right: 2.5rem;
}ZetaSpacing.inline.end(child, size: ZetaSpacing.x10) - $spacing.zeta.stack.x10
Adds 2.5rem bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--stack.spacing-zeta--x10 {
margin-bottom: 2.5rem;
}ZetaSpacing.stack(child, size: ZetaSpacing.x10) - $spacing.zeta.x11
Adds 2.75rem either or both margins and paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--x11 {
margin-top: 2.75rem;
margin-right: 2.75rem;
margin-bottom: 2.75rem;
margin-left: 2.75rem;
padding-top: 2.75rem;
padding-right: 2.75rem;
padding-bottom: 2.75rem;
padding-left: 2.75rem;
}ZetaSpacing(child, size: ZetaSpacing.x11) - $spacing.zeta.square.x11
Adds 2.75rem paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--square.spacing-zeta--x11 {
margin-top: 0rem;
margin-right: 0rem;
margin-bottom: 0rem;
margin-left: 0rem;
padding-top: 2.75rem;
padding-right: 2.75rem;
padding-bottom: 2.75rem;
padding-left: 2.75rem;
}ZetaSpacing.square(child, size: ZetaSpacing.x11) - $spacing.zeta.squish.x11
Adds 2.75rem top and bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--squish.spacing-zeta--x11 {
padding-top: 2.75rem;
padding-bottom: 2.75rem;
}ZetaSpacing.squish(child, size: ZetaSpacing.x11) - $spacing.zeta.inline.x11
Adds 2.75rem left and right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline.spacing-zeta--x11 {
padding-right: 2.75rem;
padding-left: 2.75rem;
}ZetaSpacing.inline(child, size: ZetaSpacing.x11) - $spacing.zeta.inline.start.x11
Adds 2.75rem left paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start.spacing-zeta--x11 {
padding-left: 2.75rem;
}ZetaSpacing.inline.start(child, size: ZetaSpacing.x11) - $spacing.zeta.inline.end.x11
Adds 2.75rem right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-end-.spacing-zeta--x11 {
padding-right: 2.75rem;
}ZetaSpacing.inline.end(child, size: ZetaSpacing.x11) - $spacing.zeta.stack.x11
Adds 2.75rem bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--stack.spacing-zeta--x11 {
margin-bottom: 2.75rem;
}ZetaSpacing.stack(child, size: ZetaSpacing.x11) - $spacing.zeta.x12
Adds 3rem either or both margins and paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--x12 {
margin-top: 3rem;
margin-right: 3rem;
margin-bottom: 3rem;
margin-left: 3rem;
padding-top: 3rem;
padding-right: 3rem;
padding-bottom: 3rem;
padding-left: 3rem;
}ZetaSpacing(child, size: ZetaSpacing.x12) - $spacing.zeta.square.x12
Adds 3rem paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--square.spacing-zeta--x12 {
padding-top: 3rem;
padding-right: 3rem;
padding-bottom: 3rem;
padding-left: 3rem;
}ZetaSpacing.square(child, size: ZetaSpacing.x12) - $spacing.zeta.squish.x12
Adds 3rem top and bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--squish.spacing-zeta--x12 {
padding-top: 3rem;
padding-bottom: 3rem;
}ZetaSpacing.squish(child, size: ZetaSpacing.x12) - $spacing.zeta.inline.x12
Adds 3rem left and right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline.spacing-zeta--x12 {
padding-right: 3rem;
padding-left: 3rem;
}ZetaSpacing.inline(child, size: ZetaSpacing.x12) - $spacing.zeta.inline.start.x12
Adds 3rem left paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start.spacing-zeta--x12 {
padding-left: 3rem;
}ZetaSpacing.inline.start(child, size: ZetaSpacing.x12) - $spacing.zeta.inline.end.x12
Adds 3rem right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-end.spacing-zeta--x12 {
padding-right: 3rem;
}ZetaSpacing.inline.end(child, size: ZetaSpacing.x12) - $spacing.zeta.stack.x12
Adds 3rem bottom margin
This is some text inside of a div block..spacing-zeta.spacing-zeta--stack.spacing-zeta--x12 {
margin-right: 0rem;
}ZetaSpacing.stack(child, size: ZetaSpacing.x12) - $spacing.zeta.x16
Adds 4rem either or both margins and paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--x16 {
margin-top: 4rem;
margin-right: 4rem;
margin-bottom: 4rem;
margin-left: 4rem;
padding-top: 4rem;
padding-right: 4rem;
padding-bottom: 4rem;
padding-left: 4rem;
}ZetaSpacing(child, size: ZetaSpacing.x16) - $spacing.zeta.square.x16
Adds 4rem paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--square.spacing-zeta--x16 {
padding-top: 4rem;
padding-right: 4rem;
padding-bottom: 4rem;
padding-left: 4rem;
}ZetaSpacing.square(child, size: ZetaSpacing.x16) - $spacing.zeta.squish.x16
Adds 4rem top and bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--squish.spacing-zeta--x16 {
padding-top: 4rem;
padding-bottom: 4rem;
}ZetaSpacing.squish(child, size: ZetaSpacing.x16) - $spacing.zeta.inline.x16
Adds 4rem left and right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline.spacing-zeta--x16 {
padding-right: 4rem;
padding-left: 4rem;
}ZetaSpacing.inline(child, size: ZetaSpacing.x16) - $spacing.zeta.inline.start.x16
Adds 4rem left paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start.spacing-zeta--x16 {
padding-left: 4rem;
}ZetaSpacing.inline.start(child, size: ZetaSpacing.x16) - $spacing.zeta.inline.end.x16
Adds 4rem right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-end.spacing-zeta--x16 {
padding-left: 4rem;
}ZetaSpacing.inline.end(child, size: ZetaSpacing.x16) - $spacing.zeta.stack.x16
Adds 4rem bottom margin
This is some text inside of a div block..spacing-zeta.spacing-zeta--stack.spacing-zeta--x16 {
margin-bottom: 4rem;
}ZetaSpacing.stack(child, size: ZetaSpacing.x16) - $spacing.zeta.xl
Adds 4rem either or both margins and paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--xl {
margin-top: 4rem;
margin-right: 4rem;
margin-bottom: 4rem;
margin-left: 4rem;
padding-top: 4rem;
padding-right: 4rem;
padding-bottom: 4rem;
padding-left: 4rem;
}ZetaSpacing(child, size: ZetaSpacing.xl) - $spacing.zeta.square.xl
Adds 4rem paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--square.spacing-zeta--xl {
padding-top: 4rem;
padding-right: 4rem;
padding-bottom: 4rem;
padding-left: 4rem;
}ZetaSpacing.square(child, size: ZetaSpacing.xl) - $spacing.zeta.squish.xl
Adds 4rem top and bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--squish.spacing-zeta--xl {
padding-top: 4rem;
padding-bottom: 4rem;
}ZetaSpacing.squish(child, size: ZetaSpacing.xl) - $spacing.zeta.inline.xl
Adds 4rem left and right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline.spacing-zeta--xl {
padding-right: 4rem;
padding-left: 4rem;
}ZetaSpacing.inline(child, size: ZetaSpacing.xl) - $spacing.zeta.inline.start.xl
Adds 4rem left paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start.spacing-zeta--xl {
padding-left: 4rem;
}ZetaSpacing.inline.start(child, size: ZetaSpacing.xl) - $spacing.zeta.inline.end.xl
Adds 4rem right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-end.spacing-zeta--xl {
padding-right: 4rem;
}ZetaSpacing.inline.end(child, size: ZetaSpacing.xl) - $spacing.zeta.stack.xl
Adds 4rem bottom margin
This is some text inside of a div block..spacing-zeta.spacing-zeta--stack.spacing-zeta--xl {
margin-bottom: 4rem;
}ZetaSpacing.stack(child, size: ZetaSpacing.xl) - $spacing.zeta.x20
Adds 5rem either or both margins and paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--x20 {
margin-top: 5rem;
margin-right: 5rem;
margin-bottom: 5rem;
margin-left: 5rem;
padding-top: 5rem;
padding-right: 5rem;
padding-bottom: 5rem;
padding-left: 5rem;
}ZetaSpacing(child, size: ZetaSpacing.x20) - $spacing.zeta.square.x20
Adds 5rem paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--square.spacing-zeta--x20 {
padding-top: 5rem;
padding-right: 5rem;
padding-bottom: 5rem;
padding-left: 5rem;
}ZetaSpacing.square(child, size: ZetaSpacing.x20) - $spacing.zeta.squish.x20
Adds 5rem top and bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--squish.spacing-zeta--x20 {
padding-top: 5rem;
padding-bottom: 5rem;
}ZetaSpacing.squish(child, size: ZetaSpacing.x20) - $spacing.zeta.inline.x20
Adds 5rem left and right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline.spacing-zeta--x20 {
padding-right: 5rem;
padding-left: 5rem;
}ZetaSpacing.inline(child, size: ZetaSpacing.x20) - $spacing.zeta.inline.start.x20
Adds 5rem left paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start.spacing-zeta--x20 {
padding-left: 5rem;
}ZetaSpacing.inline.start(child, size: ZetaSpacing.x20) - $spacing.zeta.inline.end.x20
Adds 5rem right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-end.spacing-zeta--x20 {
padding-right: 5rem;
}ZetaSpacing.inline.end(child, size: ZetaSpacing.x20) - $spacing.zeta.stack.x20
Adds 5rem bottom margin
This is some text inside of a div block..spacing-zeta.spacing-zeta--stack.spacing-zeta--x20 {
margin-bottom: 5rem;
}ZetaSpacing.stack(child, size: ZetaSpacing.x20) - $spacing.zeta.xxl
Adds 5rem either or both margins and paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--xxl {
margin-top: 5rem;
margin-right: 5rem;
margin-bottom: 5rem;
margin-left: 5rem;
padding-top: 5rem;
padding-right: 5rem;
padding-bottom: 5rem;
padding-left: 5rem;
}ZetaSpacing(child, size: ZetaSpacing.xxl) - $spacing.zeta.square.xxl
Adds 5rem paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--square.spacing-zeta--xxl {
padding-top: 5rem;
padding-right: 5rem;
padding-bottom: 5rem;
padding-left: 5rem;
}ZetaSpacing.square(child, size: ZetaSpacing.xxl) - $spacing.zeta.squish.xxl
Adds 5rem top and bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--squish.spacing-zeta--xxl {
padding-top: 5rem;
padding-bottom: 5rem;
}ZetaSpacing.squish(child, size: ZetaSpacing.xxl) - $spacing.zeta.inline.xxl
Adds 5rem left and right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline.spacing-zeta--xxl {
padding-right: 5rem;
padding-left: 5rem;
}ZetaSpacing.inline(child, size: ZetaSpacing.xxl) - $spacing.zeta.inline.start.xxl
Adds 5rem left paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start.spacing-zeta--xxl {
padding-left: 5rem;
}ZetaSpacing.inline.start(child, size: ZetaSpacing.xxl) - $spacing.zeta.inline.end.xxl
Adds 5rem right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-end.spacing-zeta--xxl {
padding-right: 5rem;
}ZetaSpacing.inline.end(child, size: ZetaSpacing.xxl) - $spacing.zeta.stack.xxl
Adds 5rem bottom margin
This is some text inside of a div block..spacing-zeta.spacing-zeta--stack.spacing-zeta--xxl {
margin-bottom: 5rem;
}ZetaSpacing.stack(child, size: ZetaSpacing.xxl) - $spacing.zeta.x24
Adds 6rem either or both margins and paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--x24 {
margin-top: 6rem;
margin-right: 6rem;
margin-bottom: 6rem;
margin-left: 6rem;
padding-top: 6rem;
padding-right: 6rem;
padding-bottom: 6rem;
padding-left: 6rem;
}ZetaSpacing(child, size: ZetaSpacing.x24) - $spacing.zeta.square.x24
Adds 6rem paddings
This is some text inside of a div block.spacing-zeta.spacing-zeta--square.spacing-zeta--x24 {
padding-top: 6rem;
padding-right: 6rem;
padding-bottom: 6rem;
padding-left: 6rem;
}ZetaSpacing.square(child, size: ZetaSpacing.x24) - $spacing.zeta.squish.x24
Adds 6rem top and bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--squish.spacing-zeta--x24 {
padding-top: 6rem;
padding-bottom: 6rem;
}ZetaSpacing.squish(child, size: ZetaSpacing.x24) - $spacing.zeta.inline.x24
Adds 6rem left and right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline.spacing-zeta--x24 {
padding-right: 6rem;
padding-left: 6rem;
}ZetaSpacing.inline(child, size: ZetaSpacing.x24) - $spacing.zeta.inline.start.x24
Adds 6rem left paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start.spacing-zeta--x24 {
padding-left: 6rem;
}ZetaSpacing.inline.start(child, size: ZetaSpacing.x24) - $spacing.zeta.inline.end.x24
Adds 6rem right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-end.spacing-zeta--x24 {
padding-right: 6rem;
}ZetaSpacing.inline.end(child, size: ZetaSpacing.x24) - $spacing.zeta.stack.x24
Adds 6rem bottom margin
This is some text inside of a div block..spacing-zeta.spacing-zeta--stack.spacing-zeta--x24 {
margin-bottom: 6rem;
}ZetaSpacing.stack(child, size: ZetaSpacing.x24) - $spacing.zeta.xxxl
Adds 6rem either or both margins and paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--xxxl {
margin-top: 6rem;
margin-right: 6rem;
margin-bottom: 6rem;
margin-left: 6rem;
padding-top: 6rem;
padding-right: 6rem;
padding-bottom: 6rem;
padding-left: 6rem;
}ZetaSpacing(child, size: ZetaSpacing.xxxl) - $spacing.zeta.square.xxxl
Adds 6rem paddings
This is some text inside of a div block.spacing-zeta.spacing-zeta--square.spacing-zeta--xxxl {
padding-top: 6rem;
padding-right: 6rem;
padding-bottom: 6rem;
padding-left: 6rem;
}ZetaSpacing.square(child, size: ZetaSpacing.xxxl) - $spacing.zeta.squish.xxxl
Adds 6rem top and bottom paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--squish.spacing-zeta--xxxl {
padding-top: 6rem;
padding-bottom: 6rem;
}ZetaSpacing.squish(child, size: ZetaSpacing.xxxl) - $spacing.zeta.inline.xxxl
Adds 6rem left and right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline.spacing-zeta--xxxl {
padding-right: 6rem;
padding-left: 6rem;
}ZetaSpacing.inline(child, size: ZetaSpacing.xxxl) - $spacing.zeta.inline.start.xxxl
Adds 6rem left paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-start.spacing-zeta--xxxl {
padding-left: 6rem;
}ZetaSpacing.inline.start(child, size: ZetaSpacing.xxxl) - $spacing.zeta.inline.end.xxxl
Adds 6rem right paddings
This is some text inside of a div block..spacing-zeta.spacing-zeta--inline-end.spacing-zeta--xxxl {
padding-right: 6rem;
}ZetaSpacing.inline.end(child, size: ZetaSpacing.xxxl) - $spacing.zeta.stack.xxxl
Adds 6rem bottom margin
This is some text inside of a div block..spacing-zeta.spacing-zeta--stack.spacing-zeta--xxxl {
margin-bottom: 6rem;
}ZetaSpacing.stack(child, size: ZetaSpacing.xxxl)
Text
Text tokens can be applied to Tex-Blocks, Headings and Paragraphs. They set the type's font, size, height, leading, colour, spacing and style as well as characters per line. They applied either to a text block, a heading or a paragraph and they also set their responsive sizes.
See also Token naming spreadsheet doc
- $text.zeta
Sets the type's font, size, height, leading, colour, spacing and style as well characters per line. It applies either to a text block, a heading or a paragraph.
Lorem ipsum dolor sit amet.text-zeta {
max-width: 66ch;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-family: IBM Plex Sans;
font-size: 1rem;
line-height: 1rem;
font-weight: 400;
}.text-zeta {
max-width: 66ch;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-family: IBM Plex Sans;
font-size: 1rem;
line-height: 1rem;
font-weight: 400;
}ZetaText('') - $text.zeta.subtle
Sets the type's color to subtle. It applies either to a text block, a heading or a paragraph.
Lorem ipsum dolor sit amettext-zeta.text-zeta--subtle {
color: #545963;
}ZetaText('', textColor: ZetaColors.textColorSubtle) - $text.zeta.300
Sets the type's weight to light. It applies either to a text block, a heading or a paragraph.
Lorem ipsum dolor sit amet.text-zeta.text-zeta--light {
font-weight: 300;
}ZetaText('', fontWeight: FontWeight.w300) - $text.zeta.500
Sets the type's weight to medium. It applies either to a text block, a heading or a paragraph.
Lorem ipsum dolor sit amet.text-zeta.text-zeta--medium {
font-weight: 500;
}ZetaText('', fontWeight: FontWeight.w500) - $text.zeta.italics
Sets the type's italicise. It applies either to a text block, a heading or a paragraph.
Lorem ipsum dolor sit amet.text-zeta.text-zeta--italics {
font-style: italic;
}ZetaText('', fontStyle: FontStyle.italic) - $text.zeta.caps
Sets the type's capitalise. It applies either to a text block, a heading or a paragraph.
Lorem ipsum dolor sit amet.text-zeta.text-zeta--caps {
text-transform: uppercase;
}ZetaText('', uppercase: true) - $text.zeta.underline
Sets the type's underline. It applies either to a text block, a heading or a paragraph.
Lorem ipsum dolor sit amet.text-zeta.text-zeta--underline {
text-decoration: underline;
}ZetaText('', decoration: TextDecoration.underline) - $text.zeta.direction
Reverse's the type's direction. It applies either to a text block, a heading or a paragraph.
.Lorem ipsum dolor sit amet.text-zeta.text-zeta--direction {
direction: rtl;
}ZetaText('', textDirection: TextDirection.rtl) - $text.zeta.first
Sets the type's top padding to 0rem. It applies either to a text block, a heading or a paragraph.
Lorem ipsum dolor sit amet.text-zeta.text-zeta--first {
padding-top: 0rem;
}ZetaText('', first: true) - $text.zeta.last
Sets the type's bottom padding to 0rem. It applies either to a text block, a heading or a paragraph.
Lorem ipsum dolor sit amet.text-zeta.text-zeta--last {
padding-bottom: 0rem;
}ZetaText('', last: true) - $text.zeta.reset
Sets the type's line height value to the same as the type's size. Sets the padding top and bottom to 0rem. It defers depending the type size. It applies either to a text block, a heading or a paragraph.
Lorem ipsum dolor sit amet.text-zeta.text-zeta--reset-height {
padding-top: 0rem;
padding-bottom: 0rem;
line-height: 1rem;
}ZetaText('', resetHeight: true)
Universal sizes
Universal type sizes are the all of our generic type sizes. All type sizes fall under this generic type scale.
- $text.zeta.x3x4
Sets the type's size and height. It applies either to a text block, a heading or a paragraph.
Lorem ipsum dolor sit amet.text-zeta.text-zeta--x3-x4 {
font-size: 0.75rem;
line-height: 1rem;
}ZetaText('', size: ZetaSpacing.x3) - .text-zeta.text-zeta--x3_5-x4
Sets the type's size and height. It applies to a text block. It never changes line height and is forced to be used only on a single line.
Text block.text-zeta.text-zeta--x3_5-x4 {
font-size: 0.875rem;
line-height: 1rem;
}ZetaText('', size: ZetaSpacing.x3_5) - $text.zeta.x4x5
Sets the type's size and height. It applies either to a text block, a heading or a paragraph.
Lorem ipsum dolor sit amet.text-zeta.text-zeta--x4-x5 {
font-size: 1rem;
line-height: 1.25rem;
}ZetaText('', size: ZetaSpacing.x4) - $text.zeta.x5x6
Sets the type's size and height. It applies either to a text block, a heading or a paragraph.
Lorem ipsum dolor sit amet.text-zeta.text-zeta--x5-x6 {
font-size: 1.25rem;
line-height: 1.5rem;
}ZetaText('', size: ZetaSpacing.x5) - $text.zeta.x6x7
Sets the type's size and height. It applies either to a text block, a heading or a paragraph.
Lorem ipsum dolor sit amet.text-zeta.text-zeta--x6-x7 {
font-size: 1.5rem;
line-height: 1.75rem;
}ZetaText('', size: ZetaSpacing.x6) - $text.zeta.x7x8
Sets the type's size and height. It applies either to a text block, a heading or a paragraph.
Lorem ipsum dolor sit amet.text-zeta.text-zeta--x7-x8 {
font-size: 1.75rem;
line-height: 2rem;
}ZetaText('', size: ZetaSpacing.x7) - $text.zeta.x8x9
Sets the type's size and height. It applies either to a text block, a heading or a paragraph.
Lorem ipsum dolor sit amet.text-zeta.text-zeta--x8-x9 {
font-size: 2rem;
line-height: 2.25rem;
}ZetaText('', size: ZetaSpacing.x8) - $text.zeta.x9x10
Sets the type's size and height. It applies either to a text block, a heading or a paragraph.
Lorem ipsum dolor sit amet.text-zeta.text-zeta--x9-x10 {
font-size: 2.25rem;
line-height: 2.5rem;
}ZetaText('', size: ZetaSpacing.x9) - $text.zeta.x10x11
Sets the type's size and height. It applies either to a text block, a heading or a paragraph.
Lorem ipsum dolor sit amet.text-zeta.text-zeta--x10-x11 {
font-size: 2.5rem;
line-height: 2.75rem;
}ZetaText('', size: ZetaSpacing.x10) - $text.zeta.x11x12
Sets the type's size and height. It applies either to a text block, a heading or a paragraph.
Lorem ipsum dolor sit amet.text-zeta.text-zeta--x11-x12 {
font-size: 2.75rem;
line-height: 3rem;
}ZetaText('', size: ZetaSpacing.x11) - $text.zeta.x12x13
Sets the type's size and height. It applies either to a text block, a heading or a paragraph.
Lorem ipsum dolor sit amet.text-zeta.text-zeta--x12-x13 {
font-size: 3rem;
line-height: 3.25rem;
}ZetaText('', size: ZetaSpacing.x12) - $text.zeta.x13x14
Sets the type's size and height. It applies either to a text block, a heading or a paragraph.
Lorem ipsum dolor sit amet.text-zeta.text-zeta--x13-x14 {
font-size: 3.25rem;
line-height: 3.5rem;
}ZetaText('', size: ZetaSpacing.x13)
Dedicated sizes
We mainly use type sizes from the dedicated type scale. The scale is the same as the universal one only the naming is changing to help identify them when building components, UI or content.
- $text.zeta.bodysmall
Sets the type's size and height. It applies either to a text block, or a paragraph. It is used as a paragraph or part of a component.
Text Block: Lorem ipsum dolor sit ametParagraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
.text-zeta.text-zeta--body-small {
font-size: 0.75rem;
line-height: 1rem;
font-weight: 400;
}ZetaText.bodySmall('') - $text.zeta.bodymedium
Sets the type's size, height and weight. It applies either to a text block, or a paragraph. It is used as a paragraph.
Text Block: Lorem ipsum dolor sit ametParagraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
.text-zeta.text-zeta--body-medium {
font-size: 1rem;
line-height: 1.5rem;
font-weight: 400;
}ZetaText.bodyMedium('') - $text.zeta.bodylarge
Sets the type's size, height and weight. It applies either to a text block, or a paragraph. It is used as a paragraph.
Text Block: Lorem ipsum dolor sit ametParagraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
.text-zeta.text-zeta--body-large {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 400;
}ZetaText.bodyLarge('') - $text.zeta.titlesmall
Sets the type's size, height and weight. It applies either to a text block, or a heading 6. It is used as a title, heading or label.
Text Block: Lorem ipsum dolor sit ametHeading 6: Lorem ipsum dolor sit amet
.text-zeta.text-zeta--title-small {
font-size: 0.75rem;
line-height: 1rem;
font-weight: 500;
}ZetaText.titleSmall('') - $text.zeta.titlemedium
Sets the type's size, height and weight. It applies either to a text block, or a heading 5. It is used as a title, heading or label.
Text Block: Lorem ipsum dolor sit ametHeading 5: Lorem ipsum dolor sit amet
.text-zeta.text-zeta--title-medium {
font-size: 1rem;
line-height: 1.25rem;
font-weight: 500;
}ZetaText.titleMedium('') - $text.zeta.titlelarge
Sets the type's size, height and weight. It applies either to a text block, or a heading 4. It is used as a title, heading or label.
Text Block: Lorem ipsum dolor sit ametHeading 4: Lorem ipsum dolor sit amet
.text-zeta.text-zeta--title-large {
font-size: 1.25rem;
line-height: 1.5rem;
font-weight: 500;
}ZetaText.titleLarge('') - $text.zeta.headingsmall
Sets the type's size, height and weight. It applies either to a text block, or a heading 3. It is used as a heading and it is responsive.
Text Block: Lorem ipsum dolor sit ametHeading 3: Lorem ipsum dolor sit amet
.text-zeta.text-zeta--heading-small {
font-size: 1.5rem;
line-height: 1.75rem;
font-weight: 500;
}.text-zeta.text-zeta--heading-small:small {
font-size: 1.25rem;
line-height: 1.5rem;
}ZetaText.headingSmall('') - $text.zeta.headingmedium
Sets the type's size, height and weight. It applies either to a text block, or a heading 2. It is used as a heading and it is responsve.
Text Block: Lorem ipsum dolor sit ametHeading 2: Lorem ipsum dolor sit amet
.text-zeta.text-zeta--heading-medium {
font-size: 1.75rem;
line-height: 2rem;
font-weight: 500;
}.text-zeta.text-zeta--heading-medium:small {
font-size: 1.5rem;
line-height: 1.75rem;
}ZetaText.headingMedium('') - $text.zeta.headinglarge
Sets the type's size, height and weight. It applies either to a text block, or a heading 1. It is used as a heading and it is responsive
Text Block: Lorem ipsum dolor sit ametHeading 2: Lorem ipsum dolor sit amet
.text-zeta.text-zeta--heading-large {
font-size: 2rem;
line-height: 2.25rem;
font-weight: 500;
}.text-zeta.text-zeta--heading-large:small {
font-size: 1.75rem;
line-height: 2rem;
}ZetaText.headingLarge('') - $text.zeta.displaysmall
Sets the type's size, height and weight. It applies either to a text block, or a heading 3. It is used as a section title and it is responsive.
Text Block: Lorem ipsum dolor sit ametHeading 3: Lorem ipsum dolor sit amet
.text-zeta.text-zeta--display-small {
font-size: 2.25rem;
line-height: 2.5rem;
font-weight: 300;
}.text-zeta.text-zeta--display-small:small {
font-size: 2rem;
line-height: 2.25rem;
}ZetaText.displaySmall('') - $text.zeta.displaymedium
Sets the type's size, height and weight. It applies either to a text block, or a heading 2. It is used as a section title and it is responsive.
Text Block: Lorem ipsum dolor sit ametHeading 2: Lorem ipsum dolor sit amet
.text-zeta.text-zeta--display-medium {
font-size: 2.75rem;
line-height: 3rem;
font-weight: 300;
}.text-zeta.text-zeta--display-medium:small {
font-size: 2.25rem;
line-height: 2.5rem;
}ZetaText.displayMedium('') - $text.zeta.displaylarge
Sets the type's size, height and weight. It applies either to a text block, or a heading 1. It is used as an intro section title and it is responsive.
Text Block: Lorem ipsum dolor sit ametHeading 1: Lorem ipsum dolor sit amet
.text-zeta.text-zeta--display-large {
font-size: 3.25rem;
line-height: 3.5rem;
font-weight: 300;
}.text-zeta.text-zeta--display-large:small {
font-size: 2.75rem;
line-height: 3rem;
}ZetaText.displayLarge('')