Using Tomorrow's CSS Today

Transcript

2. Brian Graves @briangraves
13. The Web
15. Tables
16. Absolute Positioning / Floats / Inline-Block
17. Flexbox / Columns
18. CSS in 2015 is Amazing.
19. WHERE HAVE WE BEEN?
20. There is No CSS3! And other facts about how standards are made.
21. Despite the popularity of the “CSS3” buzzword, there is actually no spec defining such a thing. – Lea Verou
24. Animation
25. Typography
26. Layout
27. “CSS is not a real language”
28. 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
29. Things That Make Our Lives Easier
30. Rise of the Preprocessors. How we filled in the gaps.
34. .row { @include display-flex; background-color: $color-blue; } .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: #173fb1; }
35. Do Preprocessors Solve The Problem?
36. Preprocessors Perpetuate A Problem. – Aaron Ladage
37. More & More Layers of Abstraction
38. Problems with Preprocessors • Not real front-end 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
39. Preprocessors? Where we’re going, we don’t need preprocessors.
40. THE FUTURE OF CSS IS NOW
41. Variables
42. Color Functions
43. Nesting
44. Custom Media Queries
45. PostCSS
46. .row { @include display-flex; background: $color-blue; } .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: #173fb1; }
47. .row { display: flex; background: var(--color-blue); } .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: #173fb1; }
48. PostCSS Advantages • Write CSS using CSS • Use CSS3 without worry • Even Use CSS4 • Modular (Use only what you need) • 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.
49. Autoprefixer
50. 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.
51. Variables
52. :root { --color-blue: #0A81C4; --color-blue-dark: #005581; } .element { color: var(--color-blue); } .element:hover { color: var(--color-blue-dark); }
53. Variables lose their value if you have to constantly track down what they represent. – Ryan Heap
55. Color Functions
56. .element { color: #1982C5; } .element--modifier { color: color(#1982C5 tint(40%)); }
57. .element { color: #1982C5; } .element--modifier { color: color(#1982C5 shade(40%)); }
58. CSS Color Functions • Tints & Shades • RGBA Adjustment • HSL/HWB Adjustment • Color Blending (blend & blenda) • Guarantee Contrast
59. /* 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%) ); }
60. /* 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%) ); }
61. /* 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%) ); }
62. Nesting
63. .element { color: blue; {&.modifier { color: red; }} }
64. .element { color: blue; {&.modifier { color: red; }} }
65. .element { color: blue; &.modifier { color: red; } }
66. .im { .a { .way { .over { .nested { .selector { color: red; } } } } } }
67. Custom Media Queries
68. @custom-media --small (min-width: 30em); @media (--small) { .element { font-size: 1.5rem; } }
69. @media only screen and (min-width: 30em) { .element { font-size: 1.5rem; } }
70. @custom-media --small (min-width: 30em); @media (--small) { .element { font-size: 1.5rem; } }
71. New Media Query Syntax
72. @media (width >= 30em) and (width <= 60em) { .element { font-size: 1.5rem; } }
73. @media (min-width: 30em) and (max-width: 60em) { .element { font-size: 1.5rem; } }
74. Partials & Globbing
75. /* 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“; …
76. Mixins
77. 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
78. 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
79. 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
80. One Day…
81. Let’s Get As Close As We Can To The Real Thing
82. @briangraves Thank You!