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

Using Tomorrow's CSS Today

8b8063eb1fecbaf7db2f045a89e73349?s=47 Brian Graves
October 30, 2015

Using Tomorrow's CSS Today

8b8063eb1fecbaf7db2f045a89e73349?s=128

Brian Graves

October 30, 2015
Tweet

Transcript

  1. None
  2. Brian Graves @briangraves

  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. The Web

  14. None
  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
  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/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.

  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. 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
  54. None
  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!