Customization • Natura11y

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.

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/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

Variable		Description
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

Variable		Description
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

Variable		Description
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

Variable		Description
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

Variable		Description
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

Variable		Description
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

Variable		Description
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

Variable		Description
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

Variable		Description
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

Variable		Description
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

Table of all custom properties.
Variable		Description
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

Table of all custom properties.
Variable		Description
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

Table of all custom properties.
Variable		Description
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

Table of all custom properties.
Variable		Description
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

Variable		Description
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

Variable		Description
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*

Variable		Description
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

Variable		Description
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*

Variable		Description
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

Variable		Description
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

Variable		Description
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