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

Creating and maintaining a design system for 130 teams - Bethany Sonefeld
Creating and maintaining a design system for 130 teams - Bethany SonefeldCreating and maintaining a design system for 130 teams - Bethany Sonefeld
Creating and maintaining a design system for 130 teams - Bethany Sonefelduxpin
 
Design Systems: Enterprise UX Evolution
Design Systems: Enterprise UX EvolutionDesign Systems: Enterprise UX Evolution
Design Systems: Enterprise UX EvolutionAnne Grundhoefer
 
Intro Design System for Visual Designers
Intro Design System for Visual DesignersIntro Design System for Visual Designers
Intro Design System for Visual DesignersInyoung Choi
 
Building a Mature Design System
Building a Mature Design SystemBuilding a Mature Design System
Building a Mature Design SystemDrew Burdick
 
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
 
Building a Design System: A Practitioner's Case Study
Building a Design System: A Practitioner's Case StudyBuilding a Design System: A Practitioner's Case Study
Building a Design System: A Practitioner's Case Studyuxpin
 
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
 
Design Systems at Scale
Design Systems at ScaleDesign Systems at Scale
Design Systems at ScaleSarah Federman
 
Design Systems (english) #UXcamHH
Design Systems (english) #UXcamHHDesign Systems (english) #UXcamHH
Design Systems (english) #UXcamHHBenno Loewenberg
 
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
 
Creating and Scaling an Enterprise Design System
Creating and Scaling an Enterprise Design SystemCreating and Scaling an Enterprise Design System
Creating and Scaling an Enterprise Design Systemuxpin
 
How to build a design system
How to build a design systemHow to build a design system
How to build a design systemFaizur Rehman
 
Atomic design React Nova Presentation
Atomic design React Nova PresentationAtomic design React Nova Presentation
Atomic design React Nova PresentationSteve Zyglowicz
 
Design System Proposal
Design System ProposalDesign System Proposal
Design System ProposalCharlie Weston
 
Design Systems: Parts, Products & People
Design Systems: Parts, Products & PeopleDesign Systems: Parts, Products & People
Design Systems: Parts, Products & Peoplenathanacurtis
 

La actualidad más candente (20)

Creating and maintaining a design system for 130 teams - Bethany Sonefeld
Creating and maintaining a design system for 130 teams - Bethany SonefeldCreating and maintaining a design system for 130 teams - Bethany Sonefeld
Creating and maintaining a design system for 130 teams - Bethany Sonefeld
 
Design Systems: Enterprise UX Evolution
Design Systems: Enterprise UX EvolutionDesign Systems: Enterprise UX Evolution
Design Systems: Enterprise UX Evolution
 
Design System 101
Design System 101Design System 101
Design System 101
 
Atomic design
Atomic designAtomic design
Atomic design
 
Intro Design System for Visual Designers
Intro Design System for Visual DesignersIntro Design System for Visual Designers
Intro Design System for Visual Designers
 
Building a Mature Design System
Building a Mature Design SystemBuilding a Mature Design System
Building a Mature Design System
 
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
 
Building a Design System: A Practitioner's Case Study
Building a Design System: A Practitioner's Case StudyBuilding a Design System: A Practitioner's Case Study
Building a Design System: A Practitioner's Case Study
 
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
 
Design Systems at Scale
Design Systems at ScaleDesign Systems at Scale
Design Systems at Scale
 
Design Systems (english) #UXcamHH
Design Systems (english) #UXcamHHDesign Systems (english) #UXcamHH
Design Systems (english) #UXcamHH
 
Design Systems
Design SystemsDesign Systems
Design Systems
 
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
 
Creating and Scaling an Enterprise Design System
Creating and Scaling an Enterprise Design SystemCreating and Scaling an Enterprise Design System
Creating and Scaling an Enterprise Design System
 
Atomic design in React
Atomic design in ReactAtomic design in React
Atomic design in React
 
How to build a design system
How to build a design systemHow to build a design system
How to build a design system
 
Design System.pdf
Design System.pdfDesign System.pdf
Design System.pdf
 
Atomic design React Nova Presentation
Atomic design React Nova PresentationAtomic design React Nova Presentation
Atomic design React Nova Presentation
 
Design System Proposal
Design System ProposalDesign System Proposal
Design System Proposal
 
Design Systems: Parts, Products & People
Design Systems: Parts, Products & PeopleDesign Systems: Parts, Products & People
Design Systems: Parts, Products & People
 

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

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

Último

20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
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
 
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
 
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
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
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
 
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
 
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
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 

Último (20)

20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
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
 
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 )
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
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
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
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
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
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
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 

Atomic design