Get Started • Natura11y
Jump to main contentJump to website footer
Close up of a baby elephant, representing the beginning stages of learning and growth in the Natura11y ecosystem

Photo by 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:

  • Natura11y CDNs

    Natura11y's CDNs provide customizable styles (CSS), basic functionality (JavaScript), and icons. They are ideal for those who don’t want to use Webpack.

  • NPM Install

    You can install Natura11y's SCSS files via NPM. These files do not include vanilla JavaScript or Webpack setup, so they won't conflict with frameworks like React.

Modernized Styles with Natura11y

Natura11y uses the latest, browser-friendly CSS specifications.

Key features of Natura11y's CSS include:

  • Cascade Layers

    Natura11y's CSS uses cascade layers, a new addition to the CSS specification. Cascade layers make styling more predictable and semantic, reducing the need for the !important flag.

  • Typography Scale

    Natura11y's default font sizes are related, from smallest to largest, making it easy to create balanced typography. You can adjust all font sizes with one or two variables, either for the entire project or at specific breakpoints.

Quick Start with CDN

Start using Natura11y by creating an HTML document with the code in Figure 2 (below). This code includes all the necessary CDN links, giving you instant access to Natura11y's features.


    <!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@v1/dist/natura11y-icons.min.css" />
            
            <!-- Natura11y Stylesheet -->
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/natura11y@4.0.0-alpha/dist/natura11y.min.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@4.0.0-alpha//dist/natura11y.min.js" />
            
        </body>
        
    </html>
Figure 2
Line #Details
3

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.

13

CDN Stylesheet link to Natura11y Icons, our open-source icon library.

16

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

31

CDN link to the latest stable core JavaScript file.

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

Customization