Customization • Natura11y

There is a newer version of Naturally.

Cool Image

Photo by Pierre Bamin

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 modern development environment.


Customizable CDN

The Quick Start guide shows how to include the framework's core stylesheet via CDN. Natura11y's CSS uses CSS variables, making customization a breeze.

CSS variables update at runtime. For this reason, you can declare new values from natura11y.css anytime after that stylesheet reference.

There are different ways to declare new values for CSS variables.

  1. Adding a style tag in the header is ideal for prototyping and exploring.
  2. Creating a second stylesheet is the preferred method.
  3. 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/npm/natura11y-icons@v1/dist/natura11y-icons.min.css">

                <!-- Natura11y Stylesheet -->
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/natura11y@v3/dist/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.

Practice Exercise • Color

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

Practice Exercise • Color

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

All CSS Variables in Natura11y are scoped to :root (document). Document scoped variables use the :root psuedo selector, available to the entire page (Figure 5).


        /* Scoped to the root */
        
        :root {
            --primary: #0080f8;
        }
    
Figure 5

The following table accounts for all CSS variables with Natura11y.

Scroll to see whole table

Accordion

Docs
Table of all custom properties.
VariableDescription

Name:--accordion-button-padding-x

Value:var(--spacer-3)

Left and right padding of the accordion component button

Name:--accordion-button-padding-y

Value:var(--button-padding-y)

Top and bottom padding of the accordion component button

Name:--accordion-panel-padding-x

Value:var(--spacer-3)

Left and right padding of the accordion component panel

Name:--accordion-panel-padding-y

Value:var(--spacer-3)

Top and bottom padding of the accordion component panel

Name:--accordion-active-color

Value:currentColor

Color of active accordion component button

Name:--accordion-animation

Value:0.2s ease-out

Animation of accordion component open and close action

Alert

Docs
Table of all custom properties.
VariableDescription

Name:--alert-padding-x

Value:var(--spacer-2)

Left and right padding of the alert component header and body

Name:--alert-padding-y

Value:var(--spacer-2)

Top and bottom padding of the alert component header and body

Article

Docs
Table of all custom properties.
VariableDescription

Name:--article-sidebar-width

Value:280px

Width of the article component sidebar

Assistive

Table of all custom properties.
VariableDescription

Name:--focus-outline-size

Value:calc(var(--border-width) * 2)

Size of the focus outline for buttons and links

Name:--focus-outline-color

Value:currentColor

Color of the focus outline for buttons and links

Name:--focus-outline-style

Value:solid

Style of the focus outline for buttons and links

Backdrop

Docs
Table of all custom properties.
VariableDescription

Name:--backdrop-fixed-height

Value:400px

Height of the backdrop component with the fixed height modifier class

Border

Docs
Table of all custom properties.
VariableDescription

Name:--border-width

Value:1px

Width of all borders applied across your stylesheet

Name:--border-style

Value:solid

Style of all borders applied across your stylesheet

Name:--border-radius

Value:0.25em

Border radius of the border-radius utility classes

Button

Docs
Table of all custom properties.
VariableDescription

Name:--button-padding-x

Value:1em

Left and right padding of the button utility class

Name:--button-padding-y

Value:0.75em

Top and bottom padding of the button utility class

Name:--button-font-weight

Value:var(--font-weight-bold)

Weight of text elements within the button utility class

Name:--button-text-transform

Value:initial

Text transform of text elements within the button utility class

Name:--button-letter-spacing

Value:normal

Letter spacing of text elements within the button utility class

Name:--button-text-transform

Value:initial

Text transform value of the button utility class

Name:--button-border-radius

Value:0.25em

Default Border radius of all button selectors

Name:--button-outline-border-width

Value:calc( var(--border-width) * 2)

Border width of the button outline modifier class

Name:--button-icon-only-size

Value:0.5em

Width and height of the button icon only modifier class

Card

Docs
Table of all custom properties.
VariableDescription

Name:--card-padding-x

Value:var(--spacer-3)

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

Name:--card-padding-y

Value:var(--spacer-3)

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

Color

Docs
Table of all custom properties.
VariableDescription

Name:--primary

Value:#1E00B3

The primary color applied within the theme and color utility classes

Name:--primary-text

Value:white

Color of text elements within the primary theme utility class

Name:--primary-border

Value:hsla(0, 0%, 0%, 0.25);

Color of borders within the primary theme utility class

Name:--primary-link

Value:currentColor

Color of links within the primary theme utility class

Name:--primary-confirm

Value:currentColor

Color of confirmation alerts within the primary theme utility class

Name:--primary-warn

Value:currentColor

Color of warning alerts within the primary theme utility class

Name:--secondary

Value:#64cc7e

The secondary color applied within the theme and color utility classes

Name:--secondary-text

Value:var(--dark)

Color of text elements within the secondary theme utility class

Name:--secondary-border

Value:hsla(0, 0%, 0%, 0.25)

Color of borders within the secondary theme utility class

Name:--secondary-link

Value:currentColor

Color of links within the secondary theme utility class

Name:--secondary-confirm

Value:currentColor

Color of confirmation alerts within the secondary theme utility class

Name:--secondary-warn

Value:currentColor

Color of warning alerts within the secondary theme utility class

Name:--dark

Value:#191b35

The dark color applied within the theme and color utility classes

Name:--dark-text

Value:currentColor

Color of text elements within the dark theme utility class

Name:--dark-border

Value:currentColor

Color of borders within the dark theme utility class

Name:--dark-link

Value:currentColor

Color of links within the dark theme utility class

Name:--dark-confirm

Value:currentColor

Color of confirmation alerts within the dark theme utility class

Name:--dark-warn

Value:currentColor

Color of warning alerts within the dark theme utility class

Name:--light

Value:#191b35

The light color applied within the theme and color utility classes

Name:--light-text

Value:var(--dark)

Color of text elements within the light theme utility class

Name:--light-border

Value:hsla(0, 0%, 50%, 0.25)

Color of borders within the light theme utility class

Name:--light-link

Value:var(--a11y-link)

Color of links within the light theme utility class

Name:--light-confirm

Value:#007e35

Color of confirmation alerts within the light theme utility class

Name:--light-warn

Value:#ce1736

Color of warning alerts within the light theme utility class

Name:--canvas-text

Value:var(--dark)

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

Name:--canvas-border

Value:hsla(0, 0%, 50%, 0.25)

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

Name:--canvas-link

Value:var(--a11y-link)

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

Name:--canvas-confirm

Value:#008237

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

Name:--canvas-warn

Value:#e4193c

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

Container

Docs
Table of all custom properties.
VariableDescription

Name:--container-padding-x-sm

Value:var(--spacer-2)

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

Name:--container-padding-x-lg

Value:var(--spacer-3)

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

Name:--narrow-width

Value:40rem

Maximum width of the narrow utility class

Name:--medium-width

Value:calc( var(--narrow-width) * 1.75)

Maximum width of the medium utility class

Name:--wide-width

Value:calc( var(--narrow-width) * 2.5)

Maximum width of the wide utility class

Document

Docs
Table of all custom properties.
VariableDescription

Name:--body-min-width

Value:325px

Minimum width of the body element

Name:--body-max-width

Value:100%

Maximum width of the body element

Name:--html-background-color

Value:var(--canvas)

Background color of the html element

Name:--html-scroll-behavior

Value:smooth

Scroll behavior of the html element

Form

Docs
Table of all custom properties.
VariableDescription

Name:--form-field-padding-x

Value:var(--spacer-3)

Left and right padding of certain form entry elements

Name:--form-field-padding-y

Value:var(--button-padding-y)

Top and bottom padding of certain form entry elements

Name:--form-field-border-radius

Value:0.25em

Maximum width of the medium utility class

Name:--form-field-border-color

Value:currentColor

Border color of all form fields

Grid

Docs
Table of all custom properties.
VariableDescription

Name:--grid-divider-gap

Value:var(--spacer-3)

Default total gap size of the grid divider selector

Name:--grid-divider-border-width

Value:var(--border-width)

Width of centered border between grid divider gap

Name:--grid-divider-border-x-color

Value:var(--canvas-border)

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

Name:--grid-divider-border-y-color

Value:var(--canvas-border)

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

Name:--grid-sidebar-width

Value:var(--article-sidebar-width)

Sidebar width of the grid--sidebar-left and grid--sidebar-right selectors

Gradient Veneer

Docs
Table of all custom properties.
VariableDescription

Name:--gradient-veneer-start

Value:50%

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

Name:--gradient-veneer-opacity

Value:1

Opacity of the gradient utility class within the gradient veneer utilities

Icon

Docs
Table of all custom properties.
VariableDescription

Name:--icon-size

Value:1.25em

Size of Natura11y Icons present in buttons

Name:--icon-font-family

Value:'natura11y-icons'

Name of font used for the icons

Lightbox

Docs
Table of all custom properties.
VariableDescription

Name:--lightbox-padding-x

Value:var(--spacer-2)

Left and right padding of the lightbox component

Name:--lightbox-padding-y

Value:var(--spacer-2)

Top and bottom padding of the lightbox component

Name:--lightbox-text-color

Value:hsl(0, 0%, 100%)

Color of the text inside the lightbox component

Name:--lightbox-overlay-color

Value:hsl(0, 0%, 0%)

Color of the lightbox overlay

Name:--lightbox-overlay-opacity

Value:0.8

Opacity of the lightbox overlay

Name:--lightbox-media-border-radius

Value:0

Border radius of the lightbox utility classes

Name:--lightbox-media-shadow

Value:0 0.125rem 1rem 0.5rem rgba(0, 0, 0, 0.25)

Shadow value of the lightbox media component

Name:--lightbox-z-index

Value:1000

Z-index value of the lightbox component

Name:--lightbox-caption-text-align

Value:center

Text align value of the lightbox caption

Name:--lightbox-thumbnail-icon-image

Value:' 160'

Content value of the lightbox thumbnail image icon

Name:--lightbox-thumbnail-icon-video

Value:' 163'

Content value of the lightbox thumbnail video icon

Modal

Docs
Table of all custom properties.
VariableDescription

Name:--modal-padding-x

Value:var(--spacer-2)

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

Name:--modal-padding-y

Value:var(--spacer-2)

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

Name:--modal-overlay-color

Value:#000

Color of the modal overlay

Name:--modal-overlay-opacity

Value:0.75

Opacity of the modal overlay

Name:--modal-z-index

Value:50000

Z-index value of the entire modal component

Navigation

Docs
Table of all custom properties.
VariableDescription

Name:--nav-gap

Value:0.75em

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

Name:--nav-divider-padding-y

Value:0.625em

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

Name:--nav-divider-padding-x

Value:var(--spacer-3)

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

Name:--primary-nav-padding-x

Value:var(--spacer-3)

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

Name:--primary-nav-padding-y

Value:var(--spacer-2)

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

Shadow

Docs
Table of all custom properties.
VariableDescription

Name:--box-shadow-hsl

Value:0 0% 0%

Hue, saturation, and lightness color values for box shadow utilities

Name:--box-shadow-base-size

Value:0.5em

Base size of the box shadow, used in multiplying the three box shadow sizes

Name:--box-shadow-base-opacity

Value:0.125

Base opacity value of the box shadow utilities

Name:--text-shadow-hsl

Value:0 0% 0%

Hue, saturation, and lightness color values for the text shadow utility

Name:--text-shadow-base-size

Value:0.25em

Base size of the text shadow, used in multiplying the text shadow utility

Name:--text-shadow-base-opacity

Value:0.5

Base opacity value of the text shadow utility

Spacing

Docs
Table of all custom properties.
VariableDescription

Name:--spacer-base

Value:1rem

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

Name:--spacer-1

Value:calc(var(--spacer-base) <em> 0.5)

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

Name:--spacer-2

Value:calc(var(--spacer-base) <em> 1)

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

Name:--spacer-3

Value:calc(var(--spacer-base) <em> 1.5)

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

Name:--spacer-4

Value:calc(var(--spacer-base) <em> 2.5)

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

Name:--spacer-5

Value:calc(var(--spacer-base) <em> 4)

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

Name:--spacer-6

Value:calc(var(--spacer-base) <em> 6.5)

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

Subtle Fill

Docs
Table of all custom properties.
VariableDescription

Name:--subtle-fill-opacity

Value:0.075

Opacity of the subtle fill when used globally

Tab

Docs
Table of all custom properties.
VariableDescription

Name:--tab-button-padding-x

Value:var(--spacer-3)

Left and right padding of the tabs nav buttons

Name:--tab-button-padding-y

Value:var(--button-padding-y)

Top and bottom padding of the tabs nav buttons

Name:--tab-button-color

Value:var(--link-color, currentColor)

Color of the text of the non-active tab buttons

Name:--tab-active-button-color

Value:currentColor

Color of the text of the active tab buttons

Name:--tab-accent-bar-size

Value:calc(var(--border-width) * 3)

Size of the accent bar within the active tab button

Name:--tab-accent-bar-color

Value:currentColor

Color of the accent bar within the active tab button

Table

Docs
Table of all custom properties.
VariableDescription

Name:--table-cell-padding-x

Value:var(--spacer-3)

Left and right padding of the table cells

Name:--table-cell-padding-y

Value:0.75em

Top and bottom padding of the table cells

Name:--table-font-size

Value:var(--font-size-md)

Default font size of the table

Name:--table-scroll-min-width

Value:800px

Minimum width of the table within the table scroll component

Typography

Docs
Table of all custom properties.
VariableDescription

Name:--body-font-family

Value:Source Sans Pro, sans-serif

Font family applied to the entire document

Name:--body-font-weight-normal

Value:400

Numeric font weight value for normal fonts

Name:--body-font-weight-medium

Value:600

Numeric font weight value for medium fonts

Name:--body-font-weight-bold

Value:700

Numeric font weight value for bold fonts

Name:--base-font-size

Value:0.9rem

Smallest font size in the document

Name:--type-scale

Value:1.2

Multiplier for all font sizes in the document

Name:--font-size-sm

Value:var(--base-font-size)

Small font size used in CSS including font size utility classes

Name:--font-size-md

Value:calc(var(--font-size-sm) * var(--type-scale))

Medium font size used in CSS including font size utility classes

Name:--font-size-rg

Value:calc(var(--font-size-md) * var(--type-scale))

Regular (paragraph) font size used in CSS including font size utility classes

Name:--font-size-lg

Value:calc(var(--font-size-rg) * var(--type-scale))

Large font size used in CSS including font size utility classes

Name:--h1-font-size

Value:calc(var(--h2-font-size) * var(--type-scale))

Font size of Section Header Level 1

Name:--h2-font-size

Value:calc(var(--h3-font-size) * var(--type-scale))

Font size of Section Header Level 2

Name:--h3-font-size

Value:calc(var(--h4-font-size) * var(--type-scale))

Font size of Section Header Level 3

Name:--h4-font-size

Value:calc(var(--h5-font-size) * var(--type-scale))

Font size of Section Header Level 4

Name:--h5-font-size

Value:calc(var(--h6-font-size) * var(--type-scale))

Font size of Section Header Level 5

Name:--h6-font-size

Value:var(--font-size-rg)

Font size of Section Header Level 6

Name:--banner-headline-font-size

Value:calc(var(--h1-font-size) * var(--type-scale))

Font size of the Banner Headline utility class

Name:--banner-headline-font-weight

Value:var(--font-weight-normal)

Font weight of the Banner Headline utility class

Name:--body-line-height

Value:1.5

Line height applied to the entire document (excluding headers)

Name:--header-line-height

Value:1.125

Line height applied only to headers

Name:--paragraph-margin-bottom

Value:1.25em

Bottom margin set to paragraphs

Name:--header-margin-bottom

Value:0.25em

Bottom margin set to headers