Graduating From Bootstrap

(With Help From Atomic Design)

Danny Brown | | @danny_brown13 |

About Me


  • "Full Stack"
  • Product team lead
  • ~5 years experience


Less Relevant

  • Rock Climbing
  • Trying new recipes
  • Baby #2 on the way

Knowledge Survey

Raise your hand if...

  • Have you used Bootstrap?
  • Know Booststrap, Foundation, Skeleton, <drop in framework here>?
  • Know SCSS, LESS, Stylus, etc?
  • Have Node installed, and have used NPM?
  • Have created a design system, pattern lab, or style guide?

Quick Detour

My brain works this way.

  • No dedicated front-end team
  • Establish effective guidelines
  • Write consistent and cohesive code

Click me Danny!

Here's the Focus

  • The web landscape today, and its challenges.
  • Bootstrap to the rescue!!
  • Pinch points: Where Bootstrap fails
  • Enter design systems, pattern libraries, and Atomic Design
  • Real life implementation / examples (the fun stuff)
  • Style guides and additional resources

Web "Pages"

Cross-browser, Cross-platform

Any screen, any device (Toasters? Sure. Why not?)

"Works on my machine"

For most devices, browsers, and screen sizes...

But wait... That's a lot more:

  • Devices we need to buy
  • Manual or automated testing
  • And wait.. You want it to work on IE9 too?!


Enter UI Frameworks

Logo Get It Here GitHub Stars
37,000+ 28,000+ 26,000+ 10,501+
  • 1 million projects with 5+ stars
  • All in top 500 projects on GitHub (by stars)
  • Drop UIKit, remainder are in top 60

Why UI Frameworks?

Includes icons

Animations and jQuery

Abundance of free and professional templates, themes, and plugins (Themeforest, bootswatch)



Bootstrap Example

Why not UI Frameworks?

  • Bloat
    • ~200Kb to ~1Mb (not including plugins/jQuery)
  • JavaScript plugins use jQuery
  • Forced to use framework's class naming convention
    • jumbotron, btn-secondary, container
  • Style overriding and rewrite
    • With changes, documentation no longer matches
  • No customization? Website now looks like millions of others

Does it still... 

  • Save Time
    • On this project? On the next project?
  • Feel fun






Before Bootstrap:

After Bootstrap:

Where UI Frameworks Excel:

  • One-off
  • Drop-in & Go
  • Small, internal, or POC
  • "Web Sites"

Where UI Frameworks Encounter Problems:

  • Spend time now, save time later
  • Reuse "chunks" across projects
  • Medium-to-Large
  • "Web Apps"

When [not] to use

It's not necessarily about using Bootstrap for every client, but rather creating "tiny Bootstraps for every client."


- Dave Rupert

Breaking up the page


  • Can't Photoshop comps for every situation
    • Great for "Design Atmosphere"
  • "Modules" over "Pages"
  • Modular JS
  • Modular CSS: OOCS, SMACSS, and BEM
  • Modular... UI?
  • Break larger modules down
  • Responsive Web
    • ​Fluid grid, flexible media, and media queries

Creating a Design System

Why Style Guides?

  • Promote consistency and cohesion
  • Shared vocabulary
  • Education
  • Testing
  • Speed
  • In it for the long haul

"Designers and developers are forced to think about how their decisions affect the broader design system"

Challenges of Style Guides

  • Hard sell: Overcome short-term mentality
  • "I need a few days/weeks" to get started
  • Treated as side-projects
  • Who maintains / governs?
  • Who is this for?
  • Where are these bits and pieces used?
  • Structure and methodology

Sure. Why not?

Atomic Design Methodology

  • What's in a name?
  • Metaphors that we all get
  • Hierarchy ( less ambiguous )
  • Alternatives


  • Basic building block
  • Can't be broken down further
  • Has own unique properties
  • Come to life with application





  • Group of atoms that function together
  • Abstract --> Concrete
  • Reduces complexity of a pattern
    • "Single Responsibility"
    • Easier to test, reuse, and remain consistent


  • Complex UI Components
  • Groups of molecules and/or atoms and/or organisms
  • Provides important context
  • Easy to reuse; standalone (modern web components)


  • Goodbye chemistry
    • Groups of organisms are... kingdoms?
  • Show design's content structure
  • Provide context for abstract components
  • STRUCTURE > Content
  • Skeleton allows design to accommodate dynamic content


  • A specific instance of a template with real content
  • A place to articulate variations in templates
    • Short versus long paragraphs and headlines
    • Different views based on authenticated roles
    • Varying UI states for no data, little data, lots of data
  • Same templates, but underlying page has changed
    • Do atoms, molecules, and organisms continue to work?


  • See tiniest pieces, and how they form final experience
  • Painter: Individual strokes, and the resulting painting
  • Clean separation between structure and content
  • Clear hierarchy through "atomic" taxonomy
  • Works for interfaces regardless of tech

"It would be foolish to design our buttons and other elements in isolation, then cross our fingers." - Brad Frost

In Practice

  • Cool... But where is the fun stuff?
  • "Real World" Tools
    • Shared vocabulary
    • Speed up your workflow ( time & $$$ )
    • Consistent/Cohesive for free
    • Living documentation
    • Make browser/device/performance testing easier
    • Future friendly
  • An "implementation"
    • Static site generator for atomic design systems
    • Documentation/annotation tool
    • Pattern starter kit

Tools of the Trade

Live Demo - Pattern Lab

What could go wrong?

Live Demo - Fabricator

What could go wrong?

- The problems that need solving

- When to leverage Bootstrap

- When to leverage Pattern Libraries

- An implementation, using Atomic Design

- Tools to help get you there

Atomic Workflow

  • How this can impact whole process
  • Not "just" developers
  • Getting "buy-in"

Maintaining Design Systems

  • Guidelines for contributing/growing
  • Structure
Made with