Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Using Tomorrow's CSS Today

8b8063eb1fecbaf7db2f045a89e73349?s=47 Brian Graves
April 28, 2016

Using Tomorrow's CSS Today

8b8063eb1fecbaf7db2f045a89e73349?s=128

Brian Graves

April 28, 2016
Tweet

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!