Juri Strumpflohner

RSS

Building an Enterprise CSS Framework

Author profile pic
Juri Strumpflohner
Published

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 :thumbsup: )
  • 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: