SlideShare ist ein Scribd-Unternehmen logo
1 von 52
Downloaden Sie, um offline zu lesen
STYLE GUIDES ARE THE NEW PHOTOSHOP
                   STEPHEN HAY @ FRONTEERS 2012
DESIGNING IN THE BROWSER


   Demonstrating our designs to clients as
   XHTML/CSS pages rather than as static
   Photoshop or Fireworks has streamlined our
   workflow and helped us to set and manage a
   client’s expectations better than ever before.


               Andy Clarke, “Time to stop showing clients static design visuals” (2008)
WALLS COME TUMBLING DOWN (2009)

   Coming up with new and better workflows
   Designing in the browser
   Learning to live with constraints
   Designing systems, rather than sites
PHOTOSHOP IS IMPRACTICAL FOR
 RESPONSIVE DESIGN MOCKUPS
PROBLEMS WITH “PHOTOSHOP” COMPS

   Design changes are time-consuming
   Too much manual work
   The image editor is a dependency
   Responsive design implies multiple and
   flexible layouts
REALITY
   (Screenshots by Adobe Edge Inspect)
WEB TECH IS VERY PRACTICAL FOR
 RESPONSIVE DESIGN MOCKUPS
WEB-BASED COMPS: THE GOOD
   Doesn’t need to take much longer than Photoshop
   Automate trivial tasks
   Realistic presentation / real-life rendering
   State changes are easily visualized
   Free and open: everyone has a browser & editor
   No negative surprises for the client
   Possible prep for development
   They can be responsive
WE NEED TWO THINGS TO REPLACE
    PHOTOSHOP FOR COMPS
1. Static Web-based Comps
2. Style Guides
STYLE GUIDES
STYLE GUIDES: THE GOOD


   No measuring
   State and breakpoint changes can be included
   Useful for future designers, devs & others
   Design consistency and maintainability
STYLE GUIDES IN THE WILD
 Apple Identity Guidelines
STYLE GUIDES IN THE WILD
 BBC GEL
ANNA DEBENHAM’S COLLECTION
                     STYLE GUIDES, PATTERN LIBRARIES & TOOLS TO CREATE THEM

http://gim.ie/fZyK
MY WEB STYLE GUIDE WISHLIST
Free-form writable
Taking screenshots should be automated
Update code snippets automatically
   when mockup code changes
Update screenshots automatically
   when something changes
Elements/modules should not have to be
   physically split into separate files
Syntax highlighting for code
AM I TOO DEMANDING?


   Free-form writable
   Automated screenshot-taking
   Update code snippets automatically
   Update screenshots automatically
   No separate files for code snippets
   Syntax highlighting
I COULD NOT FIND A SINGLE TOOL
          TO DO THIS
Sporf
  http://en.wikipedia.org/wiki/Sporf
Free-form writing
       DEXY + PANDOC (OR MARKDOWN) FILTER
                                            http://www.dexy.it/
Taking screenshots
                 PHANTOM.JS + CASPER.JS




                                  http://casperjs.org/



http://phantomjs.org/
Code & screenshot updating
       JINJA TEMPLATES + DEXY’S IDIOPIDAE FILTER
Syntax highlighting
       DEXY’S PYGMENTS FILTER
THE
  COMMAND
      LINE
http://www.flickr.com/photos/evdaimon/337754011/
Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)
hi.
http://xkcd.com/149/
How this works

  Web-based mockup             Style guide content in Markdown     Style guide




                     screenshots taken, code snippets extracted
    HTML   CSS                                                    SCREEN   CODE
STEPS
1 Create a web-based mockup


   Use HTML, CSS & when necessary, JavaScript
   Your goal is to represent the design in the browser
   Your goal is not to create production code
   Your CSS should be modular (it will end up in your
   style guide!)
SMACSS

         MAKE CSS MORE MODULAR WITH…
         A LUMBERJACK.
2 Install Dexy & any dependencies




  If you’re a designer and can’t do it alone, ask a
  developer’s help.
  Before you ask for help, try going to the sites and
  following the instructions as best you can.
2 Install PhantomJS & CasperJS




  If you’re a designer and can’t do it alone, ask a
  developer’s help.
  Before you ask for help, try going to the sites and
  following the instructions as best you can.
3 Write your guide and use Jinja templates




     Use simple Markdown links to screenshots. Note the filenames you use.
4 Script your screenshots with CasperJS




 Keep things easy by adding a new casper.then() for each screenshot. Code brevity is not the goal.
5 Mark the CSS you want to export




          An export ends when another starts, or with @end.
6 Run Dexy




             Wow, that command line stuff is hard.
DONE
Changes in design? Run dexy again.




 Well, okay. In some cases you might want to do dexy cleanup followed by dexy setup and then dexy.
Demo
This is not without a learning curve.
            But what is?
Choose what works for you.
Hopefully something here will inspire you to find your own way. Experiment!
These are new times.
The problems we have with responsive workflow should encourage us to examine
                   and evaluate our processes and tools.
Have fun.
Make great stuff.
KEEP LEARNING.

Thanks!
@stephenhay


                    Special thanks to Ana Nelson

Weitere ähnliche Inhalte

Was ist angesagt?

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
 
MIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workfloweaselsolutions
 
React Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSSReact Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSSTrevor Pierce
 
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
 
Creating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in MindCreating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in MindNadya Rodionenko
 
Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Brad Frost
 
An introduction to Emulsify
An introduction to EmulsifyAn introduction to Emulsify
An introduction to Emulsifyvaluebound
 
Adventures in Atomic Design
Adventures in Atomic DesignAdventures in Atomic Design
Adventures in Atomic DesignAndrew Jones
 
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesRenato Iwashima
 
Atomic Design
Atomic Design Atomic Design
Atomic Design Rey Mayson
 
Data science for infrastructure dev week 2022
Data science for infrastructure   dev week 2022Data science for infrastructure   dev week 2022
Data science for infrastructure dev week 2022ZainAsgar1
 
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)Dave Olsen
 
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
 
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
 
Documenting an Atomic Design System with Jekyll
Documenting an Atomic Design System with JekyllDocumenting an Atomic Design System with Jekyll
Documenting an Atomic Design System with JekyllTodd Moy
 
5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)
5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)
5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)David Wesst
 
Learning to be IDE Free (PrDC 2015)
Learning to be IDE Free (PrDC 2015)Learning to be IDE Free (PrDC 2015)
Learning to be IDE Free (PrDC 2015)David Wesst
 

Was ist angesagt? (20)

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
 
Atomic design
Atomic designAtomic design
Atomic design
 
MIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workflow
 
React Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSSReact Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSS
 
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
 
Atomic Design con Pattern Lab
Atomic Design con Pattern LabAtomic Design con Pattern Lab
Atomic Design con Pattern Lab
 
Creating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in MindCreating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in Mind
 
Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013
 
An introduction to Emulsify
An introduction to EmulsifyAn introduction to Emulsify
An introduction to Emulsify
 
Adventures in Atomic Design
Adventures in Atomic DesignAdventures in Atomic Design
Adventures in Atomic Design
 
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best Practices
 
Atomic Design
Atomic Design Atomic Design
Atomic Design
 
Data science for infrastructure dev week 2022
Data science for infrastructure   dev week 2022Data science for infrastructure   dev week 2022
Data science for infrastructure dev week 2022
 
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
 
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
 
Use atomic design ftw
Use atomic design ftwUse atomic design ftw
Use atomic design ftw
 
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)
 
Documenting an Atomic Design System with Jekyll
Documenting an Atomic Design System with JekyllDocumenting an Atomic Design System with Jekyll
Documenting an Atomic Design System with Jekyll
 
5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)
5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)
5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)
 
Learning to be IDE Free (PrDC 2015)
Learning to be IDE Free (PrDC 2015)Learning to be IDE Free (PrDC 2015)
Learning to be IDE Free (PrDC 2015)
 

Andere mochten auch

Tema1 introducción 2009v1
Tema1 introducción 2009v1Tema1 introducción 2009v1
Tema1 introducción 2009v1jcbp_peru
 
Segundo Paquete Económico 2017 Zacatecas - Egresos (4-8)
Segundo Paquete Económico 2017 Zacatecas - Egresos (4-8)Segundo Paquete Económico 2017 Zacatecas - Egresos (4-8)
Segundo Paquete Económico 2017 Zacatecas - Egresos (4-8)Zacatecas TresPuntoCero
 
Taller de Preparación para la Certificación (PMI-RMP)® - Realizar el Análisis...
Taller de Preparación para la Certificación (PMI-RMP)® - Realizar el Análisis...Taller de Preparación para la Certificación (PMI-RMP)® - Realizar el Análisis...
Taller de Preparación para la Certificación (PMI-RMP)® - Realizar el Análisis...David Salomon Rojas Llaullipoma
 
Plan estratégico seguridad de los pacientes de extremadura
Plan estratégico seguridad de los pacientes de extremaduraPlan estratégico seguridad de los pacientes de extremadura
Plan estratégico seguridad de los pacientes de extremaduraSociosaniTec
 
Assessment on Skin, Hair & Nails / HEENT
Assessment on Skin, Hair & Nails / HEENTAssessment on Skin, Hair & Nails / HEENT
Assessment on Skin, Hair & Nails / HEENTTim Bersabe
 
Segundo Paquete Económico 2017 Zacatecas - Egresos (3-9)
Segundo Paquete Económico 2017 Zacatecas - Egresos (3-9)Segundo Paquete Económico 2017 Zacatecas - Egresos (3-9)
Segundo Paquete Económico 2017 Zacatecas - Egresos (3-9)Zacatecas TresPuntoCero
 
Informe mantenimiento mecanico
Informe mantenimiento mecanicoInforme mantenimiento mecanico
Informe mantenimiento mecanicoJDPVasquez
 
Actualiteiten ICT Contracten en Partnerships (2012)
Actualiteiten ICT Contracten en Partnerships (2012)Actualiteiten ICT Contracten en Partnerships (2012)
Actualiteiten ICT Contracten en Partnerships (2012)Advocatenkantoor LEGALZ
 
Training Schrijven voor het Web
Training Schrijven voor het WebTraining Schrijven voor het Web
Training Schrijven voor het WebSimone Levie
 
Contabilidad General: Práctica y Dinámica Contable - Contabilidad de Activos,...
Contabilidad General: Práctica y Dinámica Contable - Contabilidad de Activos,...Contabilidad General: Práctica y Dinámica Contable - Contabilidad de Activos,...
Contabilidad General: Práctica y Dinámica Contable - Contabilidad de Activos,...Janeth Lozano Lozano
 
Marco del buen desempeño docente
Marco del buen desempeño docenteMarco del buen desempeño docente
Marco del buen desempeño docente0013
 
De Reis van de Heldin december 2015
De Reis van de Heldin december 2015De Reis van de Heldin december 2015
De Reis van de Heldin december 2015Peter de Kuster
 
Error messages
Error messagesError messages
Error messagesrtinkelman
 

Andere mochten auch (20)

Líneas de transmisión
Líneas de transmisiónLíneas de transmisión
Líneas de transmisión
 
Tema1 introducción 2009v1
Tema1 introducción 2009v1Tema1 introducción 2009v1
Tema1 introducción 2009v1
 
Segundo Paquete Económico 2017 Zacatecas - Egresos (4-8)
Segundo Paquete Económico 2017 Zacatecas - Egresos (4-8)Segundo Paquete Económico 2017 Zacatecas - Egresos (4-8)
Segundo Paquete Económico 2017 Zacatecas - Egresos (4-8)
 
Taller de Preparación para la Certificación (PMI-RMP)® - Realizar el Análisis...
Taller de Preparación para la Certificación (PMI-RMP)® - Realizar el Análisis...Taller de Preparación para la Certificación (PMI-RMP)® - Realizar el Análisis...
Taller de Preparación para la Certificación (PMI-RMP)® - Realizar el Análisis...
 
Woman3
Woman3Woman3
Woman3
 
Pasivo A Corto Y Largo Plazo
Pasivo A Corto Y Largo PlazoPasivo A Corto Y Largo Plazo
Pasivo A Corto Y Largo Plazo
 
Plan estratégico seguridad de los pacientes de extremadura
Plan estratégico seguridad de los pacientes de extremaduraPlan estratégico seguridad de los pacientes de extremadura
Plan estratégico seguridad de los pacientes de extremadura
 
pronostico de venta
pronostico de ventapronostico de venta
pronostico de venta
 
Assessment on Skin, Hair & Nails / HEENT
Assessment on Skin, Hair & Nails / HEENTAssessment on Skin, Hair & Nails / HEENT
Assessment on Skin, Hair & Nails / HEENT
 
Segundo Paquete Económico 2017 Zacatecas - Egresos (3-9)
Segundo Paquete Económico 2017 Zacatecas - Egresos (3-9)Segundo Paquete Económico 2017 Zacatecas - Egresos (3-9)
Segundo Paquete Económico 2017 Zacatecas - Egresos (3-9)
 
Informe mantenimiento mecanico
Informe mantenimiento mecanicoInforme mantenimiento mecanico
Informe mantenimiento mecanico
 
Actualiteiten ICT Contracten en Partnerships (2012)
Actualiteiten ICT Contracten en Partnerships (2012)Actualiteiten ICT Contracten en Partnerships (2012)
Actualiteiten ICT Contracten en Partnerships (2012)
 
Training Schrijven voor het Web
Training Schrijven voor het WebTraining Schrijven voor het Web
Training Schrijven voor het Web
 
Contabilidad General: Práctica y Dinámica Contable - Contabilidad de Activos,...
Contabilidad General: Práctica y Dinámica Contable - Contabilidad de Activos,...Contabilidad General: Práctica y Dinámica Contable - Contabilidad de Activos,...
Contabilidad General: Práctica y Dinámica Contable - Contabilidad de Activos,...
 
Marco del buen desempeño docente
Marco del buen desempeño docenteMarco del buen desempeño docente
Marco del buen desempeño docente
 
"Protección de la salud mental luego del terremoto y tsunami del 27 de febrer...
"Protección de la salud mental luego del terremoto y tsunami del 27 de febrer..."Protección de la salud mental luego del terremoto y tsunami del 27 de febrer...
"Protección de la salud mental luego del terremoto y tsunami del 27 de febrer...
 
Relatietips
RelatietipsRelatietips
Relatietips
 
De Reis van de Heldin december 2015
De Reis van de Heldin december 2015De Reis van de Heldin december 2015
De Reis van de Heldin december 2015
 
Trabajp 30 agosto
Trabajp 30 agostoTrabajp 30 agosto
Trabajp 30 agosto
 
Error messages
Error messagesError messages
Error messages
 

Ähnlich wie Style Guides Are The New Photoshop (Fronteers 2012)

Creating a Business Oriented UI in APEX
Creating a Business Oriented UI in APEXCreating a Business Oriented UI in APEX
Creating a Business Oriented UI in APEXEnkitec
 
Not Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS frameworkNot Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS frameworkcrystalenka
 
No Feature Solutions with SharePoint
No Feature Solutions with SharePointNo Feature Solutions with SharePoint
No Feature Solutions with SharePointmikehuguet
 
JavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and LibrariesJavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and LibrariesOleksii Prohonnyi
 
Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010canarymason
 
Morden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web AppsMorden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web AppsCaesar Chi
 
How to manage a big scale HTML/CSS project
How to manage a big scale HTML/CSS projectHow to manage a big scale HTML/CSS project
How to manage a big scale HTML/CSS projectRenoir Boulanger
 
BootsFaces, AngularFaces und ein Blck unter die Motorhaube
BootsFaces, AngularFaces und ein Blck unter die MotorhaubeBootsFaces, AngularFaces und ein Blck unter die Motorhaube
BootsFaces, AngularFaces und ein Blck unter die MotorhaubeOPITZ CONSULTING Deutschland
 
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!Evan Mullins
 
Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 BoilerplateMichael Enslow
 
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap Creative
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentEvan Mullins
 
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 Jeffrey Barke
 
Implementing Vanilla Web Components
Implementing Vanilla Web ComponentsImplementing Vanilla Web Components
Implementing Vanilla Web Componentssonumanoj
 
Powerful tools for building web solutions
Powerful tools for building web solutionsPowerful tools for building web solutions
Powerful tools for building web solutionsAndrea Tino
 
Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)
Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)
Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)Nathaniel Bagnell
 
VS Code and Modern Development Environment Preview
VS Code and Modern Development Environment PreviewVS Code and Modern Development Environment Preview
VS Code and Modern Development Environment PreviewRoberto Stefanetti
 
How I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScriptHow I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScriptKevin Read
 
Embedding V8 in Android apps with Ejecta-V8
Embedding V8 in Android apps with Ejecta-V8Embedding V8 in Android apps with Ejecta-V8
Embedding V8 in Android apps with Ejecta-V8Kevin Read
 

Ähnlich wie Style Guides Are The New Photoshop (Fronteers 2012) (20)

Creating a Business Oriented UI in APEX
Creating a Business Oriented UI in APEXCreating a Business Oriented UI in APEX
Creating a Business Oriented UI in APEX
 
Not Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS frameworkNot Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS framework
 
No Feature Solutions with SharePoint
No Feature Solutions with SharePointNo Feature Solutions with SharePoint
No Feature Solutions with SharePoint
 
JavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and LibrariesJavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and Libraries
 
Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010
 
Morden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web AppsMorden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web Apps
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
 
How to manage a big scale HTML/CSS project
How to manage a big scale HTML/CSS projectHow to manage a big scale HTML/CSS project
How to manage a big scale HTML/CSS project
 
BootsFaces, AngularFaces und ein Blck unter die Motorhaube
BootsFaces, AngularFaces und ein Blck unter die MotorhaubeBootsFaces, AngularFaces und ein Blck unter die Motorhaube
BootsFaces, AngularFaces und ein Blck unter die Motorhaube
 
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
 
Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 Boilerplate
 
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
 
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
 
Implementing Vanilla Web Components
Implementing Vanilla Web ComponentsImplementing Vanilla Web Components
Implementing Vanilla Web Components
 
Powerful tools for building web solutions
Powerful tools for building web solutionsPowerful tools for building web solutions
Powerful tools for building web solutions
 
Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)
Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)
Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)
 
VS Code and Modern Development Environment Preview
VS Code and Modern Development Environment PreviewVS Code and Modern Development Environment Preview
VS Code and Modern Development Environment Preview
 
How I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScriptHow I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScript
 
Embedding V8 in Android apps with Ejecta-V8
Embedding V8 in Android apps with Ejecta-V8Embedding V8 in Android apps with Ejecta-V8
Embedding V8 in Android apps with Ejecta-V8
 

Mehr von Stephen Hay

From Deception to Clarity
From Deception to ClarityFrom Deception to Clarity
From Deception to ClarityStephen Hay
 
The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)Stephen Hay
 
The Art of Deception
The Art of DeceptionThe Art of Deception
The Art of DeceptionStephen Hay
 
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the BrowserSculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the BrowserStephen Hay
 
Power Tools For Browser-Based Design
Power Tools For Browser-Based DesignPower Tools For Browser-Based Design
Power Tools For Browser-Based DesignStephen Hay
 
UIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design WorkflowUIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design WorkflowStephen Hay
 
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)Stephen Hay
 
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Stephen Hay
 
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)The New Photoshop, Part 2: The Revenge of the Web (FEC13)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)Stephen Hay
 
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)Stephen Hay
 
The New Photoshop, Part 2: The Revenge of the Web
The New Photoshop, Part 2: The Revenge of the WebThe New Photoshop, Part 2: The Revenge of the Web
The New Photoshop, Part 2: The Revenge of the WebStephen Hay
 
Go With The Flow
Go With The FlowGo With The Flow
Go With The FlowStephen Hay
 
Fronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid PrototypingFronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid PrototypingStephen Hay
 
Meta layout: a closer look at media queries
Meta layout: a closer look at media queriesMeta layout: a closer look at media queries
Meta layout: a closer look at media queriesStephen Hay
 
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011Stephen Hay
 
HTML5 & Webrichtlijnen 2
HTML5 & Webrichtlijnen 2HTML5 & Webrichtlijnen 2
HTML5 & Webrichtlijnen 2Stephen Hay
 
Real-world Responsive Design
Real-world Responsive DesignReal-world Responsive Design
Real-world Responsive DesignStephen Hay
 
De aanvrager wint
De aanvrager wintDe aanvrager wint
De aanvrager wintStephen Hay
 
The Future State of Layout
The Future State of LayoutThe Future State of Layout
The Future State of LayoutStephen Hay
 
Web Guidelines Fronteers Teachers Day 2009
Web Guidelines Fronteers Teachers Day 2009Web Guidelines Fronteers Teachers Day 2009
Web Guidelines Fronteers Teachers Day 2009Stephen Hay
 

Mehr von Stephen Hay (20)

From Deception to Clarity
From Deception to ClarityFrom Deception to Clarity
From Deception to Clarity
 
The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)
 
The Art of Deception
The Art of DeceptionThe Art of Deception
The Art of Deception
 
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the BrowserSculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
 
Power Tools For Browser-Based Design
Power Tools For Browser-Based DesignPower Tools For Browser-Based Design
Power Tools For Browser-Based Design
 
UIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design WorkflowUIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design Workflow
 
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
 
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
 
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)The New Photoshop, Part 2: The Revenge of the Web (FEC13)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
 
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
 
The New Photoshop, Part 2: The Revenge of the Web
The New Photoshop, Part 2: The Revenge of the WebThe New Photoshop, Part 2: The Revenge of the Web
The New Photoshop, Part 2: The Revenge of the Web
 
Go With The Flow
Go With The FlowGo With The Flow
Go With The Flow
 
Fronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid PrototypingFronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid Prototyping
 
Meta layout: a closer look at media queries
Meta layout: a closer look at media queriesMeta layout: a closer look at media queries
Meta layout: a closer look at media queries
 
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
 
HTML5 & Webrichtlijnen 2
HTML5 & Webrichtlijnen 2HTML5 & Webrichtlijnen 2
HTML5 & Webrichtlijnen 2
 
Real-world Responsive Design
Real-world Responsive DesignReal-world Responsive Design
Real-world Responsive Design
 
De aanvrager wint
De aanvrager wintDe aanvrager wint
De aanvrager wint
 
The Future State of Layout
The Future State of LayoutThe Future State of Layout
The Future State of Layout
 
Web Guidelines Fronteers Teachers Day 2009
Web Guidelines Fronteers Teachers Day 2009Web Guidelines Fronteers Teachers Day 2009
Web Guidelines Fronteers Teachers Day 2009
 

Kürzlich hochgeladen

Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 

Kürzlich hochgeladen (19)

Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 

Style Guides Are The New Photoshop (Fronteers 2012)

  • 1. STYLE GUIDES ARE THE NEW PHOTOSHOP STEPHEN HAY @ FRONTEERS 2012
  • 2. DESIGNING IN THE BROWSER Demonstrating our designs to clients as XHTML/CSS pages rather than as static Photoshop or Fireworks has streamlined our workflow and helped us to set and manage a client’s expectations better than ever before. Andy Clarke, “Time to stop showing clients static design visuals” (2008)
  • 3. WALLS COME TUMBLING DOWN (2009) Coming up with new and better workflows Designing in the browser Learning to live with constraints Designing systems, rather than sites
  • 4. PHOTOSHOP IS IMPRACTICAL FOR RESPONSIVE DESIGN MOCKUPS
  • 5. PROBLEMS WITH “PHOTOSHOP” COMPS Design changes are time-consuming Too much manual work The image editor is a dependency Responsive design implies multiple and flexible layouts
  • 6. REALITY (Screenshots by Adobe Edge Inspect)
  • 7. WEB TECH IS VERY PRACTICAL FOR RESPONSIVE DESIGN MOCKUPS
  • 8. WEB-BASED COMPS: THE GOOD Doesn’t need to take much longer than Photoshop Automate trivial tasks Realistic presentation / real-life rendering State changes are easily visualized Free and open: everyone has a browser & editor No negative surprises for the client Possible prep for development They can be responsive
  • 9. WE NEED TWO THINGS TO REPLACE PHOTOSHOP FOR COMPS
  • 10. 1. Static Web-based Comps 2. Style Guides
  • 12. STYLE GUIDES: THE GOOD No measuring State and breakpoint changes can be included Useful for future designers, devs & others Design consistency and maintainability
  • 13. STYLE GUIDES IN THE WILD Apple Identity Guidelines
  • 14. STYLE GUIDES IN THE WILD BBC GEL
  • 15. ANNA DEBENHAM’S COLLECTION STYLE GUIDES, PATTERN LIBRARIES & TOOLS TO CREATE THEM http://gim.ie/fZyK
  • 16. MY WEB STYLE GUIDE WISHLIST
  • 19. Update code snippets automatically when mockup code changes
  • 20. Update screenshots automatically when something changes
  • 21. Elements/modules should not have to be physically split into separate files
  • 23. AM I TOO DEMANDING? Free-form writable Automated screenshot-taking Update code snippets automatically Update screenshots automatically No separate files for code snippets Syntax highlighting
  • 24. I COULD NOT FIND A SINGLE TOOL TO DO THIS
  • 26. Free-form writing DEXY + PANDOC (OR MARKDOWN) FILTER http://www.dexy.it/
  • 27. Taking screenshots PHANTOM.JS + CASPER.JS http://casperjs.org/ http://phantomjs.org/
  • 28. Code & screenshot updating JINJA TEMPLATES + DEXY’S IDIOPIDAE FILTER
  • 29. Syntax highlighting DEXY’S PYGMENTS FILTER
  • 30. THE COMMAND LINE http://www.flickr.com/photos/evdaimon/337754011/
  • 34. hi.
  • 36. How this works Web-based mockup Style guide content in Markdown Style guide screenshots taken, code snippets extracted HTML CSS SCREEN CODE
  • 37. STEPS
  • 38. 1 Create a web-based mockup Use HTML, CSS & when necessary, JavaScript Your goal is to represent the design in the browser Your goal is not to create production code Your CSS should be modular (it will end up in your style guide!)
  • 39. SMACSS MAKE CSS MORE MODULAR WITH… A LUMBERJACK.
  • 40. 2 Install Dexy & any dependencies If you’re a designer and can’t do it alone, ask a developer’s help. Before you ask for help, try going to the sites and following the instructions as best you can.
  • 41. 2 Install PhantomJS & CasperJS If you’re a designer and can’t do it alone, ask a developer’s help. Before you ask for help, try going to the sites and following the instructions as best you can.
  • 42. 3 Write your guide and use Jinja templates Use simple Markdown links to screenshots. Note the filenames you use.
  • 43. 4 Script your screenshots with CasperJS Keep things easy by adding a new casper.then() for each screenshot. Code brevity is not the goal.
  • 44. 5 Mark the CSS you want to export An export ends when another starts, or with @end.
  • 45. 6 Run Dexy Wow, that command line stuff is hard.
  • 46. DONE
  • 47. Changes in design? Run dexy again. Well, okay. In some cases you might want to do dexy cleanup followed by dexy setup and then dexy.
  • 48. Demo
  • 49. This is not without a learning curve. But what is?
  • 50. Choose what works for you. Hopefully something here will inspire you to find your own way. Experiment!
  • 51. These are new times. The problems we have with responsive workflow should encourage us to examine and evaluate our processes and tools.
  • 52. Have fun. Make great stuff. KEEP LEARNING. Thanks! @stephenhay Special thanks to Ana Nelson