Developers - CSS Layout System
Properties
Section requires a few CSS Custom Properties to function properly.
You can grab a sample setup-file here:
<link href="https://cdn.perfection.dev/layouts/layout.props.css" rel="stylesheet" />
Replace the required properties with the values from your site’s design.
Required Properties
Spacing Units
| Property | Description |
|---|---|
--section-page-gap | Gap between outer-sections |
--section-gap | Gap between inner-sections within a outer-section |
--section-col-gap | Column-gap within a inner-section |
--section-row-gap | Row-gap within a inner-section |
Widths
| Property | Description |
|---|---|
--section-w-xxs | XXS, default: 240px |
--section-w-xs | XS, default: 360px |
--section-w-sm | SM, default: 480px |
--section-w-md | MD, default: 768px |
--section-w-lg | LG, default: 1024px |
--section-w-xl | XL, default: 1440px |
--section-w-xxl | XXL, default: 1920px |
Optional Properties
Utility Units
| Property | Description |
|---|---|
--section-margin-unit | Margin-unit, used in utility-modifiers |
--section-padding-unit | Padding-unit, used in utility-modifiers |
Focus
| Property | Description |
|---|---|
--section-focus-olc | Outline color |
--section-focus-olo | Outline offset |
--section-focus-ols | Outline style |
--section-focus-ow | Outline width |
Scrollbar
| Property | Description |
|---|---|
--section-scroll-gap | Gap between the scrollbar and it’s inner-section |
--section-scroll-thumb-bdrs | border-radius of the draggable part of a scrollbar |
--section-scroll-track-bdrs | border-radius of a scrollbar-track |
--section-scroll-w | Width of a scrollbar |
Slider
If you're using one of our slider-templates, you can fine-tune their appearance by updating these values:
| Property | Description |
|---|---|
--slider-time | Unit-less, read by JavaScript. Time between slides when autoplay is used |
--slider-nav-gutter | Sets the amount of space between the slider and the navigation buttons |
--slider-nav-h | Sets the height of the navigation buttons |
--slider-nav-ico-bdw | Sets the border width of the navigation buttons' icons |
--slider-nav-ico-sz | Sets the size of the navigation buttons' icons |
--slider-nav-w | Sets the width of the navigation buttons |
--slider-nav-z | Sets the z-index of the navigation buttons |
--slider-pg-gap | Sets the amount of space between the slider and the pagination buttons |
--slider-pg-h | Sets the height of the pagination buttons |
--slider-pg-w | Sets the width of the pagination buttons |
--slider-pg-z | Sets the z-index of the pagination buttons |
--slider-tx-c | Sets the color of the text |
--slider-tx-lh | Sets the line height of the text |
--slider-tx-sz | Sets the size of the text |
Tabs
If you're using one of our tabs-templates, you can fine-tune their appearance by updating these values:
| Property | Description |
|---|---|
--section-tabs-active-bdc | The border color of the active tab. |
--section-tabs-active-bdw | The border width of the active tab. |
--section-tabs-active-bg | The background color of the active tab. |
--section-tabs-active-c | The text color of the active tab. |
--section-tabs-bdc | The border color of the tab. |
--section-tabs-bg-hover | The background color of the tab when hovered. |
--section-tabs-bdc-hover | The border color of the tab when hovered. |
--section-tabs-bar-bdc | The border color of the bar. |
--section-tabs-bar-bdrs | The border radius of the bar. |
--section-tabs-bar-bdw | The border width of the bar. |
--section-tabs-bar-p | The padding of the bar. |
--section-tabs-line-p | The padding of the line. |
--section-tabs-pill-bdrs | The border radius of the pill. |
--section-tabs-pill-p | The padding of the pill. |
Internal Properties
Internal properties are the ones we're using within Section to control "number of columns", "grid-column-span" and much more. Our internal properties are prefixed with a underscore, to indicate that they're "private", but you are of course welcome to update them from your own CSS.
In fact, if you want to write your own template, you have to use them.
| Property | Description | Applies to |
|---|---|---|
--_c | number of columns | inner-section |
--_ce | grid-column-end | content |
--_cg | column-gap† | inner-section |
--_cs | grid-column-start | content |
--_mis | max-inline-size | inner-section |
--_pg | page-gap† | section-wrapper, outer-section |
--_pi | padding-inline | inner-section |
--_re | grid-row-end | content |
--_rg | row-gap† | inner-section |
--_rs | grid-row-start | content |
--_sg | section-gap† | outer-section |
--_w | calculated width | content |
† Indicates that the property is a multiplier, and used to multiply the corresponding public property, such as --section-gap.
Internal properties used in utilities
| Property | Description | Applies to |
|---|---|---|
--_ac | align-content | any element |
--_jc | justify-content | any element |
--_ji | justify-items | any element |
--_js | justify-self | any element |
--_pbe | padding-block-end† | any element |
--_pbs | padding-block-start† | any element |
--_pie | padding-inline-end† | any element |
--_pis | padding-inline-start† | any element |
--_ta | text-align | any element |
† Indicates that the property is a multiplier, and used to multiply the corresponding public property, such as --section-padding-unit.