Skip to contentSkip to footer
Close up of a baby elephant, representing the beginning stages of learning and growth in the Natura11y ecosystem.

Photo: Hu Chen

Get Started

Natura11y is an Open Source Design ECOsystem

Natura11y is more than just a front-end framework. It is a design ecosystem. It offers practical, built-in solutions for complex front-end design concepts.

The Natura11y ecosystem includes:

Modernized Styles with Natura11y

Natura11y uses the latest, browser-friendly CSS specifications.

Key features of Natura11y’s CSS include:

  • CSS Variables

    You can customize Natura11y’s default styles with CSS variables, also known as custom properties. Each CSS variable matches a specific Sass module.

  • Cascade Layers

    Natura11y’s CSS uses cascade layers to make styling more predictable and semantic, reducing the need for the !important flag.

  • Logical Properties

    Natura11y uses CSS logical properties for directional values. These properties are essential for supporting right-to-left languages.

  • Typography Scale

    Natura11y’s default font sizes are related from smallest to largest, making it easy to create balanced typography with one or two variables.

Quick Start with CDN

Start using Natura11y by creating an HTML document with the code in Figure 1. This code includes the CDN links needed to access Natura11y’s styles, JavaScript, and icons.

HTML
<!DOCTYPE html>
<html dir="ltr" lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Page Title • Your Website Name</title>


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


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


    <body>
        <header id="global-header"></header>


        <main id="skip-header-content">
            <h1>Hello World!</h1>
        </main>


        <footer id="global-footer"></footer>


        <!-- Natura11y JavaScript -->
        <script src="https://cdn.jsdelivr.net/npm/@natura11y/core@5.2.5/dist/natura11y.js"></script>
    </body>
</html>
Figure 1
Figure 1 notes
LinesDetails
2

The lang="en" attribute on the HTML tag sets the default language to English.

The dir="ltr" attribute sets the default text direction to left to right.

9

CDN stylesheet link to Natura11y Icons, the open-source icon library.

12

CDN link to the latest stable version of the core stylesheet.

25

CDN link to the latest stable core JavaScript file.

That’s it. With the scripts set up, you can start building with Natura11y. Next, explore how to customize the look and feel of your designs.

Customization

Accessibility

Figma