2

Ask DN: Atomic Design Frameworks

over 9 years ago from , Lead UI/UX Designer @ Splash Damage

I'm interested in the thinking behind atomic design. (Check out this informative post for more information: http://bradfrostweb.com/blog/post/atomic-web-design/).

While I can see the benefit of building a site or application from the ground up, I'd like to peek my interest by taking a look at a framework that utilizes this methodology.

Can you guys recommend any frameworks to check out? Or does anyone have good experience with this approach to building web apps or sites?

6 comments

  • Bud ParrBud Parr, over 9 years ago

    These definitions are tough, but I think any sort of Sass/Less based framework allows for "Atomic" thinking, and they're less frameworks and more libraries of discrete elements. I think "Atomic" design is something others might call Object Oriented CSS/HTML of which, the in-development Inuit CSS Framework is an example https://github.com/csswizardry/inuit.css/ and the Bourbon/Neat/Bitters/Refills Sass library is close to that.

    1 point
    • Tom GantzerTom Gantzer, over 9 years ago

      I've seen Intuit mentioned a few times; it seems they are going through a redesign at the moment. Hopefully something will be released soon :) thanks for the info.

      0 points
  • David KizlerDavid Kizler, over 9 years ago

    Check out Barebones. And also this list of front-end-style-guides. Not sure if Barebones is quite a framework, but it has a nice collection of patterns that can be used as the basis for a style guide.

    Andrew Clarke is also a big proponent of atomic design and created Rock Hammer.

    In theory I like this approach of modular design, but in practice I still can't figure out how to make it work in terms of what the deliverable is to clients.

    1 point
    • Tom GantzerTom Gantzer, over 9 years ago

      Nice link, I'm also unsure about what would be delivered but I figure it's worth exploring as an option. Thanks for the info and your thoughts.

      0 points
  • Oriol ValldeperasOriol Valldeperas, over 9 years ago

    Don't forget to take a look to things like the Mailchimp Pattern Library as well.

    There's some good things on this kind of examples. As they say that it's not really a framework that could solve any needs, it's more a pattern collection and usage to work only with their needs and that's what a client wants.

    PS: That is a thing I would like Brad Frost to include in the Atomic Design talk: meaning and entities on what is build as organisms (more than just combination of defined atoms) and how they work within different sizes, environments, etc, being always recognizable as such entities.

    0 points
    • Tom GantzerTom Gantzer, over 9 years ago

      Nice ideas. I think the barrier for me is wondering how we deal with global components vs localised components that are used maybe once or twice. If I can figure this out, as well as what form the deliverable would take, I can see this being extremely powerful. As with anything I also worry about the practicality of implementing this methodology in a real-world scenario.

      The pattern library is great, I love how informative they are with their approach to the design and their links to articles and inspiration at the bottom. Thanks for the info :)

      0 points