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?
- 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
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
- Document and iterate
- Style Guides:
- Brand identity
- Design language
- Voice & tone
- Code style
- Pattern libraries*
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
- Pattern Lab:
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