SlideShare una empresa de Scribd logo
1 de 173
Descargar para leer sin conexión
ATOMIC DESIGN@brad_frost
Atomic design
DESIGN SYSTEMS
Atomic design
Atomic design
http://styletil.es
Atomic design
Atomic design
Atomic design
http://sparkbox.github.com/style-prototype/
Atomic design
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?
Atomic design
Atomic design
Atomic design
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
Atomic design
Atomic design
Atomic design
http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/
Atomic design
Atomic design
Atomic design
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
Atomic design
H2+O2=H20
H2+O2→H20
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
http://joshduck.com/periodic-table.html
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
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
Atomic design
Actin’ fool breakin’ shit down
to molecules
-Busta Rhymes
Atomic design
H2+O2=H20
H2+O2→H20
Atomic design
Atomic design
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
Atomic design
Atomic design
Atomic design
Atomic design
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
Atomic design
Atomic design
Atomic design
http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups
Atomic design
Atomic design
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
Atomic design
Atomic design
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.
Atomic design
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
Atomic design
Atomic design
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
Atomic design
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
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
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’)?>
Atomic design
Atomic design
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’)?>
Atomic design
Atomic design
Atomic design
Atomic design
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
Atomic design
Atomic design
Atomic design
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.
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
DISCO MODE
Atomic design
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/
Atomic design
MANUAL
Atomic design
Atomic design
VIEW MODES
Atomic design
Atomic design
Atomic design
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
Atomic design
Atomic design
Atomic design
MINIMIZE DEPENDENCIES
MO LANGUAGES
Atomic design
Atomic design
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'
Atomic design
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
Atomic design
https://github.com/bradfrost/patternlab
Atomic design
http://patternlab.bradfrostweb.com
WHEN YOU’RE FINISHED CHANGING
YOU’RE FINISHED.
Atomic design
Atomic design
Atomic design
WORK HARD.
DON’T BE AN ASSHOLE.
SHARE WHAT YOU KNOW.
THANKS!@brad_frost

Más contenido relacionado

La actualidad más candente

Design Systems (english) #UXcamHH
Design Systems (english) #UXcamHHDesign Systems (english) #UXcamHH
Design Systems (english) #UXcamHHBenno Loewenberg
 
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
 
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
 
Breaking Into AI/ML Product Management by Facebook Product Leader
Breaking Into AI/ML Product Management by Facebook Product LeaderBreaking Into AI/ML Product Management by Facebook Product Leader
Breaking Into AI/ML Product Management by Facebook Product LeaderProduct School
 
Google Design sprint
Google Design sprintGoogle Design sprint
Google Design sprintBruno Mendes
 
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
 
Uxpin Why Build a Design System
Uxpin Why Build a Design SystemUxpin Why Build a Design System
Uxpin Why Build a Design SystemLewis Lin 🦊
 
Design Systems First: Everyday Practices for a Scaleable Design Process
Design Systems First: Everyday Practices for a Scaleable Design ProcessDesign Systems First: Everyday Practices for a Scaleable Design Process
Design Systems First: Everyday Practices for a Scaleable Design Processuxpin
 
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
 
The 10 Steps to Becoming a Great Agile Coach
The 10 Steps to Becoming a Great Agile CoachThe 10 Steps to Becoming a Great Agile Coach
The 10 Steps to Becoming a Great Agile CoachLeadingAgile
 
Building a Mature Design System
Building a Mature Design SystemBuilding a Mature Design System
Building a Mature Design SystemDrew Burdick
 
DesignOps Handbook Condensed
DesignOps Handbook CondensedDesignOps Handbook Condensed
DesignOps Handbook CondensedPeter Weibrecht
 
Demystifying the Design Sprint
Demystifying the Design SprintDemystifying the Design Sprint
Demystifying the Design SprintFresh Tilled Soil
 
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
 

La actualidad más candente (20)

Design System 101
Design System 101Design System 101
Design System 101
 
Design Systems (english) #UXcamHH
Design Systems (english) #UXcamHHDesign Systems (english) #UXcamHH
Design Systems (english) #UXcamHH
 
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
 
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 System
Design SystemDesign System
Design System
 
Breaking Into AI/ML Product Management by Facebook Product Leader
Breaking Into AI/ML Product Management by Facebook Product LeaderBreaking Into AI/ML Product Management by Facebook Product Leader
Breaking Into AI/ML Product Management by Facebook Product Leader
 
Google Design sprint
Google Design sprintGoogle Design sprint
Google Design sprint
 
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
 
Uxpin Why Build a Design System
Uxpin Why Build a Design SystemUxpin Why Build a Design System
Uxpin Why Build a Design System
 
Design Systems First: Everyday Practices for a Scaleable Design Process
Design Systems First: Everyday Practices for a Scaleable Design ProcessDesign Systems First: Everyday Practices for a Scaleable Design Process
Design Systems First: Everyday Practices for a Scaleable Design Process
 
Design Systems
Design SystemsDesign Systems
Design Systems
 
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.
 
The 10 Steps to Becoming a Great Agile Coach
The 10 Steps to Becoming a Great Agile CoachThe 10 Steps to Becoming a Great Agile Coach
The 10 Steps to Becoming a Great Agile Coach
 
Building a Mature Design System
Building a Mature Design SystemBuilding a Mature Design System
Building a Mature Design System
 
UX Bootcamp
UX BootcampUX Bootcamp
UX Bootcamp
 
DesignOps Handbook Condensed
DesignOps Handbook CondensedDesignOps Handbook Condensed
DesignOps Handbook Condensed
 
Product Roadmap
Product RoadmapProduct Roadmap
Product Roadmap
 
Demystifying the Design Sprint
Demystifying the Design SprintDemystifying the Design Sprint
Demystifying the Design Sprint
 
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
 
Design Thinking Workshop
Design Thinking WorkshopDesign Thinking Workshop
Design Thinking Workshop
 

Destacado

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
 

Destacado (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 a 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 a 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
 

Más de 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
 
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
 

Más de Brad Frost (12)

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

Último

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 

Último (20)

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 

Atomic design