Skip Navigation

Photo by Pierre Bamin  on Unsplash

Customization

Distinguish yourself without starting from scratch.

There are two ways to customize Natura11y. The CDN Stylesheet allows you to redefine styles. We'll cover this method in the following section. Your other option is to set up a modern development environment.

Customizable CDN

Our Quick Start guide shows you how to include the framework's core stylesheet via CDN. Within the framework, we use CSS custom properties to declare styles. People often refer to CSS custom properties as CSS variables. We use this term throughout our documentation.

If you're not familiar with CSS variables, take time now to read the MDN web docs. Figure 1 (below) offers a simple example of using a SASS variable and a CSS Variable to achieve the same result.

/* Primary as a SASS Variable: */

$primary: navy;

.selector--primary{
    background-color: $primary
}

// Primary as a CSS Variable:

--primary: navy;

.selector--primary{
    background-color: var(--primary);
}
Figure 1

CSS variables provide benefits that Sass variables do not. Did you know CSS variables update at runtime? You can declare new values from natura11y.css anytime after that stylesheet reference.

There are different ways to declare new values for CSS variables. Adding a style tag in the header is ideal for prototyping and exploring. Creating a second stylesheet is the preferred method. You can even redeclare values using JavaScript.

In the following exercise, learn how to change your theme colors with a second stylesheet.

Practice Exercise: Customizing Colors

Make new directory somewhere on your computer. Call it color-example. Copy and paste the markup from Figure 2 (below) into a new HTML document. Save this document as index.html inside of the color-example directory.

<!DOCTYPE html>

<html lang="en" dir="ltr">

    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <title>Color Example • Natura11y</title>

        <!-- Natura11y Icons -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cavidano/natura11y-icons@main/dist/natura11y-icons.min.css">

        <!-- Natura11y Stylesheet -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cavidano/natura11y@1.2/dist/css/natura11y.min.css">

    </head>

    <body>

        <main class="overflow-hidden" id="skip-header-content">

            <div class="container narrow margin-y-5">

                <div class="theme-primary padding-3 margin-y-2">
                    <p>Primary</p>
                </div>
                <div class="theme-secondary padding-3 margin-y-2">
                    <p>Secondary</p>
                </div>
                <div class="theme-dark padding-3 margin-y-2">
                    <p>Dark</p>
                </div>
                <div class="theme-light padding-3 margin-y-2">
                    <p>Light</p>
                </div>

            </div>

        </main>

        <!-- Natura11y Javascript -->
        <script src="https://cdn.jsdelivr.net/gh/cavidano/natura11y@main/dist/js/natura11y.js"></script>

    </body>

</html>
Figure 2

Preview index.html in a browser. It should resemble the following.

Primary

Secondary

Dark

Light

Declared as CSS variables in natura11y.css, we have four colors. They are Primary, Secondary, Dark, and Light. Let's customize their color values with a second stylesheet.

Within the color-example directory, create a new directory called css. Make a new CSS file and name it new-colors.css. Save it into the /css directory.

Open your HTML document. Add a link to new-colors.css somewhere below natura11y.css (Figure 3, line 5).

<!-- Natura11y Stylesheet -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cavidano/natura11y@main/dist/css/natura11y.css">

<!-- Custom Theme Properties -->
<link rel="stylesheet" href="./css/new-colors.css">
Figure 3

With new-colors.css open, include the CSS from Figure 4. Save this file and refresh your browser.

:root {
    --primary: #440381;
    --secondary: #ffcc66;
    --dark: #1f163f;
    --light: #ede7e2;
    --primary-text: white;
    --secondary-text: var(--dark);
}
Figure 4

Primary

Secondary

Dark

Light

Did your colors update to the new palette? With your new stylesheet in place, you have the ability to customize much more than just colors. In fact, you have full control over your design.

Reference Guide: CSS Variables

CSS Variables are hierarchal, or scoped. A variable's scope determines its reach throughout the DOM tree.

All CSS Variables in the framework are either scoped to the document or to a block. Document scoped variables use the :root psuedo selector (available to the entire page). Block scoped variables use their selector class (e.g., .card). These variables are available only to their selector (Figure 5).

/* Scoped to the root */

:root {
    --primary: #0080f8;
}

/* Scoped to a parent selector */

.card {
    --card-padding-y: 1em;
}
Figure 5

The following table accounts for all CSS variables with Natura11y. Pay close attention to scope of each set of variables (noted under each header in the table).

When declaring new values within your own CSS, be sure their scopes match.

AccordionsDocs

Variable scope: .accordion

CSS VariableDefault ValueDescription
--accordion-button-padding-xvar(--spacer-3)

Left and right padding of the accordion component button

--accordion-button-padding-yvar(--spacer-3)

Top and bottom padding of the accordion component button

--accordion-panel-padding-xvar(--spacer-3)

Left and right padding of the accordion component panel

--accordion-panel-padding-yvar(--spacer-3)

Top and bottom padding of the accordion component panel

--accordion-active-colorcurrentColor

Color of active accordion component button

AlertsDocs

Variable scope: .alert

CSS VariableDefault ValueDescription
--alert-padding-xvar(--spacer-2)

Left and right padding of the alert component header and body

--alert-padding-yvar(--spacer-2)

Top and bottom padding of the alert component header and body

ArticlesDocs

Variable scope: .article--column-{x}

CSS VariableDefault ValueDescription
--article-sidebar-width260px

Width of the article component sidebar

BackdropsDocs

Variable scope: .backdrop

CSS VariableDefault ValueDescription
--backdrop-fixed-height400px

Height of the backdrop component with the fixed height modifier class

BordersDocs

Variable scope: :root

CSS VariableDefault ValueDescription
--default-border-width1px

Width of all borders applied across your stylesheet

--default-border-stylesolid

Style of all borders applied across your stylesheet

--border-radius0.5em

Border radius of the border-radius utility classes

ButtonsDocs

Variable scope: :root

CSS VariableDefault ValueDescription
--button-padding-x1em

Left and right padding of the button utility class

--button-padding-y0.75em

Top and bottom padding of the button utility class

--button-font-weightvar(--body-font-weight-bold)

Weight of text elements within the button utility class

--button-text-transforminitial

Text transform of text elements within the button utility class

--button-letter-spacingnormal

Letter spacing of text elements within the button utility class

--button-text-transforminitial

Text transform value of the button utility class

--button-border-radius0.25em

Default Border radius of all button selectors

--button-outline-border-widthcalc( var(--default-border-width) * 2)

Border width of the button outline modifier class

--button-icon-only-size2.25em

Width and height of the button icon only modifier class

CardsDocs

Variable scope: .card

CSS VariableDefault ValueDescription
--card-padding-xvar(--spacer-2)

Left and right padding of the card component header, body, and footer

--card-padding-yvar(--spacer-2)

Top and bottom padding of the card component header, body, and footer

ColorDocs

Variable scope: :root

CSS VariableDefault ValueDescription
--primary#1E00B3

The primary color applied within the theme and color utility classes

--primary-textwhite

Color of text elements within the primary theme utility class

--primary-borderhsla(0, 0%, 0%, 0.25);

Color of borders within the primary theme utility class

--primary-linkcurrentColor

Color of links within the primary theme utility class

--primary-confirmcurrentColor

Color of confirmation alerts within the primary theme utility class

--primary-warncurrentColor

Color of warning alerts within the primary theme utility class

--secondary#64cc7e

The secondary color applied within the theme and color utility classes

--secondary-textvar(--dark)

Color of text elements within the secondary theme utility class

--secondary-borderhsla(0, 0%, 0%, 0.25)

Color of borders within the secondary theme utility class

--secondary-linkcurrentColor

Color of links within the secondary theme utility class

--secondary-confirmcurrentColor

Color of confirmation alerts within the secondary theme utility class

--secondary-warncurrentColor

Color of warning alerts within the secondary theme utility class

--dark#191b35

The dark color applied within the theme and color utility classes

--dark-textcurrentColor

Color of text elements within the dark theme utility class

--dark-bordercurrentColor

Color of borders within the dark theme utility class

--dark-linkcurrentColor

Color of links within the dark theme utility class

--dark-confirmcurrentColor

Color of confirmation alerts within the dark theme utility class

--dark-warncurrentColor

Color of warning alerts within the dark theme utility class

--light#191b35

The light color applied within the theme and color utility classes

--light-textvar(--dark)

Color of text elements within the light theme utility class

--light-borderhsla(0, 0%, 50%, 0.25)

Color of borders within the light theme utility class

--light-linkvar(--a11y-link)

Color of links within the light theme utility class

--light-confirm#007e35

Color of confirmation alerts within the light theme utility class

--light-warn#ce1736

Color of warning alerts within the light theme utility class

--canvas-textvar(--dark)

Color of text elements within the canvas theme (default) utility class

--canvas-borderhsla(0, 0%, 50%, 0.25)

Color of borders within the canvas theme (default) utility class

--canvas-linkvar(--a11y-link)

Color of links within the canvas theme (default) utility class

--canvas-confirm#008237

Color of confirmation alerts within the canvas theme (default) utility class

--canvas-warn#e4193c

Color of warning alerts within the canvas theme (default) utility class

--a11y-linkblue

Accessible link color applied to links within canvas and light themes

ContainersDocs

Variable scope: :root

CSS VariableDefault ValueDescription
--container-padding-x-smvar(--spacer-2)

Left and right padding of the container component on smaller (mobile) viewports

--container-padding-x-lgvar(--spacer-3)

Left and right padding of the container component on larger (desktop) viewports

--narrow-width40rem

Maximum width of the narrow utility class

--medium-widthcalc( var(--narrow-width) * 1.75)

Maximum width of the medium utility class

--wide-widthcalc( var(--narrow-width) * 2.5)

Maximum width of the wide utility class

DocumentDocs

Variable scope: html

CSS VariableDefault ValueDescription
--body-min-width325px

Minimum width of the body element

--body-max-width100%

Maximum width of the body element

--html-background-colorvar(--canvas)

Background color of the html element

FormsDocs

Variable scope: :root

CSS VariableDefault ValueDescription
--form-field-padding-xvar(--spacer-3)

Left and right padding of certain form entry elements

--form-field-padding-yvar(--button-padding-y)

Top and bottom padding of certain form entry elements

--form-field-border-radius0.25em

Maximum width of the medium utility class

GridsDocs

Variable scope: .grid--divider

CSS VariableDefault ValueDescription
--grid-divider-gapvar(--spacer-3)

Default total gap size of the grid divider selector

--grid-divider-border-widthvar(--default-border-width)

Width of centered border between grid divider gap

--grid-divider-border-x-colorvar(--canvas-border)

Color of centered border along the horizontal axis of the grid divider selector

--grid-divider-border-y-colorvar(--canvas-border)

Color of centered border along the vertical axis of the grid--divider selector

Gradient VeneerDocs

Variable scope: .gradient-veneer-{x}

CSS VariableDefault ValueDescription
--gradient-veneer-start50%

Gradient's starting position (relative to its direction) of the gradient veneer utilities

--gradient-veneer-opacity1

Opacity of the gradient utility class within the gradient veneer utilities

ModalDocs

Variable scope: .modal

CSS VariableDefault ValueDescription
--modal-padding-xvar(--spacer-2)

Left and right padding of the modal component header, body, and footer

--modal-padding-yvar(--spacer-2)

Top and bottom padding of the modal component header, body, and footer

--modal-overlay-opacity0.8

Opacity of the modal overlay

--modal-z-index8000

Z-index value of the entire modal component

NavigationDocs

Variable scope: :root

CSS VariableDefault ValueDescription
--nav-gap0.75em

Size of spacer 1, used in CSS including margin and padding utility classes

--nav-divider-padding-y0.625em

Size of spacer 2, used in CSS including margin and padding utility classes

--nav-divider-padding-xvar(--spacer-3)

Size of spacer 3, used in CSS including margin and padding utility classes

--primary-nav-padding-xvar(--spacer-3)

Size of spacer 4, used in CSS including margin and padding utility classes

--primary-nav-padding-yvar(--spacer-2)

Size of spacer 5, used in CSS including margin and padding utility classes

--primary-nav-search-width200px

Size of spacer 5, used in CSS including margin and padding utility classes

SpacingDocs

Variable scope: :root

CSS VariableDefault ValueDescription
--spacer-base1rem

Size of base spacer value, used in multiplying the five spacer values

--spacer-1calc(var(--spacer-base) * 0.5)

Size of spacer 1, used in CSS including margin and padding utility classes

--spacer-2calc(var(--spacer-base) * 1)

Size of spacer 2, used in CSS including margin and padding utility classes

--spacer-3calc(var(--spacer-base) * 1.5)

Size of spacer 3, used in CSS including margin and padding utility classes

--spacer-4calc(var(--spacer-base) * 2.5)

Size of spacer 4, used in CSS including margin and padding utility classes

--spacer-5calc(var(--spacer-base) * 4)

Size of spacer 5, used in CSS including margin and padding utility classes

--spacer-6calc(var(--spacer-base) * 6.5)

Size of spacer 6, used in CSS including margin and padding utility classes

Subtle FillDocs

Variable scope: :root

CSS VariableDefault ValueDescription
--subtle-fill-opacity0.075

Opacity of the subtle fill when used globally

TablesDocs

Variable scope: .table

CSS VariableDefault ValueDescription
--table-cell-padding-xvar(--spacer-3)

Left and right padding of the table cells

--table-cell-padding-y0.75em

Top and bottom padding of the table cells

--table-scroll-min-width800px

Minimum width of the table within the table scroll component

TypographyDocs

Variable scope: :root

CSS VariableDefault ValueDescription
--body-font-familySource Sans Pro

Font family applied to the entire document

--body-font-weight-normal400

Numeric font weight value for normal fonts

--body-font-weight-medium600

Numeric font weight value for medium fonts

--body-font-weight-bold700

Numeric font weight value for bold fonts

--body-font-size22px

Base font size applied to the entire document

--body-line-height1.5

Line height applied to the entire document (excluding headers)

--font-size-smcalc(var(--body-font-size) * 0.7)

Small font size used in CSS including font size utility classes

--font-size-mdcalc(var(--body-font-size) * 0.8)

Medium font size used in CSS including font size utility classes

--font-size-lgcalc(var(--body-font-size) * 1)

Large font size used in CSS including font size utility classes

--font-size-xlcalc(var(--body-font-size) * 1.4)

Extra large font size used in CSS including font size utility classes

--h1-font-sizecalc(var(--body-font-size) * 3)

Font size of Section Header Level 1

--h2-font-sizecalc(var(--body-font-size) * 2.2)

Font size of Section Header Level 2

--h3-font-sizecalc(var(--body-font-size) * 1.8)

Font size of Section Header Level 3

--h4-font-sizecalc(var(--body-font-size) * 1.6)

Font size of Section Header Level 4

--h5-font-sizecalc(var(--body-font-size) * 1.4)

Font size of Section Header Level 5

--h6-font-sizecalc(var(--body-font-size) * 1.2)

Font size of Section Header Level 6

--header-line-height1.125

Line height applied to headers

--banner-headline-font-size-smcalc(var(--body-font-size) * 2.75)

Font size of the Banner Headline utility class on smaller (mobile) viewports

--banner-headline-font-size-lgcalc(var(--body-font-size) * 2.75)

Font size of the Banner Headline utility class on larger (desktop) viewports

--paragraph-margin-bottom1.25em

Bottom margin set to paragraphs

Accessibility