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:
Figma UI Kit
Natura11y's Figma UI Kit helps designers connect static designs with dynamic front-end environments.
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.
Github Repos
All of Natura11y's source files are available on GitHub. These repositories provide access to the core framework, Natura11y's React starter components, and the Natura11y icon library.
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:
CSS Variables
You can easily 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, a new addition to the CSS specification. Cascade layers 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. 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.
Line # | Details |
---|---|
3 | The The |
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