Video at: https://www.youtube.com/watch?v=1_YdO9uGhYY
We all know CSS’s reputation for being a mess. We’ve all seen Peter Griffin’s GIF. It’s not that tricky but if we let our immediate needs roam wild, our future self will be shaking their fist at our present self. In this talk we’ll cover how we can put in place several mechanisms in our favourite CSS pre-processor to achieve consistency not only in terms of code but also achieving a visually consistent product.
PDF with notes available at http://talks.andr3.net/2016/consistency.pdf
12. 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
13. How can we measure?How can we measure?
2016
2014
14. How can we measure?How can we measure?
43%
22%
31%
29%
29%
40%
57%
46%
8%
34% 55%
28%
2016
2014
15. How can we measure?How can we measure?
2016
2014
22. 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
63. 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