TerribleDev/notes.md

## notes.md

      
    Raw
  

              notes.md
            
          
    Component Library:
css modules
```css`
.button {
width: 1em;
}

React:
```jsx
import styles from './button.css';

return button() {
    return <wayfair-button className={styles.button}>Click me</button>;
}

Component library in React/Angular + wrapper for web components
LESS/SASS (variables) - don't use
Design Tokens
How they're layered: themed variables -> css to define the states of a component -> implementation
Akin to: DB client -> respository -> code
Chromatic + storybook
Font size + standard spacing + typography (tackle first)
Base: 16px
Padding always em (everything else rem)
vw vh size of browser window (width, height)
rem = base font size / 16
em = base font size of parent / 16
%
px -> hights
css grid (provide css for the grid)
publish NPM packages

css package
react package (consumes css)
web component