Meaningful Colors and Fonts Variables

[MartinMuzatko]

Hi there!

I love how you reduced the variables to a minimum. However, what you should do, is to give variables a meaning.

$gray doesn't tell me what it is intended to do or where or for what to use it, other than "that's the color gray". Why make it a variable? It doesn't encourage users to change that variable. It wouldn't make sense to use a variable for gray, other than avoiding repetition.

Instead, I resorted to giving meaningful names in my own ui tools:

https://github.com/MartinMuzatko/UI-Wrench/blob/master/less/variables.less

@colorShadow: rgba(0, 0, 0, 0.5);
@colorLight: lighten(@colorShadow, 100%);
@colorFillDark: #1F1F1F;
@colorFillLight: #F2F2F2;
@colorBackground: fadeout(@colorFillDark, 5%);

It's not Sass, but you can clearly see that you know what each variable is intended for, and users can change it to their liking without f***ing with the default styles. I consider avoiding static color(s)/names in ui kits anyway, so primary and secondary is a really good way to go

The other topic: fonts. I leave the scaling of fonts completely to the user (because of the power of em and rem!) I focused on where and what fonts to use for what purpose.

@fontMain: Merriweather;
@fontTitle:  Oswald;
@fontCaption: Merriweather;

Of course, how many fonts or for what, is still up to the user. But with setting just a tiny frame (Main, Title) you encourage the user to add and change to their likings.

[cstoobes]

Hi, Thanks for your comments.

We feel that using $primary, $secondary, etc is the best way to separate the color variables from how they are to be used. We use $white, $gray, $black for gradations of neutral tones.

You could then add in additional variables specific to your project:

$colorHighlight: $primary;
$colorBackground: $secondary;
$borderColor: $gray;

spaceBase is just the beginning architecture for your project. You have ultimate control of the variables and how they are used.