Using Tomorrow's CSS Today

CSS4 may only be in the working draft stage, but that doesn't mean we can't begin to use some of it's capabilities in our current designs. Variables, color manipulation, custom media queries, and custom selectors are just a few of the powerful new features that can be utilized to take our css to the next level. This talk will take a look at the benefits of using postprocessers to write powerful, bleeding-edge CSS and have it work in today's browsers.

Transcript

2. Brian Graves @briangraves
10. CSS in 2015 is Amazing.
11. WHERE HAVE WE BEEN?
12. There is No CSS3! And other facts about how standards are made.
13. Despite the popularity of the “CSS3” buzzword, there is actually no spec defining such a thing. – Lea Verou
16. Animation
17. Typography
18. Layout
19. “CSS is not a real programming language”
20. Problems with CSS • Cross-browser compatibility issues • Vendor prefixes • No variables • No inline importing • No nested selectors • No functions/mixins • No color manipulation • No basic arithmetic
21. Rise of the Preprocessors. How we filled in the gaps.
25. .row { @include display-flex; background-color: $color-blue; } .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: #173fb1; }
26. Preprocessors Perpetuate A Problem. – Aaron Ladage
27. More & More Layers of Abstraction
28. Problems with Preprocessors • Not “real” code • Proprietary syntax • Often written in non front-end languages • Not as easily extensible • Must be compiled • Compile times can be slow • Browsers are catching up
29. Preprocessors? Where we’re going, we don’t need preprocessors.
30. THE FUTURE OF CSS IS NOW
31. Variables
32. Color Functions
33. Nesting
34. Custom Media Queries
35. PostCSS
36. .row { @include display-flex; background: $color-blue; } .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: #173fb1; }
37. .row { display: flex; background: var(—color-blue); } .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: #173fb1; }
38. PostCSS Advantages • Write CSS using CSS • Use CSS3 without worry • Even Use CSS4 • Modular • Works with your existing task runner • Faster compile times • Built on Node • No Ruby dependencies • Easier to debug • Tons of existing plugins • Can’t find a plugin? Write one in javascript.
39. Autoprefixer
40. PostCSS Ecosystem • Autoprefixer • PostCSS-nested • PostCSS-color-function • PostCSS-calc • PostCSS-custom-properties • PostCSS-mixins • PostCSS-custom-media • CSSNext • PostCSS-import • Can’t find a plugin? Write one in javascript.
41. Variables
42. :root { --color-blue: #0A81C4; --color-blue-dark: #005581; } .element { color: var(--color-blue); } .element:hover { color: var(--color-blue-dark); }
43. Variables lose their value if you have to constantly track down what they represent. – Ryan Heap
44. Color Functions
45. .element { color: #1982C5; } .element-modifier { color: color(#1982C5 tint(40%)); }
46. .element { color: #1982C5; } .element-modifier { color: color(#1982C5 shade(40%)); }
47. CSS Color Functions • Tints & Shades • RGBA Adjustment • HSL/HWB Adjustment • Color Blending (blend & blenda) • Guarantee Contrast
48. /* combine with variables to create palettes */ :root { --color-blue: #1982C5; --color-blue-light: color( var(--color-blue) tint(40%) ); --color-blue-dark: color( var(--color-blue) shade(40%) ); }
49. /* map variables to variables */ :root { --color-text: var(--color-blue); --color-text-light: color( var(--color-text) tint(40%) ); --color-text-dark: color( var(--color-text) shade(40%) ); }
50. /* map variables to variables */ :root { --color-text: var(--color-orange); --color-text-light: color( var(--color-text) tint(40%) ); --color-text-dark: color( var(--color-text) shade(40%) ); }
51. Nesting
52. .element { color: blue; {&.modifier { color: red; }} }
53. .element { color: blue; {&.modifier { color: red; }} }
54. .element { color: blue; &.modifier { color: red; } }
55. .im { .a { .way { .over { .nested { .selector { color: red; } } } } } }
56. Custom Media Queries
57. @custom-media --small (min-width: 450px); @media (--small) { .element { font-size: 22px; } }
58. @media only screen and (min-width: 450px) { .element { font-size: 22px; } }
59. @custom-media --small (min-width: 450px); @media (--small) { .element { font-size: 22px; } }
60. New Media Query Syntax
61. @media (width >= 450px) and (width <= 600px) { .element { font-size: 22px; } }
62. @media (min-width: 450px) and (max-width: 600px) { .element { font-size: 22px; } }
63. Partials & Globbing
64. /* generated with grunt-sass-globbing */ @import "utilities/variables"; @import "utilities/mixins"; @import "utilities/reset"; @import “utilities/breakpoints"; @import “atoms/buttons"; @import “atoms/headings"; @import “atoms/icons"; @import “atoms/text"; @import “molecules/components/disclaimer“; …
65. Mixins
66. Problems with CSS • Cross-browser compatibility issues • Vendor prefixes • No variables • No inline importing • No nested selectors • No functions/mixins • No color manipulation • No basic arithmetic
67. One Day…
68. Let’s Get As Close As We Can To The Real Language
69. @briangraves Thank You!