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

Using Tomorrow's CSS Today

8b8063eb1fecbaf7db2f045a89e73349?s=47 Brian Graves
September 26, 2015

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.

8b8063eb1fecbaf7db2f045a89e73349?s=128

Brian Graves

September 26, 2015
Tweet

Transcript

  1. None
  2. Brian Graves @briangraves

  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  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
  14. None
  15. None
  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.

  22. None
  23. None
  24. None
  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!