Open fsdiogo opened 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);
}
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.