Nayyas dream closet - Shared Design System across all platforms
yarn install
-
cd
intosrc
and runyarn 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
- 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