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

More Related Content

What's hot

서비스 운영을 위한 디자인시스템 프로젝트
서비스 운영을 위한 디자인시스템 프로젝트서비스 운영을 위한 디자인시스템 프로젝트
서비스 운영을 위한 디자인시스템 프로젝트
NAVER Engineering
 
Wireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber VasquezWireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber Vasquez
Mightybytes
 
역삼역, 이마트 AI_v최종.pdf
역삼역, 이마트 AI_v최종.pdf역삼역, 이마트 AI_v최종.pdf
역삼역, 이마트 AI_v최종.pdf
DeukJin Jeon
 
Product Design and UX / UI Design Process in Digital Product Development
Product Design and UX / UI Design Process in Digital Product DevelopmentProduct Design and UX / UI Design Process in Digital Product Development
Product Design and UX / UI Design Process in Digital Product Development
Volodymyr Melnyk
 
Low Code Capabilities of Digital Product Design Platforms
Low Code Capabilities of Digital Product Design PlatformsLow Code Capabilities of Digital Product Design Platforms
Low Code Capabilities of Digital Product Design Platforms
JohnMcGuigan10
 
The guide to wireframing
The guide to wireframingThe guide to wireframing
The guide to wireframing
Marcelo Graciolli
 
Building your Car Hacking Labs & Car Hacking Community from Scratch
Building your Car Hacking Labs & Car Hacking Community from ScratchBuilding your Car Hacking Labs & Car Hacking Community from Scratch
Building your Car Hacking Labs & Car Hacking Community from Scratch
Jay Turla
 
Introduction to the Compliance Driven Development (CDD) and Security Centric ...
Introduction to the Compliance Driven Development (CDD) and Security Centric ...Introduction to the Compliance Driven Development (CDD) and Security Centric ...
Introduction to the Compliance Driven Development (CDD) and Security Centric ...
VMware Tanzu
 
Agile ux fullday-uxpa2016
Agile ux fullday-uxpa2016Agile ux fullday-uxpa2016
Agile ux fullday-uxpa2016
UXPA International
 
Single page application
Single page applicationSingle page application
Single page application
Arthur Fung
 
Getting started with Octopus Deploy
Getting started with Octopus DeployGetting started with Octopus Deploy
Getting started with Octopus Deploy
Karoline Klever
 
Visual studio code
Visual studio codeVisual studio code
Visual studio code
MVP Microsoft
 
A Presentation on UI/UX and Design
A Presentation on UI/UX and DesignA Presentation on UI/UX and Design
A Presentation on UI/UX and Design
parthajeetcollege
 
Gitlab, GitOps & ArgoCD
Gitlab, GitOps & ArgoCDGitlab, GitOps & ArgoCD
Gitlab, GitOps & ArgoCD
Haggai Philip Zagury
 
Design Systems
Design SystemsDesign Systems
Design Systems
Nadal Soler
 
Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic Design
eggcellent
 
Agile UX
Agile UXAgile UX
HTML and Responsive Design
HTML and Responsive Design HTML and Responsive Design
HTML and Responsive Design
Mindy McAdams
 
Front end development best practices
Front end development best practicesFront end development best practices
Front end development best practices
Karolina Coates
 
Ux is not UI
Ux is not UIUx is not UI
Ux is not UI
Bruno Mendes
 

What's hot (20)

서비스 운영을 위한 디자인시스템 프로젝트
서비스 운영을 위한 디자인시스템 프로젝트서비스 운영을 위한 디자인시스템 프로젝트
서비스 운영을 위한 디자인시스템 프로젝트
 
Wireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber VasquezWireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber Vasquez
 
역삼역, 이마트 AI_v최종.pdf
역삼역, 이마트 AI_v최종.pdf역삼역, 이마트 AI_v최종.pdf
역삼역, 이마트 AI_v최종.pdf
 
Product Design and UX / UI Design Process in Digital Product Development
Product Design and UX / UI Design Process in Digital Product DevelopmentProduct Design and UX / UI Design Process in Digital Product Development
Product Design and UX / UI Design Process in Digital Product Development
 
Low Code Capabilities of Digital Product Design Platforms
Low Code Capabilities of Digital Product Design PlatformsLow Code Capabilities of Digital Product Design Platforms
Low Code Capabilities of Digital Product Design Platforms
 
The guide to wireframing
The guide to wireframingThe guide to wireframing
The guide to wireframing
 
Building your Car Hacking Labs & Car Hacking Community from Scratch
Building your Car Hacking Labs & Car Hacking Community from ScratchBuilding your Car Hacking Labs & Car Hacking Community from Scratch
Building your Car Hacking Labs & Car Hacking Community from Scratch
 
Introduction to the Compliance Driven Development (CDD) and Security Centric ...
Introduction to the Compliance Driven Development (CDD) and Security Centric ...Introduction to the Compliance Driven Development (CDD) and Security Centric ...
Introduction to the Compliance Driven Development (CDD) and Security Centric ...
 
Agile ux fullday-uxpa2016
Agile ux fullday-uxpa2016Agile ux fullday-uxpa2016
Agile ux fullday-uxpa2016
 
Single page application
Single page applicationSingle page application
Single page application
 
Getting started with Octopus Deploy
Getting started with Octopus DeployGetting started with Octopus Deploy
Getting started with Octopus Deploy
 
Visual studio code
Visual studio codeVisual studio code
Visual studio code
 
A Presentation on UI/UX and Design
A Presentation on UI/UX and DesignA Presentation on UI/UX and Design
A Presentation on UI/UX and Design
 
Gitlab, GitOps & ArgoCD
Gitlab, GitOps & ArgoCDGitlab, GitOps & ArgoCD
Gitlab, GitOps & ArgoCD
 
Design Systems
Design SystemsDesign Systems
Design Systems
 
Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic Design
 
Agile UX
Agile UXAgile UX
Agile UX
 
HTML and Responsive Design
HTML and Responsive Design HTML and Responsive Design
HTML and Responsive Design
 
Front end development best practices
Front end development best practicesFront end development best practices
Front end development best practices
 
Ux is not UI
Ux is not UIUx is not UI
Ux is not UI
 

Viewers also liked

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

Viewers also liked (20)

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

Similar to Atomic Design - An Event Apart San Diego

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

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

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

Recently uploaded

一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
340qn0m1
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
hw2xf1m
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
t34zod9l
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NishantRathi18
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
3vgr39kx
 
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build  Your Online Presence 2024.pptxBest Digital Marketing Strategy Build  Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
pavankumarpayexelsol
 
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
bz42w9z0
 
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
kohd1ci2
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdfADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
GregMichaelTapawan
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
k4krdgxx
 
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
zv943dhb
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
wkip62b
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
f22b6g9c
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
21uul8se
 

Recently uploaded (20)

一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
 
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build  Your Online Presence 2024.pptxBest Digital Marketing Strategy Build  Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
 
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
 
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdfADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
 
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
 

Atomic Design - An Event Apart San Diego