1.
Achievingconsistency
inlarge CSSprojects
@andr3
FullStackLX#2
Dec. 7th '2016
http://meet.andr3.net
me@andr3.net

2.
OH HAI!

3.
CONSISTENCY

4.
CONSISTENCY
inlargeCSSprojects

5.
consistent
(adj.) /kənˈsɪst(ə)nt/
acting or done in the same
way over time, especially so
as to be fair or accurate.

6.
👀💻
code visuals

7.
👀💻
code visuals
Maintainability
Predictability
Stability

8.
👀💻
code visuals
Maintainability
Predictability
Stability
Usability
Branding
Personality

9.
SharedResponsibility

10.
👀💻
code visuals
CSSStats
http://cssstats.com
Gulp/Grunt (with PostCSS)
How can we measure?

11.
How can we measure?How can we measure?
2016
2014Fixed layout.
Using SCSS.
Before redesign with consistency in mind.
Responsive/fixed layout (progressive redesign).
Using SCSS.
After redesign.
A lot more components, content, pages, etc.
From Fixed to Responsive (medium.com) ➡
seedrs.com
seedrs.com
cssstats.com
cssstats.com

12.
How can we measure?How can we measure?
2016
2014

13.
How can we measure?How can we measure?
43%
22%
31%
29%
29%
40%
57%
46%
8%
34% 55%
28%
2016
2014

14.
How can we measure?How can we measure?
2016
2014

15.
How?

16.
1.TypographicScale

17.
Robert Bringhurst

18.
Don’tcompose
withoutascale
Robert Bringhurst

19.
Don’tcompose
withoutascale
In the sixteenth century, a series of
common sizes developed among
European typographers, and the
series survived with little change
and few additions for 400 years. […]
Use the old familiar scale,
or use new scales of your
own devising, but limit
yourself, at first, to a
modest set of distinct and
related intervals.”
—
in The Elements of Typographic Style
by Robert Bringhurst

20.
$type-scale-base: 1rem;
$type-scale-adjustments: (
extra-small: -0.25,
small: -0.125,
normal: 0,
medium: 0.125,
large: 0.5,
huge: 1,
extra-huge: 2,
extra-extra-huge: 3,
);
_config.scss
// Usually*:
// 12px
// 14px
// 16px
// 18px
// 24px
// 32px
// 48px
// 64px

21.
@function type-scale($size) {
@if map-has-key($type-scale-adjustments, $size) {
$adjust: map-get($type-scale-adjustments, $size);
$actual-size: $type-scale-base + $adjust;
@return $actual-size;
} @else {
@return $type-scale-base;
}
}
_typography-mixins.scss

22.
font-size: type-scale(extra-small);
font-size: type-scale(small);
font-size: type-scale(normal);
font-size: type-scale(medium);
…
// If you want, create a mixin for easier use:
// @include type-scale(large);
Howtouseit:

23.
font-size: type-scale(extra-small);
font-size: type-scale(small);
font-size: type-scale(normal);
font-size: type-scale(medium);
…
// If you want, create a mixin for easier use:
// @include type-scale(large);
Howtouseit:
padding-top: type-scale(large);

24.
2.Verticalspacing scale

25.
before
after

26.
before
after
margin
margin

27.
before
after
margin
margin
padding
padding

28.
$vertical-space-values: (
extra-small: 0.5,
small: 1,
medium: 1.5,
large: 2.5,
huge: 4,
extra-huge: 6
);
_config.scss
// In rems. Usually*:
// 8px
// 16px
// 24px
// 40px
// 64px
// 96px

29.
@function vertical-space($space) {
$space-value: map-get($vertical-space-values, $space);
@return #{$space-value}rem;
}
@mixin before-padding($space) {
padding-top: vertical-space($space);
}
@mixin before-margin($space) {
margin-top: vertical-space($space);
}
_typography-mixins.scss

30.
.example {
@include before-padding(small);
@include after-padding(small);
@include before-margin(large);
@include after-margin(large);
}
// For convenience, create mixins like:
// @include before-and-after-padding(small);
// @include before-and-after-margin(large);
Howtouseit:

31.
3.Container paddings(horizontal)

32.
small screens large screens

33.
$container-paddings: (
small: 1,
medium: 2,
large: 3
);
_config.scss
// in multiples
// of gutters

34.
@function container-padding($size) {
$multiplier: 1;
@if map-has-key($container-paddings, $size) {
$multiplier: map-get($container-paddings, $size);
}
@return $multiplier * gutter();
}
_grid-mixins.scss

35.
@function container-padding($size) {
$multiplier: 1;
@if map-has-key($container-paddings, $size) {
$multiplier: map-get($container-paddings, $size);
}
@return $multiplier * gutter();
}
_grid-mixins.scss
varies depending
on the context
(small/large).

36.
@mixin container-padding($size) {
$value: container-padding($size);
padding-left: $value;
padding-right: $value;
}
_grid-mixins.scss

37.
.example {
@include container-paddings(small);
}
Howtouseit:
.another {
padding: vertical-spacing(huge) container-paddings(small);
}

38.
Semi-manualchecks via bookmarklet

39.
4.Colorpaletteswithalpha

40.
Name your colors.
$color1
$primary-color
$color-red

41.
http://chir.ag/projects/name-that-color/#4AA6FF
http://vmi.u7.xsl.pt
http://sipapp.io/
http://vmi.ud.xsl.pt

42.
$palette: (
"celery-green": (
x-light: #e5f1d5,
light: #cce4ac,
mid-light: #b2d683,
base: #99c95a,
mid-dark: #7fbb30,
dark: #6fa32b,
x-dark: #5c8723
),
"dodger-blue": (
x-light: #e8f4ff,
light: #d1e8ff,
_colors.scss

43.
@function color($hue, $tone: "base") {
$color: rgba(204, 255, 0, 0.2);
@if map-has-key($palette, $hue) {
$palette-color: map-get($palette, $hue);
@if map-has-key($palette-color, $tone) {
$color: map-get($palette-color, $tone);
}
}
@return $color;
}
_colors.scss

44.
.example {
color: color(celery-green, x-dark);
}
Howtouseit:

45.
$alpha-palette: (
"black": #000,
"white": #fff,
"corn-yellow": #edb800,
"sky-blue": #1d8fff
);
_colors.scss
$alpha-levels: (
"0": 0,
"10": 0.1,
"20": 0.2,
"40": 0.4,
"60": 0.6,
"80": 0.8,
"100": 1
);

46.
@function alpha-color($hue, $alpha: "100") {
$color: rgba(204, 255, 0, 0.2);
@if map-has-key($alpha-palette, $hue) {
$palette-color: map-get($alpha-palette, $hue);
@if map-has-key($alpha-levels, $alpha) {
$color: rgba($palette-color, map-get($alpha-levels, $alpha));
}
}
@return $color;
}
_colors.scss

47.
.example {
color: alpha-color(black, 80);
}
Howtouseit:

48.
5.Namingconvention

49.
2016
2014

50.
.section {
.header {
.logo a {
…
}
.image {
…
}
}
…
}
Before

51.
.Component {
…
}
.Component-logo {
…
}
.Component-coverImage {
…
}
After

52.
BEM
SUIT
block element modifier
.block
.block__element
.block__element--modifier
.Component
.Component-subComponent
.Component--modifier
.is-transientState
.u-tilityClasses

53.
BEM
SUIT style… for ui… tools… you know.
block element modifier
.block
.block__element
.block__element--modifier
.Component
.Component-subComponent
.Component--modifier
.is-transientState
.u-tilityClasses

54.
Whichisbest?

55.
Itdepends.
But use one that lowers specificity.

56.
This next one should go
without saying but…

57.
6.LintyourSCSS/less/css

58.
That’sprettymuchit,
lintit.Noexcuses.

59.
That’sprettymuchit,
lintit.Noexcuses.
Exceptions must be
followed by a reason.
// scss-lint:disable NestingDepth
// Reason: This rule depends on the
// state of the previous item. No way
// to minimize depth here.

60.
CONSISTENCY
inlargeCSSprojects
In conclusion...

61.
“We shape our buildings
and afterward our
buildings shape us."
—
Winston Churchill

62.
We become what we
behold. First we
shape our tools,
thereafter they
shape us.
—
Marshall McLuhan

63.
"SHAPEY0’SELVES."

64.
BeforeIgo...

65.
THANKYOU

66.
Achievingconsistency
inlarge CSSprojects
@andr3
FullStackLX#2
Dec. 7th '2016
http://meet.andr3.net
me@andr3.net
http://talks.andr3.net/2016/consistency.pdf
cbna
http://codepen.io/andr3pt/pen/pNVVdG
Lalezar, SuperClarendon & Fira Code