SlideShare a Scribd company logo
ATOMIC DESIGN@brad_frost
PAGES
GRAPHIC? WRITTEN PAGE? WEB PAGE? BOTH?
http://www.flickr.com/photos/pandora_6666/4927865092/
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
WHAT IS AN INTERFACE MADE OF?
http://bradfrost.github.com/this-is-responsive/patterns.html
Design systems, not pages.
-Andy Clarke
http://stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/
http://foundation.zurb.com/
getbootstrap.com
THESE THINGS ARE GREAT, BUT...
Atomic Design - An Event Apart San Diego
FRAMEWORK POTENTIAL PITFALLS
๏ One-size-fits-all
๏ Lookalike issues
๏ Potential for bloat/unneeded stuff
๏ Might not do everything you need
๏ Compatibility with existing sites
๏ Subscribe to someone else’s structure, naming, style
Tiny Bootstraps, for every client.
-Dave Rupert
http://daverupert.com/2013/04/responsive-deliverables/
Responsive deliverables should look
a lot like fully-functioning Twitter
Bootstrap-style systems custom
tailored for your clients’ needs.
-Dave Rupert
http://daverupert.com/2013/04/responsive-deliverables/
http://maban.co.uk/projects/front-end-style-guides/
BENEFITS OF FRONT-END STYLE GUIDES
๏ Promotes consistency and cohesion
๏ Easier to test
๏ Better workflow
๏ Creates a shared vocabulary
๏ Useful reference
http://24ways.org/2011/front-end-style-guides/
http://brettjankord.com/projects/style-guide-boilerplate/
http://patternprimer.adactio.com/
http://barebones.paulrobertlloyd.com
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
http://style.codeforamerica.org/
http://ux.mailchimp.com/patterns/
http://yelp.com/styleguide
http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
I LOVE THESE.
MO’ PATTERNS, MO’ PROBLEMS
๏ Time consuming to create
๏ Treated as a auxiliary project
๏ Often too abstract
๏ Seen only as a designer/developer tool
๏ Often created after a project launches
๏ Often incomplete/only serving present cases
๏ Lacking a clear methodology
ATOMIC DESIGN
2H2 + O2 → 2H20
C + O2 → CO2
CH4 + O2 → CO2 + H2O
C8H18 + O2 → CO2 + H20
C2H6 + O2 → CO2 + H2O
Atomic Design - An Event Apart San Diego
2H2+O2→2H20
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
http://joshduck.com/periodic-table.html
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
ENTER KEYWORD
SEARCH THE SITE
SEARCH
ENTER KEYWORD
SEARCH THE SITE
SEARCH
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
You can create good experiences without
knowing the content. What you can’t do is
create good experiences without knowing
your content structure. What is your content
made from, not what your content is.
-Mark Boulton
http://www.markboulton.co.uk/journal/structure-first-content-always
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
ABSTRACT CONCRETE
ABSTRACT CONCRETE
CREATORS CLIENTS
REFERENCE BUILD REVIEW
The idea of designing components like this, out of
context and without layout, might sound strange—
particularly if you’ve been used to designing Web pages
the traditional way. But we’ve been abstracting design
ideas like this for the longest time, for example in our
use of mood boards and even the cropped designs we find
on sites like Dribbble.
-Andy Clarke
http://stuffandnonsense.co.uk/blog/about/an-extract-from-designing-atoms-and-elements
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
DAVE OLSEN@dmolsen
WHAT PATTERN LAB IS
๏ A design system builder
๏ A comprehensive custom component library
๏ A pattern starter kit
๏ A practical viewport resizer
๏ An annotation tool
WHAT PATTERN LAB AIN’T
๏ A UI framework
๏ Language, library, or style dependent
๏ Incredibly rigid
๏ “Just” a pattern library, but also not a production-ready
static site generator
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
MOLECULE GUTS
code block!
!
<div class="block block-inset">
<div class="b-thumb">
{{> atoms-img-landscape-4x3 }}
</div>
<div class="b-text">
<h2>{{ headline.short }}</h2>
</div>
</div>
!
BASIC INCLUDE
code block!
!
!
!
!
!
!
!
{{> molecules-block-inset }}
!
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
ORGANISM GUTS
code block!
!
!
<header class="header" role="banner">
{{> atoms-header-ad }}
{{> atoms-logo }}
{{> molecules-primary-nav }}
{{> molecules-search }}
{{> molecules-social-nav }}
</header>
BASIC INCLUDE
code block!
!
!
!
!
{{> organisms-header }}
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
TEMPLATE GUTS
code block{{> organisms-header }}
<main role="main">
<div class="l-two-col">
<div class="l-main">
{{> organisms-article-body }}
{{> molecules-social-share }}
{{> organisms-comments }}
</div><!--end l-main-->
!
<div class="l-sidebar">
{{> organisms-related-posts }}
{{> organisms-recent-tweets }}
</div><!--end l-sidebar-->
</div><!--end l-two-col-->
</main><!--End role=main-->
{{> organisms-footer }}
!
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
CONTENT STRUCTURE ACTUAL CONTENT
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
TEMPLATE GUTS
code block{{# hero }}
{{> molecules-block-hero }}
{{/ hero}}
!
<div class="g g-3up">
{{# touts}}
<div class="gi">
{{> molecules-inset-block }}
</div>
{{/ touts}}
</div>
PIPING IN REAL CONTENT WITH JSON
code block!
!
"hero" : {
"img": {
"landscape-16x9": {
"src": "images/sample/mountains.jpg",
"alt": "Mountains"
}
},
"headline" : {
"medium" : "Top 10 mountin ranges"
}
}
PIPING IN REAL CONTENT WITH JSON
code block"touts" : [
{
"img": {
"landscape-4x3": {
"src": "../../images/sample/climber.jpg",
"alt": "Climber"
}
},
"headline" : {
"short" : "Extreme climbing tips"
}
},
{
"img": {
"landscape-4x3": {
"src": “../../images/sample/stream.jpg",
"alt": "Stream"
}
},
"headline" : {
"short" : “Stream Hiking"
}
VIEWER
320PX.
320PX.
480PX.
320PX.
480PX.
768PX.
320PX.
480PX.
768PX.
1024PX.
320PX.
480PX.
768PX.
1024PX.
THE FOLD.
320PX.
480PX.
768PX.
1024PX.
THE FOLD.
OH GOD THE FOLD.
RESOURCE
http://bradfrostweb.com/demo/ish/
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
ANNOTATIONS
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
code block!
!
{
"el": ".header",
"title": "Header",
"title": "The header is a global element…"
},
{
"el": ".nav",
"title": "Primary Navigation",
"title": "The navigation is…"
}
ANNOTATIONS WITH JSON
LINEAGE
Atomic Design - An Event Apart San Diego
A BUNCH OF OTHER STUFF
๏ Code view (Mustache and rendered HTML)
๏ Pattern status
๏ Auto-refresh
๏ Page follow
๏ Future: plugins
http://patternlab.io
IF ANYTHING GOES WRONG WITH
PATTERN LAB, BLAME @DMOLSEN.
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
SET EXPECTATIONS
http://www.pointswestav.com/wp-content/uploads/2011/04/Projector-meeting.jpg
As an industry, we sell websites like
paintings. Instead, we should be selling
beautiful and easy access to content,
agnostic of device, screen size, or context.
-Dan Mall
http://danielmall.com/articles/the-post-psd-era/
COMPLEX NAVIGATIONDEATH TO THE WATERFALL
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
GATHER
http://stylifyme.com/
Atomic Design - An Event Apart San Diego
http://bradfrostweb.com/blog/post/interface-inventory/
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
๏ Document your interface
๏ Promote consistency
๏ Establish which elements will be challenging to translate
into a responsive environment
๏ Lay the groundwork for a future style guide/pattern library
INTERFACE INVENTORY
http://blog.easy-designs.net/archives/evernote-for-interface-inventories/
ESTABLISH DIRECTION
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
RESOURCE
http://styletil.es/
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
ROLL UP OUR SLEEVES
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
CONTENT STRUCTURE ACTUAL CONTENT
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
http://trentwalton.com/2011/07/14/content-choreography/
Atomic Design - An Event Apart San Diego
WHEN YOU’RE FINISHED CHANGING
YOU’RE FINISHED.
THIS IS FUN!
MOBILE WEB
THANKS!@brad_frost

More Related Content

What's hot

Design Pattern For C# Part 1
Design Pattern For C# Part 1Design Pattern For C# Part 1
Design Pattern For C# Part 1
Shahzad
 
Animations in Flutter
Animations in FlutterAnimations in Flutter
Animations in Flutter
Bartosz Kosarzycki
 
PowerShell: Automation for Everyone
PowerShell: Automation for EveryonePowerShell: Automation for Everyone
PowerShell: Automation for Everyone
Intergen
 
GITS Class #16: CI/CD (Continuous Integration & Continuous Deployment) with G...
GITS Class #16: CI/CD (Continuous Integration & Continuous Deployment) with G...GITS Class #16: CI/CD (Continuous Integration & Continuous Deployment) with G...
GITS Class #16: CI/CD (Continuous Integration & Continuous Deployment) with G...
GITS Indonesia
 
Reactjs
Reactjs Reactjs
Reactjs
Neha Sharma
 
Declarative Clients in Spring
Declarative Clients in SpringDeclarative Clients in Spring
Declarative Clients in Spring
VMware Tanzu
 
DDD in PHP
DDD in PHPDDD in PHP
DDD in PHP
Paulo Victor Gomes
 
Xke spring boot
Xke spring bootXke spring boot
Xke spring boot
sourabh aggarwal
 
Solid Principles
Solid PrinciplesSolid Principles
Solid Principles
NexThoughts Technologies
 
Git training v10
Git training v10Git training v10
Git training v10
Skander Hamza
 
Jetpack Compose - Android’s modern toolkit for building native UI
Jetpack Compose - Android’s modern toolkit for building native UIJetpack Compose - Android’s modern toolkit for building native UI
Jetpack Compose - Android’s modern toolkit for building native UI
Gilang Ramadhan
 
Learning git
Learning gitLearning git
Learning git
Sid Anand
 
React JS
React JSReact JS
Solid principles
Solid principlesSolid principles
Solid principles
Monica Rodrigues
 
Gitlab flow solo
Gitlab flow soloGitlab flow solo
Gitlab flow solo
viniciusban
 
React Components Lifecycle | React Tutorial for Beginners | ReactJS Training ...
React Components Lifecycle | React Tutorial for Beginners | ReactJS Training ...React Components Lifecycle | React Tutorial for Beginners | ReactJS Training ...
React Components Lifecycle | React Tutorial for Beginners | ReactJS Training ...
Edureka!
 
Clean architecture
Clean architectureClean architecture
Clean architecture
Lieven Doclo
 
D2 domain driven-design
D2 domain driven-designD2 domain driven-design
D2 domain driven-design
Arnaud Bouchez
 
GraalVM Native and Spring Boot 3.0
GraalVM Native and Spring Boot 3.0GraalVM Native and Spring Boot 3.0
GraalVM Native and Spring Boot 3.0
MoritzHalbritter
 
GitLab.pptx
GitLab.pptxGitLab.pptx
GitLab.pptx
LeoulZewelde1
 

What's hot (20)

Design Pattern For C# Part 1
Design Pattern For C# Part 1Design Pattern For C# Part 1
Design Pattern For C# Part 1
 
Animations in Flutter
Animations in FlutterAnimations in Flutter
Animations in Flutter
 
PowerShell: Automation for Everyone
PowerShell: Automation for EveryonePowerShell: Automation for Everyone
PowerShell: Automation for Everyone
 
GITS Class #16: CI/CD (Continuous Integration & Continuous Deployment) with G...
GITS Class #16: CI/CD (Continuous Integration & Continuous Deployment) with G...GITS Class #16: CI/CD (Continuous Integration & Continuous Deployment) with G...
GITS Class #16: CI/CD (Continuous Integration & Continuous Deployment) with G...
 
Reactjs
Reactjs Reactjs
Reactjs
 
Declarative Clients in Spring
Declarative Clients in SpringDeclarative Clients in Spring
Declarative Clients in Spring
 
DDD in PHP
DDD in PHPDDD in PHP
DDD in PHP
 
Xke spring boot
Xke spring bootXke spring boot
Xke spring boot
 
Solid Principles
Solid PrinciplesSolid Principles
Solid Principles
 
Git training v10
Git training v10Git training v10
Git training v10
 
Jetpack Compose - Android’s modern toolkit for building native UI
Jetpack Compose - Android’s modern toolkit for building native UIJetpack Compose - Android’s modern toolkit for building native UI
Jetpack Compose - Android’s modern toolkit for building native UI
 
Learning git
Learning gitLearning git
Learning git
 
React JS
React JSReact JS
React JS
 
Solid principles
Solid principlesSolid principles
Solid principles
 
Gitlab flow solo
Gitlab flow soloGitlab flow solo
Gitlab flow solo
 
React Components Lifecycle | React Tutorial for Beginners | ReactJS Training ...
React Components Lifecycle | React Tutorial for Beginners | ReactJS Training ...React Components Lifecycle | React Tutorial for Beginners | ReactJS Training ...
React Components Lifecycle | React Tutorial for Beginners | ReactJS Training ...
 
Clean architecture
Clean architectureClean architecture
Clean architecture
 
D2 domain driven-design
D2 domain driven-designD2 domain driven-design
D2 domain driven-design
 
GraalVM Native and Spring Boot 3.0
GraalVM Native and Spring Boot 3.0GraalVM Native and Spring Boot 3.0
GraalVM Native and Spring Boot 3.0
 
GitLab.pptx
GitLab.pptxGitLab.pptx
GitLab.pptx
 

Viewers also liked

Atomic design
Atomic designAtomic design
Atomic design
Brad Frost
 
Looking for a place to hang my helmet
Looking for a place to hang my helmetLooking for a place to hang my helmet
Looking for a place to hang my helmet
Brad Frost
 
Beyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web DesignBeyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web Design
Brad Frost
 
For a Future-Friendly Web (Mobilism 2012)
For a Future-Friendly Web (Mobilism 2012)For a Future-Friendly Web (Mobilism 2012)
For a Future-Friendly Web (Mobilism 2012)
Brad Frost
 
For a Future-Friendly Web
For a Future-Friendly WebFor a Future-Friendly Web
For a Future-Friendly Web
Brad Frost
 
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBeyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Brad Frost
 
Selling The Mobile Web
Selling The Mobile WebSelling The Mobile Web
Selling The Mobile Web
Brad Frost
 
Death To Bullshit
Death To BullshitDeath To Bullshit
Death To Bullshit
Brad Frost
 
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown EditionResponsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Brad Frost
 
For a Future-Friendly Web (WebVisions Chicago 2012)
For a Future-Friendly Web (WebVisions Chicago 2012)For a Future-Friendly Web (WebVisions Chicago 2012)
For a Future-Friendly Web (WebVisions Chicago 2012)
Brad Frost
 
Adventures in Atomic Design
Adventures in Atomic DesignAdventures in Atomic Design
Adventures in Atomic Design
Andrew Jones
 
Uso de las tics en la formación ddes
Uso de las tics en la formación  ddesUso de las tics en la formación  ddes
Uso de las tics en la formación ddes
Nancy Zenaida López Salgado
 
Helping Your Company Adopt a User-Centered Process
Helping Your Company Adopt a User-Centered ProcessHelping Your Company Adopt a User-Centered Process
Helping Your Company Adopt a User-Centered Process
Zack Naylor
 
Wp3 refresh pgh
Wp3 refresh pghWp3 refresh pgh
Wp3 refresh pgh
MrDirby
 
Web Design Process vs. Philadelphia
Web Design Process vs. PhiladelphiaWeb Design Process vs. Philadelphia
Web Design Process vs. Philadelphia
Christopher Cashdollar
 
The Designers Duty
The Designers DutyThe Designers Duty
The Designers Duty
Jon Dascola
 
Presentation Drupal Content Management Framework
Presentation Drupal Content Management FrameworkPresentation Drupal Content Management Framework
Presentation Drupal Content Management Framework
Joshua Powell
 
Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)
webdagene
 
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - PluswerkDWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
die.agilen GmbH
 
Finding and Keeping your Creative Motivation
Finding and Keeping your Creative MotivationFinding and Keeping your Creative Motivation
Finding and Keeping your Creative Motivation
Elliott Munoz
 

Viewers also liked (20)

Atomic design
Atomic designAtomic design
Atomic design
 
Looking for a place to hang my helmet
Looking for a place to hang my helmetLooking for a place to hang my helmet
Looking for a place to hang my helmet
 
Beyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web DesignBeyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web Design
 
For a Future-Friendly Web (Mobilism 2012)
For a Future-Friendly Web (Mobilism 2012)For a Future-Friendly Web (Mobilism 2012)
For a Future-Friendly Web (Mobilism 2012)
 
For a Future-Friendly Web
For a Future-Friendly WebFor a Future-Friendly Web
For a Future-Friendly Web
 
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBeyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
 
Selling The Mobile Web
Selling The Mobile WebSelling The Mobile Web
Selling The Mobile Web
 
Death To Bullshit
Death To BullshitDeath To Bullshit
Death To Bullshit
 
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown EditionResponsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
 
For a Future-Friendly Web (WebVisions Chicago 2012)
For a Future-Friendly Web (WebVisions Chicago 2012)For a Future-Friendly Web (WebVisions Chicago 2012)
For a Future-Friendly Web (WebVisions Chicago 2012)
 
Adventures in Atomic Design
Adventures in Atomic DesignAdventures in Atomic Design
Adventures in Atomic Design
 
Uso de las tics en la formación ddes
Uso de las tics en la formación  ddesUso de las tics en la formación  ddes
Uso de las tics en la formación ddes
 
Helping Your Company Adopt a User-Centered Process
Helping Your Company Adopt a User-Centered ProcessHelping Your Company Adopt a User-Centered Process
Helping Your Company Adopt a User-Centered Process
 
Wp3 refresh pgh
Wp3 refresh pghWp3 refresh pgh
Wp3 refresh pgh
 
Web Design Process vs. Philadelphia
Web Design Process vs. PhiladelphiaWeb Design Process vs. Philadelphia
Web Design Process vs. Philadelphia
 
The Designers Duty
The Designers DutyThe Designers Duty
The Designers Duty
 
Presentation Drupal Content Management Framework
Presentation Drupal Content Management FrameworkPresentation Drupal Content Management Framework
Presentation Drupal Content Management Framework
 
Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)
 
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - PluswerkDWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
 
Finding and Keeping your Creative Motivation
Finding and Keeping your Creative MotivationFinding and Keeping your Creative Motivation
Finding and Keeping your Creative Motivation
 

Similar to Atomic Design - An Event Apart San Diego

Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013
Brad Frost
 
Drupal Theming with CSS Frameworks (960grid)
Drupal Theming with CSS Frameworks (960grid)Drupal Theming with CSS Frameworks (960grid)
Drupal Theming with CSS Frameworks (960grid)
Ryan Cross
 
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
Christopher Schmitt
 
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style GuidesAdvanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
Aidan Foster
 
Does my DIV look big in this?
Does my DIV look big in this?Does my DIV look big in this?
Does my DIV look big in this?
glen_a_smith
 
Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 Boilerplate
Michael Enslow
 
Death of a Themer
Death of a ThemerDeath of a Themer
Death of a Themer
James Panton
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
Future Insights
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Clarissa Peterson
 
How to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPressHow to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPress
Gerald Glynn
 
Killing the Angle Bracket
Killing the Angle BracketKilling the Angle Bracket
Killing the Angle Bracket
jnewmanux
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
Gil Fink
 
Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapRapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with Bootstrap
Josh Jeffryes
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
Michael Enslow
 
[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design
Christopher Schmitt
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Development
mwrather
 
[edUi] HTML5 Workshop
[edUi] HTML5 Workshop[edUi] HTML5 Workshop
[edUi] HTML5 Workshop
Christopher Schmitt
 
Frontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser renderingFrontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser rendering
Manuel Garcia
 
Introduction to web components
Introduction to web componentsIntroduction to web components
Introduction to web components
Marc Bächinger
 
SCSS Styleguide
SCSS StyleguideSCSS Styleguide
SCSS Styleguide
Karthikeyan Rajendran
 

Similar to Atomic Design - An Event Apart San Diego (20)

Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013
 
Drupal Theming with CSS Frameworks (960grid)
Drupal Theming with CSS Frameworks (960grid)Drupal Theming with CSS Frameworks (960grid)
Drupal Theming with CSS Frameworks (960grid)
 
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
 
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style GuidesAdvanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
 
Does my DIV look big in this?
Does my DIV look big in this?Does my DIV look big in this?
Does my DIV look big in this?
 
Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 Boilerplate
 
Death of a Themer
Death of a ThemerDeath of a Themer
Death of a Themer
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
 
How to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPressHow to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPress
 
Killing the Angle Bracket
Killing the Angle BracketKilling the Angle Bracket
Killing the Angle Bracket
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
 
Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapRapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with Bootstrap
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
 
[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Development
 
[edUi] HTML5 Workshop
[edUi] HTML5 Workshop[edUi] HTML5 Workshop
[edUi] HTML5 Workshop
 
Frontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser renderingFrontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser rendering
 
Introduction to web components
Introduction to web componentsIntroduction to web components
Introduction to web components
 
SCSS Styleguide
SCSS StyleguideSCSS Styleguide
SCSS Styleguide
 

Recently uploaded

Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
rawankhanlove256
 
SS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers ParisSS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers Paris
Peclers Paris
 
2024_summer_my_dream_from_gnjpuser_20240708
2024_summer_my_dream_from_gnjpuser_202407082024_summer_my_dream_from_gnjpuser_20240708
2024_summer_my_dream_from_gnjpuser_20240708
kousato1
 
With Fear For Our Democracy I Dissent Shirt
With Fear For Our Democracy I Dissent ShirtWith Fear For Our Democracy I Dissent Shirt
With Fear For Our Democracy I Dissent Shirt
TeeFusion
 
Design Impulse: Boost the power of design
Design Impulse: Boost the power of designDesign Impulse: Boost the power of design
Design Impulse: Boost the power of design
Pieter van Langen
 
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdhBalhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
NakulJain35
 
A Journey Through Islamic Architecture.pdf
A Journey Through Islamic Architecture.pdfA Journey Through Islamic Architecture.pdf
A Journey Through Islamic Architecture.pdf
Mostafa Abd Elrahman
 
Overview to the Oracle Fixed Assets Module
Overview to the Oracle Fixed Assets ModuleOverview to the Oracle Fixed Assets Module
Overview to the Oracle Fixed Assets Module
lakshmichitra031
 
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
chandadutta02102
 
The Stone (Slideshow by: Kal-el Marcus Renne Go)
The Stone (Slideshow by: Kal-el Marcus Renne Go)The Stone (Slideshow by: Kal-el Marcus Renne Go)
The Stone (Slideshow by: Kal-el Marcus Renne Go)
Kal-el Shows
 
Zaha-Hadids-Influence-on-Modern-Architecture.pdf
Zaha-Hadids-Influence-on-Modern-Architecture.pdfZaha-Hadids-Influence-on-Modern-Architecture.pdf
Zaha-Hadids-Influence-on-Modern-Architecture.pdf
Mostafa Abd Elrahman
 
Professional Document Editing Services / Bank Statement Editing
Professional Document Editing Services / Bank Statement EditingProfessional Document Editing Services / Bank Statement Editing
Professional Document Editing Services / Bank Statement Editing
Edit Bank Statement
 
Carleton University degree offer diploma Transcript
Carleton University degree offer diploma TranscriptCarleton University degree offer diploma Transcript
Carleton University degree offer diploma Transcript
eamhs
 
Introduction of Stone Display Stand.pptx
Introduction of Stone Display Stand.pptxIntroduction of Stone Display Stand.pptx
Introduction of Stone Display Stand.pptx
Xiamen Tsianfan Industrial & Trading Co.,Ltd.
 
Glasgow University degree Certificate
Glasgow University degree CertificateGlasgow University degree Certificate
Glasgow University degree Certificate
tezeqes
 
Arch.Bob _ 005 _ Architectural Portfolio
Arch.Bob _ 005 _ Architectural PortfolioArch.Bob _ 005 _ Architectural Portfolio
Arch.Bob _ 005 _ Architectural Portfolio
ssusere235001
 
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
monikaservice00
 
The Ultimate Logo Design Checklist for Entrepreneurs
The Ultimate Logo Design Checklist for EntrepreneursThe Ultimate Logo Design Checklist for Entrepreneurs
The Ultimate Logo Design Checklist for Entrepreneurs
illuminz
 
Girls Call Jogeshwari 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Jogeshwari 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9910780858 Provide Best And Top Girl Service And No1 in...
77sayre
 
Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...
Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...
Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...
drmarathore
 

Recently uploaded (20)

Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
 
SS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers ParisSS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers Paris
 
2024_summer_my_dream_from_gnjpuser_20240708
2024_summer_my_dream_from_gnjpuser_202407082024_summer_my_dream_from_gnjpuser_20240708
2024_summer_my_dream_from_gnjpuser_20240708
 
With Fear For Our Democracy I Dissent Shirt
With Fear For Our Democracy I Dissent ShirtWith Fear For Our Democracy I Dissent Shirt
With Fear For Our Democracy I Dissent Shirt
 
Design Impulse: Boost the power of design
Design Impulse: Boost the power of designDesign Impulse: Boost the power of design
Design Impulse: Boost the power of design
 
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdhBalhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
 
A Journey Through Islamic Architecture.pdf
A Journey Through Islamic Architecture.pdfA Journey Through Islamic Architecture.pdf
A Journey Through Islamic Architecture.pdf
 
Overview to the Oracle Fixed Assets Module
Overview to the Oracle Fixed Assets ModuleOverview to the Oracle Fixed Assets Module
Overview to the Oracle Fixed Assets Module
 
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
 
The Stone (Slideshow by: Kal-el Marcus Renne Go)
The Stone (Slideshow by: Kal-el Marcus Renne Go)The Stone (Slideshow by: Kal-el Marcus Renne Go)
The Stone (Slideshow by: Kal-el Marcus Renne Go)
 
Zaha-Hadids-Influence-on-Modern-Architecture.pdf
Zaha-Hadids-Influence-on-Modern-Architecture.pdfZaha-Hadids-Influence-on-Modern-Architecture.pdf
Zaha-Hadids-Influence-on-Modern-Architecture.pdf
 
Professional Document Editing Services / Bank Statement Editing
Professional Document Editing Services / Bank Statement EditingProfessional Document Editing Services / Bank Statement Editing
Professional Document Editing Services / Bank Statement Editing
 
Carleton University degree offer diploma Transcript
Carleton University degree offer diploma TranscriptCarleton University degree offer diploma Transcript
Carleton University degree offer diploma Transcript
 
Introduction of Stone Display Stand.pptx
Introduction of Stone Display Stand.pptxIntroduction of Stone Display Stand.pptx
Introduction of Stone Display Stand.pptx
 
Glasgow University degree Certificate
Glasgow University degree CertificateGlasgow University degree Certificate
Glasgow University degree Certificate
 
Arch.Bob _ 005 _ Architectural Portfolio
Arch.Bob _ 005 _ Architectural PortfolioArch.Bob _ 005 _ Architectural Portfolio
Arch.Bob _ 005 _ Architectural Portfolio
 
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
 
The Ultimate Logo Design Checklist for Entrepreneurs
The Ultimate Logo Design Checklist for EntrepreneursThe Ultimate Logo Design Checklist for Entrepreneurs
The Ultimate Logo Design Checklist for Entrepreneurs
 
Girls Call Jogeshwari 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Jogeshwari 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9910780858 Provide Best And Top Girl Service And No1 in...
 
Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...
Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...
Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...
 

Atomic Design - An Event Apart San Diego