Natura11y is an open source design ECOsystem
Natura11y is more than just a front-end framework—it's a design ecosystem. It aims to remove technical barriers for those with limited time or resources. Natura11y is ideal for real-world, time-sensitive projects.
Natura11y consists of:
- Figma UI Kit
- CSS and JS CDNs
- Source code (Github and NPM)
- React starter components
- Maintainable icon library
What's with the name?
Natura11y feels natural to learn and use, and it includes accessibility considerations. For this reason,the name Natura11y is a combination of two words: natural and a11y. Among web designers and developers, the word accessibility is often abbreviated to a11y. This numeronym refers to 'a' then '11' characters between 'y'.
Natura11y's official logo
The documentation
I built the website for Natura11y using Gatsby, a React-based open source framework. This approach allowed me to mix React components (for the examples) with MDX (for the documentation's text).
Writing the documentation was a project in and of itself as I don't consider myself a natural writer. It took some time for me to get into the flow of writing. It helped me to remember that documentation is never final; it will change and evolve alongside the framework itself.
All of the nature images on the website were carefully selected from Unsplash. I made sure to credit each photographer. Browse the docs, and notice the banner images used on each page correlate with that page's subject matter.
Icon library
I am also developing an icon library to be used with the framework. This will be ongoing, and the library will grow over time.
Developers can choose to use Natura11y's icon font or SVG sprite. If you know how to use NPM, you ca even add your own icons to your project.
The Figma UI Kit
The Figma UI Kit is a collection of components and layouts that align with Natura11y's front-end framework. It provides essential tools for interaction designers to create bespoke design systems.
Examples
Examples are constructed using Natura11y, providing an initial glimpse into its functionality. Their purpose is to demonstrate, at a high level, the capabilities of the framework. Like to the icon library, I intend to expand these examples over time.
Natura11y is my first real contribution to the open source community. It's currently in it's third major release.