SlideShare a Scribd company logo
1 of 173
Download to read offline
ATOMIC DESIGN@brad_frost
DESIGN SYSTEMS
http://styletil.es
http://sparkbox.github.com/style-prototype/
COMPONENTS
We’re not designing pages,
we’re designing systems of components.
-Stephen Hay
http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
WHAT IS AN INTERFACE MADE OF?
http://bradfrost.github.com/this-is-responsive/patterns.html
FRAMEWORKS
RESOURCE
http://foundation.zurb.com/
RESOURCE
http://twitter.github.com/bootstrap/
THESE THINGS ARE GREAT, BUT...
FRAMEWORK POTENTIAL PITFALLS
๏ Subscribe to other developers’ structure/naming/style
๏ Lookalike issues
๏ One-size-fits-all
๏ Potential for bloat/unneeded stuff
๏ Might not do everything you need
๏ Ability to scale
๏ Compatibility with existing sites
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/
PATTERN LIBRARIES
We’re not designing pages, we’re
designing systems of components.
-Stephen Hay
http://24ways.org/2011/front-end-style-guides/
BENEFITS OF FRONT-END STYLE GUIDES
๏ Easier to test
๏ Better workflow
๏ Shared vocabulary
๏ Useful reference
http://24ways.org/2011/front-end-style-guides/
http://gim.ie/fZyK
http://pea.rs/
http://brettjankord.com/projects/style-guide-boilerplate/
http://patternprimer.adactio.com/
http://barebones.paulrobertlloyd.com
http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/
I LOVE THESE.
MO’ PATTERNS, MO’ PROBLEMS
๏ Time consuming to create
๏ Treated as a auxiliary project
๏ Often created after a project launches
๏ Often too abstract
๏ Seen only as a designer/developer tool
๏ Often incomplete/only serving present cases
๏ Lacking a methodology
ATOMIC DESIGN
H2 + O2 → H20
C + O2 → CO2
CH4 + O2 → CO2 + H2O
C8H18 + O2 → CO2 + H20
C2H6 + O2 → CO2 + H2O
H2+O2=H20
H2+O2→H20
http://joshduck.com/periodic-table.html
ATOMS
๏ Building blocks of an interface
๏ Can’t be broken down any further
without losing their meaning
๏ Abstract
๏ Often not too useful on their own
๏ Good as an at-a-glance reference
๏ See all your global styles laid out
at once
Actin’ fool breakin’ shit down
to molecules
-Busta Rhymes
H2+O2=H20
H2+O2→H20
MOLECULES
๏ Group of atoms bonded together
๏ Smallest fundamental units of a
compound
๏ More concrete than atoms
๏ Encourage a “do one thing and
do it well” philosophy
๏ Often serve as the backbone for a
more complex system
ORGANISMS
๏ Group of molecules joined
together to form a distinct section
๏ Complex molecules
๏ Can consist of similar and/or
different molecule types
๏ Encourages creating standalone,
portable, reusable components
http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups
TEMPLATES
๏ Page-level
๏ Mostly comprised of groups of
organisms
๏ Begin their life as HTML
wireframes, increase fidelity over
time
๏ Client facing.Very concrete.
๏ Eventually becomes the
deliverable/production code
f
PAGES
๏ Specific instance of a template
๏ Highest fidelity.Template content
is replaced with real/sample
content
๏ The hub for most people involved
in the process.
๏ Test the effectiveness of the
system
๏ Test variations in the template:
design/content tweaks, include/
exclude organisms, etc.
ABSTRACT CONCRETE
ABSTRACT CONCRETE
CREATORS CLIENTS
REFERENCE BUILD REVIEW
ATOMIC DESIGN
๏ Provides a methodology for crafting an effective
design system
๏ Easily traverse from abstract to concrete
๏ Promotes consistency and cohesion
๏ Assembles rather than deconstructs
Pattern Lab is a collection of tools
to help create and maintain
atomic web design systems.
WHAT PATTERN LAB IS
๏ A comprehensive component library
๏ A pattern starter kit
๏ A design system builder
๏ A practical viewport resizer
๏ A design annotation tool
WHAT PATTERN LAB ISN’T
๏ A UI framework
๏ Language/library/style dependent
๏ Incredibly rigid
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/
PATTERN BUILDER
MOLECULE GUTS
code block<div class="block block-inset">
<a href="#" class="inner">
<div class="b-thumb">
<?php inc('atom','landscape') ?>
</div>
<div class="b-text">
<h2 class="headline">Headline:
Lorem ipsum dolor sit amet,
consectetur adipisicing</h2>
</div>
</a>
</div>
BASIC INCLUDE
code block
<?php inc(‘molecule’,‘pagination’)?>
ORGANISM GUTS
code block<section class="comments section">
<div class="comments-container" id="comments-
container">
<h2 class="section-title">59 Comments</h2>
<?php inc('molecule','comment-form'); ?>
<ul class="comment-list">
<?php inc('molecule','single-comment'); ?>
<?php inc('molecule','single-comment'); ?>
<?php inc('molecule','single-comment'); ?>
<?php inc('molecule','single-comment'); ?>
<?php inc('molecule','single-comment'); ?>
</ul>
</div>
<?php inc('molecule','pagination') ?>
</section>
BASIC INCLUDE
code block
<?php inc(‘organism’,‘comments’)?>
TEMPLATE GUTS
code block<?php inc('organism','header'); ?>
<div role="main">
<div class="l-two-col">
<div class="l-main">
<article class="article">
<header class="article-header">
<h1>Article Headline Lorem ipsum dolor sit</h1>
<?php inc('molecule','byline-author-time') ?>
</header>
<?php inc('organism','article-body') ?>
</article><!--end .article-->
<?php inc('molecule','social-share') ?>
<?php inc('organism','comment-thread') ?>
</div><!--end l-main-->
<div class="l-sidebar">
<?php inc('organism','related-posts') ?>
<?php inc('organism','recent-tweets') ?>
</div><!--end l-sidebar-->
</div><!--end l-two-col-->
</div><!--End role=main-->
<?php inc('organism','footer'); ?>
f
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.
DISCO MODE
HAY! MODE
Start with the small screen first,
then expand until it looks like shit.
Time for a breakpoint!
-Stephen Hay
http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
MANUAL
VIEW MODES
WHY PATTERN LAB
๏ Serves as a hub for the entire design process
๏ Useful tool for everyone: information architects, designers,
developers, clients
๏ Can easily traverse from abstract to concrete
๏ Write HTML/CSS/JS as you please. Name things as you
please.
๏ Start with a system rather than deconstruct later
๏ Encourages flexibility
๏ Document as you go
WHAT’S NEXT?
DAVE OLSEN@dmolsen
MINIMIZE DEPENDENCIES
MO LANGUAGES
INCLUDES ARE INCLUDES
code block//PHP
<?php inc(‘molecule’,‘pagination’)?>
//Codekit
<!-- @import "m-pagination.kit" -->
//Hammer
<!-- @include _m-pagination.html -->
//Ruby (maybe, I don’t know)
load 'm-pagination.rb'
HUGE THANK YOU
๏ Dave Olsen
๏ Dan Mall
๏ Josh Clark
๏ Jonathan Stark
๏ Jennifer Brook
๏ Anna Debenham
๏ Jeremy Keith
๏ Brett Jankord
๏ Paul Robert Lloyd
๏ Tyler Sticka
๏ Harry Roberts
๏ Dan Cederholm
https://github.com/bradfrost/patternlab
http://patternlab.bradfrostweb.com
WHEN YOU’RE FINISHED CHANGING
YOU’RE FINISHED.
WORK HARD.
DON’T BE AN ASSHOLE.
SHARE WHAT YOU KNOW.
THANKS!@brad_frost

More Related Content

What's hot

Design System - Fail, Learn, Build, Test
Design System - Fail, Learn, Build, TestDesign System - Fail, Learn, Build, Test
Design System - Fail, Learn, Build, TestPaya Do
 
Design systems: accounting for quality and scalability
Design systems: accounting for quality and scalabilityDesign systems: accounting for quality and scalability
Design systems: accounting for quality and scalabilityuxpin
 
Building compelling business cases for Design Systems
Building compelling business cases for Design SystemsBuilding compelling business cases for Design Systems
Building compelling business cases for Design SystemsLaura Van Doore
 
A design system. A year in review.
A design system. A year in review.A design system. A year in review.
A design system. A year in review.James Ferguson
 
Initiating and Sustaining Design Systems for the Enterprise
Initiating and Sustaining Design Systems for the EnterpriseInitiating and Sustaining Design Systems for the Enterprise
Initiating and Sustaining Design Systems for the Enterpriseuxpin
 
Design system presentation - How to sell it internally
Design system presentation - How to sell it internallyDesign system presentation - How to sell it internally
Design system presentation - How to sell it internallyEugene Kardash
 
Evolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and ProcessEvolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and Processuxpin
 
Design Systems (english) #UXcamHH
Design Systems (english) #UXcamHHDesign Systems (english) #UXcamHH
Design Systems (english) #UXcamHHBenno Lœwenberg
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design GDGKuwaitGoogleDevel
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESJeremy Robinson
 
Design Systems at Scale
Design Systems at ScaleDesign Systems at Scale
Design Systems at ScaleSarah Federman
 
Uxpin Why Build a Design System
Uxpin Why Build a Design SystemUxpin Why Build a Design System
Uxpin Why Build a Design SystemLewis Lin 🦊
 
Basic Principles of Interface design
Basic Principles of Interface designBasic Principles of Interface design
Basic Principles of Interface designZdeněk Lanc
 
Why UX #FAILS (with notes)
Why UX #FAILS (with notes)Why UX #FAILS (with notes)
Why UX #FAILS (with notes)Chris Feix
 
Building a Mature Design System
Building a Mature Design SystemBuilding a Mature Design System
Building a Mature Design SystemDrew Burdick
 

What's hot (20)

Design System - Fail, Learn, Build, Test
Design System - Fail, Learn, Build, TestDesign System - Fail, Learn, Build, Test
Design System - Fail, Learn, Build, Test
 
Design systems: accounting for quality and scalability
Design systems: accounting for quality and scalabilityDesign systems: accounting for quality and scalability
Design systems: accounting for quality and scalability
 
The Importance of UX
The Importance of UXThe Importance of UX
The Importance of UX
 
Building compelling business cases for Design Systems
Building compelling business cases for Design SystemsBuilding compelling business cases for Design Systems
Building compelling business cases for Design Systems
 
ITea&Coffee - Atomic design systems 2.0
ITea&Coffee - Atomic design systems 2.0ITea&Coffee - Atomic design systems 2.0
ITea&Coffee - Atomic design systems 2.0
 
A design system. A year in review.
A design system. A year in review.A design system. A year in review.
A design system. A year in review.
 
Initiating and Sustaining Design Systems for the Enterprise
Initiating and Sustaining Design Systems for the EnterpriseInitiating and Sustaining Design Systems for the Enterprise
Initiating and Sustaining Design Systems for the Enterprise
 
Design system presentation - How to sell it internally
Design system presentation - How to sell it internallyDesign system presentation - How to sell it internally
Design system presentation - How to sell it internally
 
Evolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and ProcessEvolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and Process
 
Design Systems (english) #UXcamHH
Design Systems (english) #UXcamHHDesign Systems (english) #UXcamHH
Design Systems (english) #UXcamHH
 
Ux is not UI
Ux is not UIUx is not UI
Ux is not UI
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
 
Design Systems at Scale
Design Systems at ScaleDesign Systems at Scale
Design Systems at Scale
 
Design System 101
Design System 101Design System 101
Design System 101
 
Good UX Bad UX
Good UX Bad UXGood UX Bad UX
Good UX Bad UX
 
Uxpin Why Build a Design System
Uxpin Why Build a Design SystemUxpin Why Build a Design System
Uxpin Why Build a Design System
 
Basic Principles of Interface design
Basic Principles of Interface designBasic Principles of Interface design
Basic Principles of Interface design
 
Why UX #FAILS (with notes)
Why UX #FAILS (with notes)Why UX #FAILS (with notes)
Why UX #FAILS (with notes)
 
Building a Mature Design System
Building a Mature Design SystemBuilding a Mature Design System
Building a Mature Design System
 

Viewers also liked

Getting started with your research skills
Getting started with your research skillsGetting started with your research skills
Getting started with your research skillsL. D. Morris
 
Planning Innovations: Conjoint Analysis Slides
Planning Innovations: Conjoint Analysis SlidesPlanning Innovations: Conjoint Analysis Slides
Planning Innovations: Conjoint Analysis SlidesQuestionPro
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern librariesRuss Weakley
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web DesignDave Olsen
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Stephen Hay
 
Content Design, UI Architecture and UI Mapping
Content Design, UI Architecture and UI MappingContent Design, UI Architecture and UI Mapping
Content Design, UI Architecture and UI MappingWolfram Nagel
 
Practical Diversity at Thinking Digital Women
Practical Diversity at Thinking Digital Women Practical Diversity at Thinking Digital Women
Practical Diversity at Thinking Digital Women Meri Williams
 
Modern Management at #wintech17
Modern Management at #wintech17Modern Management at #wintech17
Modern Management at #wintech17Meri Williams
 
Awesome People Management with Agile at Agile North East
Awesome People Management with Agile at Agile North EastAwesome People Management with Agile at Agile North East
Awesome People Management with Agile at Agile North EastMeri Williams
 
Modern Management: Creating Space for Everyone to Be Awesome
Modern Management: Creating Space for Everyone to Be AwesomeModern Management: Creating Space for Everyone to Be Awesome
Modern Management: Creating Space for Everyone to Be AwesomeMeri Williams
 
Creating Space to Be Awesome at ScotlandPHP17
Creating Space to Be Awesome at ScotlandPHP17Creating Space to Be Awesome at ScotlandPHP17
Creating Space to Be Awesome at ScotlandPHP17Meri Williams
 
Creating Space to Be Awesome at QCon London
Creating Space to Be Awesome at QCon LondonCreating Space to Be Awesome at QCon London
Creating Space to Be Awesome at QCon LondonMeri Williams
 
Modern Leadership & Team Science: Creating Space to Be Awesome
Modern Leadership & Team Science: Creating Space to Be AwesomeModern Leadership & Team Science: Creating Space to Be Awesome
Modern Leadership & Team Science: Creating Space to Be AwesomeMeri Williams
 
Creating Space to Be Awesome -- Offentlig Chef
Creating Space to Be Awesome -- Offentlig ChefCreating Space to Be Awesome -- Offentlig Chef
Creating Space to Be Awesome -- Offentlig ChefMeri Williams
 
10 Steps to build Awesome Business Ideas
10 Steps to build Awesome Business Ideas10 Steps to build Awesome Business Ideas
10 Steps to build Awesome Business IdeasBoard of Innovation
 
14 steps to build a professional reseller partner program
14 steps to build a professional reseller partner program14 steps to build a professional reseller partner program
14 steps to build a professional reseller partner programDaniel Nilsson
 
アメブロの大規模システム刷新と それを支えるSpring
アメブロの大規模システム刷新と それを支えるSpringアメブロの大規模システム刷新と それを支えるSpring
アメブロの大規模システム刷新と それを支えるSpringTakuya Hattori
 

Viewers also liked (17)

Getting started with your research skills
Getting started with your research skillsGetting started with your research skills
Getting started with your research skills
 
Planning Innovations: Conjoint Analysis Slides
Planning Innovations: Conjoint Analysis SlidesPlanning Innovations: Conjoint Analysis Slides
Planning Innovations: Conjoint Analysis Slides
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern libraries
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web Design
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
 
Content Design, UI Architecture and UI Mapping
Content Design, UI Architecture and UI MappingContent Design, UI Architecture and UI Mapping
Content Design, UI Architecture and UI Mapping
 
Practical Diversity at Thinking Digital Women
Practical Diversity at Thinking Digital Women Practical Diversity at Thinking Digital Women
Practical Diversity at Thinking Digital Women
 
Modern Management at #wintech17
Modern Management at #wintech17Modern Management at #wintech17
Modern Management at #wintech17
 
Awesome People Management with Agile at Agile North East
Awesome People Management with Agile at Agile North EastAwesome People Management with Agile at Agile North East
Awesome People Management with Agile at Agile North East
 
Modern Management: Creating Space for Everyone to Be Awesome
Modern Management: Creating Space for Everyone to Be AwesomeModern Management: Creating Space for Everyone to Be Awesome
Modern Management: Creating Space for Everyone to Be Awesome
 
Creating Space to Be Awesome at ScotlandPHP17
Creating Space to Be Awesome at ScotlandPHP17Creating Space to Be Awesome at ScotlandPHP17
Creating Space to Be Awesome at ScotlandPHP17
 
Creating Space to Be Awesome at QCon London
Creating Space to Be Awesome at QCon LondonCreating Space to Be Awesome at QCon London
Creating Space to Be Awesome at QCon London
 
Modern Leadership & Team Science: Creating Space to Be Awesome
Modern Leadership & Team Science: Creating Space to Be AwesomeModern Leadership & Team Science: Creating Space to Be Awesome
Modern Leadership & Team Science: Creating Space to Be Awesome
 
Creating Space to Be Awesome -- Offentlig Chef
Creating Space to Be Awesome -- Offentlig ChefCreating Space to Be Awesome -- Offentlig Chef
Creating Space to Be Awesome -- Offentlig Chef
 
10 Steps to build Awesome Business Ideas
10 Steps to build Awesome Business Ideas10 Steps to build Awesome Business Ideas
10 Steps to build Awesome Business Ideas
 
14 steps to build a professional reseller partner program
14 steps to build a professional reseller partner program14 steps to build a professional reseller partner program
14 steps to build a professional reseller partner program
 
アメブロの大規模システム刷新と それを支えるSpring
アメブロの大規模システム刷新と それを支えるSpringアメブロの大規模システム刷新と それを支えるSpring
アメブロの大規模システム刷新と それを支えるSpring
 

Similar to Atomic design

HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010alanburke
 
Turku loves-storybook-styleguidist-styled-components
Turku loves-storybook-styleguidist-styled-componentsTurku loves-storybook-styleguidist-styled-components
Turku loves-storybook-styleguidist-styled-componentsJames Stone
 
Wordpress Beyond A Blog Word Camp Toronto08
Wordpress Beyond A Blog Word Camp Toronto08Wordpress Beyond A Blog Word Camp Toronto08
Wordpress Beyond A Blog Word Camp Toronto08Jamie Oastler
 
WordPress 3.0 at DC PHP
WordPress 3.0 at DC PHPWordPress 3.0 at DC PHP
WordPress 3.0 at DC PHPandrewnacin
 
An Unexpected Solution to Microservices UI Composition
An Unexpected Solution to Microservices UI CompositionAn Unexpected Solution to Microservices UI Composition
An Unexpected Solution to Microservices UI CompositionDr. Arif Wider
 
Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 BoilerplateMichael Enslow
 
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 arrivedGil Fink
 
Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and wh...
Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and wh...Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and wh...
Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and wh...Adam Khan
 
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
 
Improving your responsive workflow with style guides
Improving your responsive workflow with style guidesImproving your responsive workflow with style guides
Improving your responsive workflow with style guidesLuke Brooker
 
Untangling spring week5
Untangling spring week5Untangling spring week5
Untangling spring week5Derek Jacoby
 
Create rich web stories with Drupal 8 and paragraphs
Create rich web stories with Drupal 8 and paragraphsCreate rich web stories with Drupal 8 and paragraphs
Create rich web stories with Drupal 8 and paragraphsTassos Koutlas
 
Design Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPressDesign Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPressJesse James Arnold
 
Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Brad Frost
 
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB
 
Introduction to Magento 2 module development - PHP Antwerp Meetup 2017
Introduction to Magento 2 module development - PHP Antwerp Meetup 2017Introduction to Magento 2 module development - PHP Antwerp Meetup 2017
Introduction to Magento 2 module development - PHP Antwerp Meetup 2017Joke Puts
 
Style Guide Best Practices
Style Guide Best PracticesStyle Guide Best Practices
Style Guide Best PracticesBrad Frost
 
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch TutorialMongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch TutorialMongoDB
 
Modeling Rich Narrative Content
Modeling Rich Narrative ContentModeling Rich Narrative Content
Modeling Rich Narrative ContentJeff Eaton
 
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Optimising Your Front End Workflow With Symfony, Twig, Bower and GulpOptimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Optimising Your Front End Workflow With Symfony, Twig, Bower and GulpMatthew Davis
 

Similar to Atomic design (20)

HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010
 
Turku loves-storybook-styleguidist-styled-components
Turku loves-storybook-styleguidist-styled-componentsTurku loves-storybook-styleguidist-styled-components
Turku loves-storybook-styleguidist-styled-components
 
Wordpress Beyond A Blog Word Camp Toronto08
Wordpress Beyond A Blog Word Camp Toronto08Wordpress Beyond A Blog Word Camp Toronto08
Wordpress Beyond A Blog Word Camp Toronto08
 
WordPress 3.0 at DC PHP
WordPress 3.0 at DC PHPWordPress 3.0 at DC PHP
WordPress 3.0 at DC PHP
 
An Unexpected Solution to Microservices UI Composition
An Unexpected Solution to Microservices UI CompositionAn Unexpected Solution to Microservices UI Composition
An Unexpected Solution to Microservices UI Composition
 
Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 Boilerplate
 
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
 
Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and wh...
Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and wh...Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and wh...
Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and wh...
 
Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)
 
Improving your responsive workflow with style guides
Improving your responsive workflow with style guidesImproving your responsive workflow with style guides
Improving your responsive workflow with style guides
 
Untangling spring week5
Untangling spring week5Untangling spring week5
Untangling spring week5
 
Create rich web stories with Drupal 8 and paragraphs
Create rich web stories with Drupal 8 and paragraphsCreate rich web stories with Drupal 8 and paragraphs
Create rich web stories with Drupal 8 and paragraphs
 
Design Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPressDesign Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPress
 
Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013
 
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
 
Introduction to Magento 2 module development - PHP Antwerp Meetup 2017
Introduction to Magento 2 module development - PHP Antwerp Meetup 2017Introduction to Magento 2 module development - PHP Antwerp Meetup 2017
Introduction to Magento 2 module development - PHP Antwerp Meetup 2017
 
Style Guide Best Practices
Style Guide Best PracticesStyle Guide Best Practices
Style Guide Best Practices
 
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch TutorialMongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
 
Modeling Rich Narrative Content
Modeling Rich Narrative ContentModeling Rich Narrative Content
Modeling Rich Narrative Content
 
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Optimising Your Front End Workflow With Symfony, Twig, Bower and GulpOptimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
 

More from Brad Frost

Let's Work Together!
Let's Work Together!Let's Work Together!
Let's Work Together!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 helmetBrad Frost
 
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoBrad Frost
 
Death To Bullshit: Now With 80% More Bullshit!
Death To Bullshit: Now With 80% More Bullshit!Death To Bullshit: Now With 80% More Bullshit!
Death To Bullshit: Now With 80% More Bullshit!Brad Frost
 
Death To Bullshit
Death To BullshitDeath To Bullshit
Death To BullshitBrad 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 DesignBrad 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
 
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 EditionBrad Frost
 
Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...
Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...
Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...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 DesignBrad 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 WebBrad Frost
 
Selling The Mobile Web
Selling The Mobile WebSelling The Mobile Web
Selling The Mobile WebBrad Frost
 

More from Brad Frost (13)

Let's Work Together!
Let's Work Together!Let's Work Together!
Let's Work Together!
 
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
 
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
 
Death To Bullshit: Now With 80% More Bullshit!
Death To Bullshit: Now With 80% More Bullshit!Death To Bullshit: Now With 80% More Bullshit!
Death To Bullshit: Now With 80% More Bullshit!
 
Death To Bullshit
Death To BullshitDeath To Bullshit
Death To Bullshit
 
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
 
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)
 
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
 
Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...
Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...
Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...
 
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
 
Selling The Mobile Web
Selling The Mobile WebSelling The Mobile Web
Selling The Mobile Web
 

Recently uploaded

Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfFIDO Alliance
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeCzechDreamin
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfUK Journal
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireExakis Nelite
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyJohn Staveley
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxDavid Michel
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...CzechDreamin
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...CzechDreamin
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101vincent683379
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfFIDO Alliance
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024Stephanie Beckett
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...panagenda
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGDSC PJATK
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfFIDO Alliance
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimaginedpanagenda
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfFIDO Alliance
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastUXDXConf
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...FIDO Alliance
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessUXDXConf
 

Recently uploaded (20)

Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 

Atomic design