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

Collaborative Style Syntax

Collaborative Style Syntax

There comes a time when designing a front-end styling system with the traditional values of OOCSS/BEM/SMACSS doesn't work. In order to build a slim, efficient, and flexible CSS codebase, I turned to projects like BassCSS and Tachyons for inspiration and found answers for not just the architectural challenges but communication challenges when using CSS in cross-functional teams.

This presentation covers a quick overview of "functional" CSS and how it's being used at Namely to establish a Collaborative Style Syntax.

HipsterBrown

October 20, 2015
Tweet

More Decks by HipsterBrown

Other Decks in Programming

Transcript

  1. Collaborative
    Style
    Syntax

    View Slide

  2. Nick Hehr
    • empathetic community member
    • front-end developer at Namely
    • Hoodie & Tessel Contributor
    • Mustached Human
    • @hipsterbrown

    View Slide

  3. OVERVIEW
    • What is “functional” CSS?
    • Why is it nice at Namely?
    • Moving Forward

    View Slide

  4. What is
    “functional” CSS?

    View Slide

  5. Functional CSS is…
    • Immutable
    • Composable
    • Clearly Named
    • Flexible

    View Slide

  6. Immutable

    View Slide

  7. http:/
    /csswizardry.com/2015/03/immutable-css/

    View Slide

  8. http:/
    /johnotander.com/immutable-css/

    View Slide

  9. Composable

    View Slide

  10. https:/
    /github.com/mrmrs/css-uncut

    View Slide

  11. https:/
    /github.com/mrmrs/css-uncut

    View Slide

  12. Clearly Named

    View Slide

  13. http:/
    /www.basscss.com/

    View Slide

  14. http:/
    /www.basscss.com/docs/white-space/#margins

    View Slide

  15. http:/
    /www.basscss.com/docs/colors/

    View Slide

  16. http:/
    /tachyons.io/

    View Slide

  17. Flexible

    View Slide

  18. http:/
    /www.basscss.com/customize/

    View Slide

  19. http:/
    /tachyons.io/

    View Slide

  20. Why is it
    nice at Namely?

    View Slide

  21. GOALS
    • Consistency
    • Performance
    • Documentation

    View Slide

  22. CONSISTENCY

    View Slide

  23. Consistency
    • Shared Jargon (i.e. “what’s a popover?”)
    • Sensible Defaults
    • Abstracted Values (rems, hex colors, etc)

    View Slide

  24. PERFORMANCE

    View Slide

  25. http:/
    /cssstats.com/stats?url=https%3A%2F%2Fnamely.namely.com

    View Slide

  26. 1.04 MB
    ===
    A LOT OF CODE

    View Slide

  27. http:/
    /cssstats.com/stats?url=http%3A%2F%2Ftheguardian.com&name=The%20Guardian

    View Slide

  28. http:/
    /cssstats.com/stats?url=http%3A%2F%2Fetsy.com&name=Etsy

    View Slide

  29. http:/
    /cssstats.com/stats?url=http%3A%2F%2Fgithub.com&name=GitHub

    View Slide

  30. http:/
    /cssstats.com/stats?link=http%3A%2F%2Fnamely.surge.sh%2Fapp.css

    View Slide

  31. DOCUMENTATION

    View Slide

  32. Documentation
    • Self-Documenting (nearly)
    • Simpler Codebase
    • Finite

    View Slide

  33. http:/
    /www.lightningdesignsystem.com/design/layout

    View Slide

  34. Moving Forward

    View Slide

  35. Namely UI

    View Slide

  36. Namely UI
    • Flexible set of React components
    • Library of functional CSS utilities
    • Self-Documenting (nearly) via static site

    View Slide

  37. https:/
    /github.com/namely/styleguide

    View Slide

  38. http:/
    /namely.surge.sh/

    View Slide

  39. Thank You

    View Slide