DOCSEARCHbyAlgolia
Submit Docs

Natura11y Documentation

website·Indexed 31 days ago

https://gonatura11y.com/docs/get-started/

A responsive CSS framework and UI kit featuring components like Modals, Accordions, Cards, and Tabs, alongside layout utilities for Grid, Flexbox, and Sizing. Includes support for React and an open-source Figma UI Kit, with documentation covering versions v2 and v3.

Tokens
64.3K
Snippets
381
Records
457
Agent score
57%

What's inside Natura11y

  1. Overview of Natura11y Lightbox

    v3
    The Natura11y lightbox component allows users to enlarge high-resolution images, local video files, YouTube videos, and Vimeo videos. It includes built-in accessibility features: keyboard support for focusable elements (Tab, Forward, Back), the Esc key to close the lightbox, and automatic focus restoration to the last active element upon closing.

  2. Overview of the Natura11y Figma UI Kit

    v3

    The Natura11y Figma UI Kit is a collection of components, variables, and styles designed to align with the Natura11y front-end framework. Key features include:

    • Local Variables: Aligned with Natura11y's CSS variables to keep design and development in sync.
    • Modes: Utilizes Figma's variable modes to mirror Natura11y's dynamic color theming, eliminating the need for duplicative color variants.
    • Icon Library: Includes a built-in library for designing and syncing icons between Figma and the front-end.

  3. Understand Natura11y's CSS Cascade Layer architecture

    v2
    Natura11y uses the @layer CSS at-rule to solve specificity issues and make customization more predictable. It defines three foundational layers in the _layer.scss SASS partial. The order of declaration determines the priority, with later layers overriding earlier ones.
    @layer base, component, utility;

  4. Manage consistent font sizes with Natura11y Type Scale

    Natura11y allows developers to maintain consistent typography across different pages or breakpoints by utilizing two primary properties: the base font size and the type scale. This system ensures that font scaling remains proportional and predictable throughout the application.

  5. Understand Natura11y's CSS Cascade Layer architecture

    v3
    Natura11y uses the @layer CSS at-rule to solve specificity issues and make customization more predictable. It defines three foundational layers in the _layer.scss SASS partial. The layers are processed in the order they are declared, meaning styles in later layers override styles in earlier layers regardless of selector specificity.
    /* Natura11y's CSS Layer Declaration */
@layer base, component, utility;

  6. Understand Natura11y Core architecture

    Natura11y Core provides the foundation for the design system using vanilla JavaScript and SCSS.

    • SCSS: Organized with a partial for each component/utility. It uses BEM conventions and CSS cascade layers applied in the order: base → component → utility.
    • JavaScript: Uses native browser APIs and a class-based structure where each class handles a single interaction.
    • Distribution: The source compiles into two main files in the dist/ folder: natura11y.css and natura11y.js.
    core/
├── src/
│   ├── js/
│   │   ├── accordion.js
│   │   ├── alert.js
│   │   └── ...
│   ├── scss/
│   │   ├── _accordion.scss
│   │   ├── _alert.scss
│   │   └── index.scss (loads Sass partials)
│   └── index.js (loads styles and initializes JS classes)
└── dist/
    ├── natura11y.css (compiled CSS output)
    └── natura11y.js (compiled JS output)

  7. Natura11y Ecosystem Resources

    v3

    Natura11y provides a suite of tools beyond the CSS framework:

    • Figma UI Kit: Bridges the gap between static design and front-end environments.
    • GitHub Repositories: Access the core framework, React starter components, and the icon library.
    • CDNs: Provides CSS, JS, and font icons for rapid deployment without build tools.

  8. Natura11y CSS Architecture and Features

    v2

    Natura11y utilizes modern CSS specifications to ensure predictability and accessibility:

    • CSS Variables: Default styles are customizable via custom properties corresponding to specific Sass modules.
    • Cascade Layers (@layer): Used to manage styling predictability and semantics, reducing the need for !important flags.
    • Logical Properties: Used for directional values to provide native support for right-to-left (RTL) languages.
    • Typography Scale: Interrelated font sizes that can be adjusted globally or at specific breakpoints using one or two variables.

  9. Understand Natura11y CSS Cascade Layer order

    Natura11y uses the @layer CSS at-rule to organize framework styles. It defines three specific layers in a strict order of precedence: base, component, and utility. Styles in later layers override styles in earlier layers, regardless of selector specificity.
    @layer base, component, utility;

  10. Align Figma Local Variables with Natura11y CSS Variables

    Foundation variables within the Natura11y Figma kit are designed to correspond directly to Natura11y’s CSS variables. This alignment ensures a shared starting point and consistent naming convention between designers working in Figma and developers implementing the styles in code.

  11. Use semantic headers in Accordions

    v2
    For better page architecture and SEO, you can replace the <button> tag with semantic header tags (e.g., <h2>, <h3>) while keeping the .accordion__button class and required ARIA attributes. If the semantic header is visually too large, use header utility classes (like .h5) to adjust the appearance without breaking the document outline.
    <h2
    class="accordion__button h5"
    id="acc-button-example-01"
    data-accordion="button"
    aria-controls="acc-panel-example-01"
    aria-expanded="false">
        Danaus Plexippus
</h2>

  12. Implement an accessible carousel using the Track component

    The Track component provides an accessible carousel implementation. It includes built-in support for Arrow key navigation, ARIA live region announcements for screen readers, and a focus management system that limits Tab focus exclusively to the currently visible panels.