nayya-wardrobe v1.0.7

nayya-wardrobe

Nayyas dream closet - Shared Design System across all platforms

Installation

yarn install

To Run

• cd into src and run yarn start
• navigate to http://localhost:8080
• view different .html files by appending the file name to the url. ex: https://localhost:8080/buttons.html

File Structure (Reference: https://atomicdesign.bradfrost.com/chapter-2/)

• atoms - smallest functional elements (ex: buttons, input, typography, etc..)
• molecules - combination of two atoms or more together (ex: navigation, tabs, cards, etc..)
• organisms - combination of two molecules or more together (ex: headers, footers, forms, etc..)
• assets - includes fonts, images, or global styling

Themes - How To

• Find the style you want to use in variables.scss ex:

    :root { 
      --example-color-1: #fff; 
      --example-color-2: #000; 
      --example-color-3: #ddd; 
    } 

• Create a class with the name of your theme, to override your style ex:

    .adp {
      --background-color: var(--example-color-2);
    }
    
    .nayya {
      --background-color: var(--example-color-1);
    }
    
    .example-new-theme {
      --background-color: var(--example-color-3);   
    }

• Use the variable ex:

    button {
      background-color: var(--background-color);
    }

• Now, all background-colors will be different depending on which theme(class) you have applied