Input and Button States

This project demonstrates the implementation of an input field and a submit button using a modular CSS architecture. The CSS is structured using root-level variables and atomic classes to ensure reusability and maintainability.

index.html

The HTML file that contains the structure of the webpage, including an input field and a submit button.

root.css

This CSS file contains root-level variables to define various colors, font sizes, paddings, margins and other reusable metrics in the design system.Atomic classes are utilized for styling the button and input field.It makes use of the variables defined in root class.

script.js

This JavaScript file contains the logic to handle the state changes of the input field and the submit button.

How to Run

1. Clone the repository:

   git clone https://github.com/rashidpbi/Design-System.git
   

2. Navigate to the project directory:

   cd Design-System
   

3. Open index.html in your web browser:

   open index.html
   
   or simply double-click index.html