Using Tomorrow's CSS Today

Transcript

1. None

2. Brian Graves @briangraves

3. None
4. None
5. None
6. None
7. None

8. http://d.fastcompany.net/multisite_files/fastcompany/imagecache/1280/poster/2015/11/3054003-poster-p-1-dont-give-a-hoverboard-this-christmas.jpg

9. None
10. None
11. None

12. https://lh3.googleusercontent.com/-jijITfbqlCk/UUeCfITz0wI/AAAAAAAAQuc/1PjBKq-6KzM/s630-fcrop64=1%2C000033fafffff833/135486852774.jpg

13. The Web

14. None

15. Tables

16. Absolute Positioning / Floats / Inline-Block

17. Flexbox / Grids

18. CSS in 2016 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
22. None
23. None

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 • No color manipulation • No basic arithmetic

29. Things That Make Our Lives Easier

30. Rise of the Preprocessors. How we filled in the gaps.

31. None
32. None
33. None

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. Mixins/Extends

43. Color Functions

44. Nesting

45. Custom Media Queries

46. PostCSS

47. .row { @include display-flex; background: $color-blue; } .row { display:

    -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: #173fb1; }

48. .row { display: flex; background: var(--color-blue); } .row { display:

    -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: #173fb1; }

49. 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.

50. Autoprefixer

51. PostCSS Ecosystem • Autoprefixer • PostCSS-nested • PostCSS-color-function • PostCSS-calc

    • PostCSS-custom-properties • PostCSS-apply • PostCSS-custom-media • CSSNext • PostCSS-import • Can’t find a plugin? Write one in javascript.

52. CSS Custom Properties (variables)

53. :root { --color-blue: #0A81C4; --color-blue-dark: #005581; } .element { color:

    var(--color-blue); } .element:hover { color: var(--color-blue-dark); }

54. Just because you may like Sass variable syntax more does

    not mean that you should just forsake the new spec. – Jake Albaugh http://codepen.io/jakealbaugh/post/css4-variables-and-sass

55. http://caniuse.com/#feat=css-variables

56. Variables lose their value if you have to constantly track

    down what they represent. – Ryan Heap
57. None

58. @Apply (mixins/extends)

59. :root { --clearfix: { display: table; clear: both; content: ‘’;

    }; } .element:after { @apply --clearfix; }

60. https://www.chromestatus.com/feature/5753701012602880

61. Color Functions

62. .element { color: #1982C5; } .element--modifier { color: color(#1982C5 tint(40%));

    }

63. .element { color: #1982C5; } .element--modifier { color: color(#1982C5 shade(40%));

    }

64. CSS Color Functions • Tints & Shades • RGBA Adjustment

    • HSL/HWB Adjustment • Color Blending (blend & blenda) • Guarantee Contrast

65. /* 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%) ); }

66. /* 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%) ); }

67. /* 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%) ); }

68. Nesting

69. .element { color: blue; {&.modifier { color: red; }} }

70. .element { color: blue; {&.modifier { color: red; }} }

71. .element { color: blue; &.modifier { color: red; } }

72. .im { .a { .way { .over { .nested {

    .selector { color: red; } } } } } }

73. Custom Media Queries

74. @custom-media --small (min-width: 30em); @media (--small) { .element { font-size:

    1.5rem; } }

75. @media only screen and (min-width: 30em) { .element { font-size:

    1.5rem; } }

76. @custom-media --small (min-width: 30em); @media (--small) { .element { font-size:

    1.5rem; } }

77. New Media Query Syntax

78. @media (width >= 30em) and (width <= 60em) { .element

    { font-size: 1.5rem; } }

79. @media (min-width: 30em) and (max-width: 60em) { .element { font-size:

    1.5rem; } }

80. Partials & Globbing

81. /* 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“; …

82. 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

83. 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

84. 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

85. One Day…

86. Let’s Get As Close As We Can To The Real

    Thing

87. @briangraves Thank You!