Juri Strumpflohner
Juri Strumpflohner Juri is a full stack developer and tech lead with a special passion for the web and frontend development. He creates online videos for Egghead.io, writes articles on his blog and for tech magazines, speaks at conferences and holds training workshops. Juri is also a recognized Google Developer Expert in Web Technologies

Building an Enterprise CSS Framework

2 min read

I’ve already had a couple of times the chance to work on a common style guide for our enterprise-wide web applications. It really is tough. Not only in coming up with a standard that meet the need of most of our apps, but especially in documenting, maintaining and letting evolve it over time.

The people from Salesforce seem to have done a really really nice job: Lightning Design System

Some notes

  • have a living style guide
  • design system of patterns, CSS + markup samples, icons, custom fonts, color swatches etc…
  • resources used equally by internal devs as well as external partners (huge 👍 )
  • 4 design principles: clarity, efficiency, consistency, beauty
  • Clarity
    • prefer verbose class names for the sake of saving bits
    • adopted BEM naming.
    • documentation
    • living example, you can interact with (i.e.) the button, hover it, click it..
  • Efficiency
    • audit & collect components in your different web apps and standardize them
    • align styles: common borders, font sizes,…
    • build inventory of components
    • start from smallest component -> aggregate to build larger ones
    • account for special needs: enterprise apps might have unique traits
    • interesting decision: make all headings same size to avoid scenarios where devs take a lower/higher heading just for the purpose of having a larger/smaller font. Use semantic classes instead
    • accessibility!
  • Consistency
    • design tokens: basic atoms of the design system, common variables like fonts, colors,… (can be done with SASS, Less)
    • play well with others -> prefix styles
  • Beauty
    • SVG icons -> with sprites
    • width controlled by parent container
  • How to make decisions
  • Open Source:

Questions? Thoughts? Hit me up on Twitter
comments powered by Disqus