Graduating From Bootstrap
(With Help From Atomic Design)
Danny Brown | dannyrb.com | @danny_brown13 | http://spkr8.com/t/73181
- "Full Stack"
- Product team lead
- ~5 years experience
- Rock Climbing
- Trying new recipes
- Baby #2 on the way
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?
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
Any screen, any device (Toasters? Sure. Why not?)
"Works on my machine"
For most devices, browsers, and screen sizes...
- Functionally doesn't break
- Is actually responsive, and not just shrunk to fit the screen
- UX optimized for resolution's contexts
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|
- 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?
Animations and jQuery
Abundance of free and professional templates, themes, and plugins (Themeforest, bootswatch)
Bootstrap CodePen.io Example
Why not UI Frameworks?
- ~200Kb to ~1Mb (not including plugins/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
Where UI Frameworks Excel:
- Drop-in & Go
- Small, internal, or POC
- "Web Sites"
Where UI Frameworks Encounter Problems:
- Spend time now, save time later
- Reuse "chunks" across projects
- "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
- Fluid grid, flexible media, and media queries
Creating a Design System
Why Style Guides?
- Promote consistency and cohesion
- Shared vocabulary
- 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 )
- 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
- 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
- How this can impact whole process
- Not "just" developers
- Getting "buy-in"
Maintaining Design Systems
- Guidelines for contributing/growing