AMA: Brad Frost, Web Designer

7 years ago from Brad Frost, Brad Frost Web

  • 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