Layer

Natura11y uses the @layer CSS at-rule. This helps organize styles into layers, making it easier to manage, customize, and ensure consistency in your designs.

Cascade Layers

Natura11y includes three main layers: base, component, and utility. These layers, as shown in Figure 1, are defined in the _layer.scss SASS partial.


        /* Natura11y's CSS Layer Declaration */
        
        @layer base, component, utility;

Figure 1

The Base Layer

The base layer includes all basic selectors, such as html, body, and p tags. It also contains targeted CSS resets where needed. Instead of using a global CSS reset, Natura11y applies specific resets in its SASS partial to ensure styles are consistent and predictable.


        /* Base Layer Styles */
        
        html, body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        p {
            margin: 0;
            padding: 0;
        }

Figure 2

The Component Layer

The component layer holds specific styles for UI components like buttons, cards, and navigation bars. By keeping component styles in their own layer, Natura11y makes it easier to maintain and override these styles without affecting the base layer.


        /* Component Layer Styles */
        
        .button {
            padding: 10px 20px;
            border-radius: 5px;
        }

        .card {
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        }

Figure 3

The Utility Layer

The utility layer includes small, reusable styles that can be applied to any element, such as margin helpers, text alignment, and display properties. These utilities are designed to be used in combination with the base and component layers to build out your design system.


        /* Utility Layer Styles */
        
        .mt-1 {
            margin-top: 10px;
        }

        .text-center {
            text-align: center;
        }

Figure 4

Introduction

Cascade Layers

The Base Layer

The Component Layer

The Utility Layer