Skip to content

Instantly share code, notes, and snippets.

@TerribleDev
Last active August 20, 2022 12:59
Show Gist options
  • Save TerribleDev/385ae4742e779cc2d8a3a9d8cecae753 to your computer and use it in GitHub Desktop.
Save TerribleDev/385ae4742e779cc2d8a3a9d8cecae753 to your computer and use it in GitHub Desktop.
some notes of components

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment