Developers - CSS Layout System
Spacing
Page Gaps
The row-spacing between <outer-section>
s (or DOM-nodes with a .sc-outer
-class) is defined in the CSS property --section-page-gap
(see Properties). By default, spacing is set to "one unit", that is:
1 * var(--section-page-gap)
To update/change the gap, we provide multipliers from 0 to 8, either as micro-classes or a custom attribute.
Micro-classes
sc-pg-0
sc-pg-1
sc-pg-2
sc-pg-3
sc-pg-4
sc-pg-5
sc-pg-6
sc-pg-7
sc-pg-8
Custom attribute: page-gap
page-gap="0"
page-gap="1"
page-gap="2"
page-gap="3"
page-gap="4"
page-gap="5"
page-gap="6"
page-gap="7"
page-gap="8"
Both methods simply update an internal property, --_pg
with a unit between 0 and 8, and are added to either <section-wrapper>
or a DOM-node with a .sc-main
-class.
The spacing is uniform between outer-sections within a wrapper, using either of these methods.
If you seek individual, different gaps between outer-sections, set the smallest spacing on the main wrapper, for instance:
<section-wrapper page-gap="1">...</section-wrapper>
or
<div class="sc-main sc-pg-1">...</div>
Then, on a outer-section, set the desired gap minus the gap set on the wrapper.
Example, set a gap after a outer-section to 3:
<section-wrapper page-gap="1">
<outer-section page-gap="2">...</outer-section>
<outer-section>...</outer-section>
</section-wrapper>
Or
<div class="sc-main sc-pg-1">
<div class="sc-outer sc-pg-2">...</div>
<div class="sc-outer">...</div>
</div>
Section Gaps
The row-spacing between <inner-section>
s (or DOM-nodes with a .sc-inner
-class) is defined in the CSS property --section-gap
(see Properties). By default, spacing is set to "one unit", that is:
1 * var(--section-gap)
To update/change the gap, we provide multipliers from 0 to 8, either as micro-classes or a custom attribute.
Micro-classes
sc-sg-0
sc-sg-1
sc-sg-2
sc-sg-3
sc-sg-4
sc-sg-5
sc-sg-6
sc-sg-7
sc-sg-8
Custom attribute: section-gap
section-gap="0"
section-gap="1"
section-gap="2"
section-gap="3"
section-gap="4"
section-gap="5"
section-gap="6"
section-gap="7"
section-gap="8"
Both methods simply update an internal property, --_sg
with a unit between 0 and 8, and are added to either <outer-section>
or a DOM-node with a .sc-outer
-class.
The spacing is uniform between inner-sections within a outer-section, using either of these methods.
If you seek individual, different gaps between inner-sections, set the smallest spacing on the outer-section, for instance:
<outer-section section-gap="1">...</outer-section>
Or
<div class="sc-outer sc-sg-1">...</div>
Then, on a inner-section, set the desired gap minus the gap set on the outer-section.
Example, set a gap after a inner-section to 3:
<outer-section section-gap="1">
<inner-section section-gap="2">...</inner-section>
<inner-section>...</inner-section>
</outer-section>
Or
<div class="sc-outer sc-sg-1">
<div class="sc-inner sc-sg-2">...</div>
<div class="sc-inner">...</div>
</section-wrapper>
Column- and Row-gaps within a inner-section
The column- and row- spacing within a <inner-section>
s (or DOM-nodes with a .sc-inner
-class) are defined in the CSS properties --section-column-gap
and --section-row-gap
(see Section Properties). By default, spacing is set to "one unit", that is:
1 * var(--section-column-gap)
To update/change the gap, we provide multipliers from 0 to 8, either as micro-classes or a custom attribute.
Micro-classes: Column Gaps
sc-cg-0
sc-cg-1
sc-cg-2
sc-cg-3
sc-cg-4
sc-cg-5
sc-cg-6
sc-cg-7
sc-cg-8
Custom attribute: col-gap
col-gap="0"
col-gap="1"
col-gap="2"
col-gap="3"
col-gap="4"
col-gap="5"
col-gap="6"
col-gap="7"
col-gap="8"
Micro-classes: Row Gaps
sc-rg-0
sc-rg-1
sc-rg-2
sc-rg-3
sc-rg-4
sc-rg-5
sc-rg-6
sc-rg-7
sc-rg-8
Custom attribute: row-gap
row-gap="0"
row-gap="1"
row-gap="2"
row-gap="3"
row-gap="4"
row-gap="5"
row-gap="6"
row-gap="7"
row-gap="8"
Both methods simply update internal properties, --_cg
and --_rg
with a unit between 0 and 8, and are added to either <inner-section>
or a DOM-node with a .sc-inner
-class.
The spacing is uniform within inner-sections, and cannot — for the time — be set to individual values, as we have no control of the content within a inner-section.
If you need to fine-control this, set the col- and row-gaps to 0 (zero):
<inner-section
col-gap="0"
row-gap="0"
>...</inner-section
>
Or
<div class="sc-inner sc-cg-0 sc-rg-0">...</div>
Then, use our utility-classes on individual content-items.