Skip to content

List of resources for understanding and implementing Atomic Design

Notifications You must be signed in to change notification settings

aklcss/atomic-design-resources

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 

Repository files navigation

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published