aklcss / atomic-design-resources

List of resources for understanding and implementing Atomic Design

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

atomic-design-resources

List of resources for understanding and implementing Atomic Design

Live examples

Pattern library and living styleguide are products of Atomic Design. Many companies publish theirs online to create a consistent understanding internally and among their partners.

  • Lonely Planet's Styleguide is easy on the eyes, shows little code snippets, and explain the purpose of each documented element very clearly. Good for both designers and developers who work on their platform.
  • Mailchimp's Pattern Library is a byproduct of their 'move to a more responsive, nimble, & intuitive app'. Another easy on the eyes reference.
  • BBC GEL was the pioneering pattern library, and was one of the most comprehensive out there. This one is very design focused with no code examples.

Where to start?

Your next, or current project even!

Start small, with simple things like form elements, buttons and typography. If you're writing decent CSS, you'll notice that a lot these elements are already quite reusable. Split them into different files, write a whole load of comments and start documenting.

  • Patternlab can help you document your atomic patterns
  • Twitter Bootstrap in itself is already a pattern library. Look at their example, and make one for yourself! Everyone should have their own bootstrap.

About

List of resources for understanding and implementing Atomic Design