Skip to main content

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.