↵

AMA: Brad Frost, Web Designer

7 years ago from Brad Frost, Brad Frost Web

  • Brian KrallBrian Krall, 7 years ago

    Hey Brad! I'm working on a project right now where we want to apply various skins to a componentized UI structure. Say, you have a default set of buttons and then you apply a separate stylesheet and those buttons have a new color palette, new spacing, etc. But you have a lot more components than just buttons, obviously.

    Your buddy Dan Mall wrote a great article about this, talking about content patterns vs. display patterns (http://danielmall.com/articles/content-display-patterns/).

    I'm interested in your perspective from the CSS side of things. How do you apply atomic design to a UI that is going to have a different look/feel basic on a new theme? Do your group all your skins in with your component styles? Or bigger picture, how do you decide what the default style looks like?

    0 points
    • Brad FrostBrad Frost, 7 years ago

      I'm in the midst of these conversations with a few clients right now.

      I see the relationship between the over-arching design system and each implementation as a two-way street. The global design system obviously influences each implementation of it, but each instance should also influence the global system.

      How do you apply atomic design to a UI that is going to have a different look/feel basic on a new theme?

      Yep, I think you have it right that there would be a global.css stylesheet and a theme.css file to go along with it. Snook's SMACSS addresses this pretty well.

      Do your group all your skins in with your component styles?

      One thing we've done is build some functionality into the pattern library that allows you to toggle the themes. Have some form of dropdown or radio button that swaps out each theme's styles so you can see what each theme-flavored component looks like.

      Or bigger picture, how do you decide what the default style looks like?

      I would take a step back, extract the shared properties, and bake those properties into the system. If for instance one implementation uses a bunch of crazy textures and drop shadows on their buttons, then great! But those don't necessarily need to be included in the global styles. If however, the properties are more structural in nature (flexed items, absolute positioning, etc) then those should probably be addressed in the global styles.

      1 point