Graduating From Bootstrap

(With Help From Atomic Design)

Danny Brown | dannyrb.com | @danny_brown13 | http://spkr8.com/t/73181

About Me

Relevant

• "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?

https://insights.stackoverflow.com/survey/2017#developer-profile-specific-developer-types

Quick Detour

My brain works this way.

https://github.com/bradfrost/frontend-guidelines-questionnaire

http://gph.is/2lChx3s

• 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?)

http://static3.businessinsider.com/image/55f874849dd7cc1c008ba886-960/samsungfoldphone.png
http://www.globalnerdy.com/wordpress/wp-content/uploads/2014/11/lots-of-devices.jpg
https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAAH-AAAAJDFiMzMxZmRmLTIwN2EtNDFmNC1hNjMwLWIwNjE3ZTcyNWNjNg.png

"Works on my machine"

Enter UI Frameworks

• 1 million projects with 5+ stars
• All in top 500 projects on GitHub (by stars)
• Drop UIKit, remainder are in top 60

http://gph.is/2dcNBTT

http://gph.is/1gDlF9j

Why UI Frameworks?

• Battle tested (they're popular, remember?)
• Supports all major browsers and fixes CSS compatibility issues
• Designed with responsive structures, styles and patterns for mobile devices
• Beautiful documentation and community support
• Many, many free theme variations, and paid theme variations

Bootstrap CodePen.io Example

Click here to start Codepen

Click here for Bootstrap Docs

Click here for full site 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

http://gph.is/1MAMw3M

RECAP

Before Bootstrap:

After Bootstrap:

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?

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

https://makinggoodhumans.files.wordpress.com/2015/12/too-busy-2.jpg

https://juliewaterhouse.com/wp-content/uploads/2015/03/poorly-built-house.jpg.jpg

Sure. Why not?

Atomic Design Methodology

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

Atoms

Button

Label

Input

Molecules

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

Organisms

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

Templates

• 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

Resource: https://placeholder.com/

http://patternlab.io/

Pages

• 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?

http://patternlab.io/

http://bradfrost.com/blog/post/atomic-web-design/

Advantages

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

• Fabricator
  • http://fbrctr.github.io/demo/
• Pattern Lab:
  • http://demo.patternlab.io/
• Fractal:
  • http://jpolete.github.io/springboard/index.html
  • http://bits.24ways.org/
• StyleGuides.io
  • http://styleguides.io/

Live Demo - Pattern Lab

What could go wrong?

http://gph.is/1wWnRAY

Live Demo - Fabricator

What could go wrong?

http://gph.is/1owybgB

- 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

Resources:

• http://styleguides.io/
• http://atomicdesign.bradfrost.com/
• BEM + Atomic Design Naming/Structure
• Tech agnostic design systems