Distinguish yourself without starting from scratch

There are several ways to customize Natura11y. You can use the CDN Stylesheet to redefine styles, which we'll cover in the next section. Alternatively, you can set up a modern development environment.

Setting up a development environment typically involves installing necessary tools like Node.js, a package manager (such as npm or yarn), and setting up Webpack to bundle your code. This approach gives you full control over the build process, allowing for advanced customizations and optimizations.

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 easy.


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

Figure 2

CSS variables can be updated dynamically, allowing you to declare new values from natura11y.css at any point after including the stylesheet.

You can declare new CSS variable values in a few ways:

Add a style tag in the header: Ideal for prototyping and experimenting.
Create a second stylesheet: Preferred for maintaining organization.
Use JavaScript: Redeclare values programmatically for dynamic customization.

Reference Guide: CSS Variables

All CSS Variables in Natura11y are scoped to :root (document). Document scoped variables use the :root pseudo selector, making them available throughout the entire page (Figure 5). This means that once you define a CSS variable under :root, it can be accessed and used anywhere in the document, ensuring consistent styling across all elements on the page.


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

Figure 5

The following table lists all CSS variables used in Natura11y.

Scroll horizontally to see whole table

Variable		Description
Name:--accordion-button-padding-x Value:var(--container-padding-x)		Left and right padding of the accordion button
Name:--accordion-button-padding-y Value:0.75em		Top and bottom padding of the accordion button
Name:--accordion-panel-padding-x Value:var(--accordion-button-padding-x)		Left and right padding of the accordion panel content
Name:--accordion-panel-padding-y Value:1em		Top and bottom padding of the accordion panel content
Name:--accordion-active-color Value:currentColor		Text color of the expanded accordion button
Name:--accordion-icon-closed Value:"\f116"		Icon shown on the accordion button when the panel is closed
Name:--accordion-icon-open Value:"\f119"		Icon shown on the accordion button when the panel is open
Name:--accordion-animation-duration Value:0.3s		Duration of the accordion open and close transition

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:--backdrop-fixed-height Value:400px		Height of the backdrop component with the fixed height modifier class
Name:--backdrop-media-control-inset Value:0 0 auto auto		Position inset for backdrop media control elements
Name:--backdrop-media-credit-inset Value:auto 0 0 auto		Position inset for backdrop media credit elements

Variable		Description
Name:--badge-padding-x Value:1.25em		Inline padding of the badge component
Name:--badge-padding-y Value:0.5em		Block padding of the badge component
Name:--badge-background-color Value:color-mix(in srgb, currentColor 10%, transparent)		Default background color of the badge component — a 10% tint of the current text color
Name:--badge-border-radius Value:var(--border-radius-pill)		Border radius of the badge component
Name:--badge-font-size Value:var(--font-size-sm)		Font size of the badge component
Name:--badge-font-weight Value:var(--font-weight-bold)		Font weight of the badge component
Name:--badge-font-family Value:var(--body-font-family)		Font family of the badge component
Name:--badge-gap Value:0.25em		Gap between icon and label text inside the badge component

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:1.25em		Left and right padding of the button utility class
Name:--button-padding-y Value:0.5em		Top and bottom padding of the button utility class
Name:--button-target-size Value:2.5em		Minimum height of button selectors for accessible touch target sizing
Name:--button-font-family Value:var(--body-font-family)		Font family 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-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-over-text-width Value:4em		Width of the button--icon-over-text modifier class
Name:--button-icon-over-text-border-radius Value:var(--button-border-radius)		Border radius of the icon container within button--icon-over-text
Name:--button-icon-over-text-font-size Value:0.675em		Font size of the text label within button--icon-over-text

Variable		Description
Name:--card-padding-x Value:var(--container-padding-x)		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:#ffffff		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 Value:var(--spacer-3)		Default left and right padding of the container component
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

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

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:--flyout-width Value:min(360px, 85dvw)		Width of the flyout panel
Name:--flyout-z-index Value:10000		Z-index value of the flyout component

Table of all custom properties.
Variable		Description
Name:--gradient-mask-start Value:50%		Gradient's starting position (relative to its direction) of the gradient veneer utilities
Name:--gradient-mask-opacity Value:1		Opacity of the gradient utility class within the gradient veneer utilities

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		Border radius of all form fields
Name:--form-field-border-color Value:currentColor		Border color of all form fields

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

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:10000		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
Name:--lightbox-animation-duration Value:0.35s		Duration of the lightbox open, close, and slide transitions
Name:--lightbox-animation-translate-x Value:2rem		Horizontal translate distance used in the lightbox open, close, and slide animations

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
Name:--modal-animation-duration Value:0.35s		Duration of the modal open and close transitions
Name:--modal-animation-translate-y Value:2rem		Vertical translate distance used in the modal open and close animations

Variable		Description
Name:--nav-gap Value:0.875em		Gap between navigation items
Name:--nav-divider-padding-y Value:0.625em		Top and bottom padding of navigation dividers
Name:--nav-divider-padding-x Value:var(--spacer-3)		Left and right padding of navigation dividers
Name:--main-menu-padding-x Value:var(--container-padding-x)		Left and right padding of the main menu global header
Name:--main-menu-padding-y Value:var(--spacer-2)		Top and bottom padding of the main menu global header

Variable		Description
Name:--nav-nested-padding-x Value:var(--nav-divider-padding-x)		Horizontal padding for navigation links at all levels. Level 2 and 3 multiply this value to create indentation.
Name:--nav-nested-padding-y Value:0.5em		Vertical padding for navigation links.
Name:--nav-nested-parent-font-size Value:var(--font-size-md)		Font size for level-1 navigation links.
Name:--nav-nested-child-font-size Value:var(--font-size-sm)		Font size for level-2 and level-3 navigation links.
Name:--nav-nested-indicator-width Value:3px		Width of the active indicator bar on level-1 items.
Name:--nav-nested-indicator-color Value:currentColor		Color of the active indicator bar. Defaults to `currentColor`. Override with a color token such as `var(--color-primary)`.

Variable		Description
Name:--pagination-font-size Value:var(--font-size-md)		Font size of pagination items
Name:--pagination-item-size Value:var(--button-target-size)		Minimum width and height of each pagination item, matching the accessible button tap target size
Name:--pagination-current-text-color Value:currentColor		Text color of the active current page item
Name:--pagination-current-background-color Value:var(--subtle-fill-2)		Background color of the active current page item

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) * 0.5)		Size of spacer 1, used in CSS including margin and padding utility classes*
Name:--spacer-2 Value:calc(var(--spacer-base) * 1)		Size of spacer 2, used in CSS including margin and padding utility classes*
Name:--spacer-3 Value:calc(var(--spacer-base) * 1.5)		Size of spacer 3, used in CSS including margin and padding utility classes*
Name:--spacer-4 Value:calc(var(--spacer-base) * 2.5)		Size of spacer 4, used in CSS including margin and padding utility classes*
Name:--spacer-5 Value:calc(var(--spacer-base) * 4)		Size of spacer 5, used in CSS including margin and padding utility classes*
Name:--spacer-6 Value:calc(var(--spacer-base) * 6.5)		Size of spacer 6, used in CSS including margin and padding utility classes*

Variable		Description
Name:--tab-button-padding-x Value:var(--button-padding-x)		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-nav-text-color Value:var(--link-color, currentColor)		Color of the text of the non-active tab buttons
Name:--tab-nav-background-color Value:var(--subtle-fill-1)		Background color of the tabs nav
Name:--tab-active-button-color Value:currentColor		Color of the text of the active tab buttons
Name:--tab-active-button-background-color Value:transparent		Background color 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
Name:--tab-pill-active-text-color Value:currentColor		Color of the text of the pill active tab buttons
Name:--tab-pill-active-background-color Value:var(--subtle-fill-2)		Background color of the pill active tab buttons

Customization

Distinguish yourself without starting from scratch

Customizable CDN

Reference Guide: CSS Variables

Read Next

Get Started

Accessibility

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