search

bufferapp / css-style-guide

How we CSS at Buffer
6 stars 3 forks source link

Variables! #3

Closed stphndxn closed 8 years ago

stphndxn commented 8 years ago

Hey, friends! I'd love to open a discussion about how we might approach our variable names! I have a few fly-by thoughts that I'd love any insights on! :grin:

Introducing the Rule of 8

$globalSpacing: 8px;

One of the things we've been exploring with our designs is using the number 8 as a base of all of our spacing, margin, padding, heights, widths, etc. decisions! Here are a few examples:

Buttons: Small buttons might have a height of 24px where 24 is 8 * 3. From there, we'd have the font size at 12px (8+(8/2)) and then the left and right margins might be 8px giving us this:

button

Following this same ruling system, regular buttons might have a height of 32px where 32 is 8 * 4. From there, we'd have the font size at 14px (8+(8-(8/4))) and then the left and right margins might be 16px giving us this:

button

So, when building out the .Button classes, we might go for something like this:

.Button--regular {
  height: $globalSpacing * 2;
  // ...
}

.Button--small {
  height: $globalSpacing;
  // ...
}

Incorporating DRY

I wonder how it might feel if when we started to write a lot of the same values, we perhaps explore making them variables? Super-curious for thoughts on this! :grinning:

$borderRadius: $globalSpacing / 2;
$buttonHeightSmall: $globalSpacing * 3;
$buttonHeightRegular: $globalSpacing * 4;

So, if we're working on a new .Button element, we might go ahead and write:

.Button--something-new {
  height: $buttonHeightRegular;
  // ...
}

Curious on any thoughts here! Love the conversations that are inspiring these thoughts! Super-excited to hear and learn more from you all! :grin: