Get Started • Natura11y
Jump to main contentJump to website footer

There is a newer version of Naturally.

Close up of a baby elephant

Photo by Hu Chen

Get Started

Natura11y is an Open Source Design Ecosystem

Natura11y is more than just a front-end framework—it's a design ecosystem. With Natura11y, you get practical, built-in solutions for some of the most intricate front-end concepts.

Here's what the Natura11y ecosystem includes:

  • Figma UI Kit

    Natura11y's Figma UI Kit provides designers with a suite of tools that bridge the gap between static design systems and dynamic front-end environments.

  • Natura11y CDNs

    Natura11y's CDNs deliver an abundance of easily customizable styles (CSS), baseline functionality (Javascript), and icons (font). These CDNs are a perfect fit for those who prefer not to tinker with Webpack.

    Quick Start (CDN)

  • NPM Install

    You can install Natura11y's source SCSS files via NPM. These files don't include the vanilla JavaScript or Webpack setup, ensuring nothing clashes with frameworks such as React.

    Natura11y on NPM

Modernized Styles with Natura11y

Natura11y strives to incorporate the most contemporary, browser-friendly CSS specifications. Here are a few foundational features that contribute to Natura11y's CSS:

Natura11y's stylesheet originates from several Sass modules, arranged alphabetically for ease of access.

  • Cascade Layers

    At its core, Natura11y's CSS employs cascade layers: a recent enhancement to the CSS specification. cascade layers enhance styling predictability and semantics, drastically reducing the reliance on the !important flag.

    Using Cascade Layers

  • Typography Scale

    Natura11y's default font sizes are interrelated, ranging from the smallest to the largest. This simplifies the process of creating balanced typography. You can adjust all font sizes using one or two variables—either at the project level or at a specific breakpoint.

    Natura11y's Type Scale

Quick Start with CDN

Get started with Natura11y by creating an HTML document using the code provided in Figure 2 (below). This code includes all the necessary CDN links, offering you instant access to Natura11y's ecosystem.


    <!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@v3/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@v3/dist/natura11y.min.js" />
            
        </body>
        
    </html>
Figure 2
Line #Details
3

On the HTML tag, the lang="en" attribute sets the default language (English). The dir="ltr" attribute sets the default text direction (left to right).

13

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

16

CDN link to the framework's latest stable version of the core stylesheet.

31

CDN link to the framework's latest stable core Javascript file.

That's all there is to it! With the necessary scripts properly set up, you're all set to start building with Natura11y. Next, explore how to customize the look and feel of your designs.

Customization