Get Started • Natura11y Inclusive Framework

Create beautiful web experiences.

Complexity is the the enemy of productivity.

Natura11y is an open source front-end toolkit. It removes technical barriers for those with limited time or resources. Natura11y's uncomplicated codebase makes it ideal for real-world, time-sensitive projects.

Quick Start (CDN)
GitHub
NPM

Files at a Glance

Compared to other front-end frameworks, Natura11y's source code is diminutive. Less code equals less technical debt. Figure 1 below is a generalization Natura11y's folder and file structure.

natura11y/
├── dist/
│   ├── css/
│   │   └── natura11y.css
│   ├── js/
│   │   └── natura11y.js
├── src/
│   └── modules/
│       ├── [module-name]/
│       │   ├── _style.scss
│       │   └── index.js
│       └── index.js
├── images/
└── index.html

Figure 1

Notice the /src/modules directory shown above in Figure 1, line 8. It contains Natura11y's modules. Each module (e.g., accordion) is a directory that contains two files: _style.scss and index.js. In this way, styles (CSS) and functionality (JS) reside together for each module.

Natura11y uses Webpack to bundle all modules into a single CSS file, and a single JavaScript file. Figure 1, above, highlights these files: /dist/css/natura11y.css on line 4, and /dist/js/natura11y.js on line 6.

These files are two of the three dependencies required to use Natura11y. The third dependency is for icons. Follow the Quick Start instructions below for including these dependencies (via CDN).

Quick Start

Get up and running with Natura11y. Create a plain HTML document and add the code from Figure 2 (below).

<!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/gh/cavidano/natura11y-icons@main/dist/natura11y-icons.min.css">

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

    </head>

    <body>

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

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

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

        <!-- Natura11y Javascript -->
        <script src="https://cdn.jsdelivr.net/gh/cavidano/natura11y@1.2/dist/js/natura11y.min.js"></script>

    </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 The framework's latest stable core Javascript file.

That's it! With the the required scripts in place, you are ready to start building with the Natura11y. Next, learn how to customize your layout's look and feel.

Customization