Structure

Primitives, Buttons & Forms

Primitives in ModulateCSS represent the fundamental building blocks used across different parts of a website's interface.

These elements include buttons, form elements, and icons—each serving as crucial components that ensure consistency and functionality within a user interface.

Overview

Primitives are designed to be atomic or molecular components that can be reused in various contexts throughout a web application. ModulateCSS does not impose strict rules on the specific implementation details of these elements in HTML and CSS, recognizing the need for flexibility. Instead, it focuses on ensuring that these primitives are fully integrated into the design system, particularly concerning color schemes and other stylistic dimensions.

Defining Primitives

In ModulateCSS, primitives should be defined within the @layer primitive of your CSS, which helps in maintaining the cascade and specificity intended for these base elements. This approach allows for a more organized stylesheet and aligns with the framework’s modular architecture.

@layer primitive {
    .button {
        padding: 0.75em 1.5em;
        border: none;
        background-color: var(--cs-btn-bg);
        color: var(--cs-btn-color);
        font-size: var(--fs);
        --fs-min: 16;
        --fs-max: 18;
        cursor: pointer;
    }
 
    .form-input {
        padding: 0.5em;
        border: 1px solid var(--cs-input-border-color);
        border-radius: 4px;
    }
 
    .icon {
        display: inline-block;
        width: 1em;
        height: 1em;
        fill: currentColor;
    }
}

Color Schemes and Theming

When defining primitives, it is essential to consider the overarching color schemes of your project. Primitives should adapt to the defined themes dynamically, ensuring visual coherence across all user interface components.

@layer theme {
    .csl-1, body {
        --cs-btn-bg: var(--c-primary);
        --cs-btn-color: var(--c-text-black);
        --cs-input-border-color: var(--c-black);
    }
}

Buttons

Buttons are a pivotal element in user interactions and are used across nearly all user interfaces. They should be easy to customize but maintain a consistent look that aligns with the design language of your application.

Example: Basic Button

<button class="button">Click Me</button>

Forms

Forms are critical for capturing user input. The styling of form elements should be straightforward yet flexible, allowing them to be easily integrated into various parts of the application without losing their inherent usability.

Example: User Input Form

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" class="form-input">
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" class="form-input">
    
    <button type="submit" class="button">Submit</button>
</form>

Integration with ModulateCSS

The primitives defined in ModulateCSS should seamlessly integrate with other components and layouts. By organizing these elements within the @layer primitive, developers can ensure that the base styling of buttons, forms, and icons does not interfere with more complex styling rules defined at higher layers.

Scalability and Reusability

Ensuring that primitives are both scalable and reusable across projects is key. This not only aids in rapid development but also ensures that the UI components maintain consistency and performance efficiency.

Conclusion

By focusing on the foundational aspects of UI elements such as buttons, forms, and icons, ModulateCSS provides a robust groundwork for building scalable and maintainable web applications. The framework's layer-based architecture and flexible theming capabilities ensure that even the most basic components like primitives can be adapted to meet diverse design requirements, making them indispensable tools in the developer’s toolkit.