olizilla / ipfs-react

https://olizilla.github.io/ipfs-react
MIT License
0 stars 0 forks source link

feat: add postcss & cssmodules #2

Open fsdiogo opened 6 years ago

fsdiogo commented 6 years ago
postcss
olizilla commented 6 years ago

This is tidy. Some thoughts...

My number 1 favourite thing about tachyons is having a font-size scale, a spacing scale and a palette of colours and font stacks to work from. Not having them leads to drift and duplication in the style definitions. Css variables are cool, but they seem a little awkward. Thinking out loud, would we end up with things like this:

  :root {
      --s0: 0px;
      --s1: 4px;
      --s2: 8px;
      --s3: 16px;
      --s4: 32px;
      --s5: 64px;

      --third: calc(100% / 3);

      --red: hotpink;
      --gold: gold;
    }

    .foo {
      height: 500px;
      display: inline-block;
      background: var(--red);
      width: var(--third);
      margin: var(--s5);
    }

    .bar {
      height: 500px;
      display: inline-block;
      width: var(--third);
      background: var(--gold);
      margin: var(--s5);
    }
fsdiogo commented 6 years ago

As this is a basic example, it doesn't show its real power.

My number 1 favourite thing about tachyons is having a font-size scale, a spacing scale and a palette of colours and font stacks to work from.

We would have that, but tweaked to our liking!

For example, we could have a variables.css that defines the spacings, colors, etc, just like Tachyons, and then we just use those variables similarly as we use the Tachyons classes, but in the CSS files.

This gives us fine grain control over our components.