Customization • Natura11y

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@4.0.0-alpha/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(--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(--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:#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-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

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.875em		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(--container-padding-x)		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) * 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

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