Improving Your Responsive Workflow with Style Guides

1a06ed07575b1a77fa2b324e1385c2ea?s=47 Luke Brooker
February 08, 2013

Improving Your Responsive Workflow with Style Guides

This is from a talk I gave at DrupalCon Sydney. The slides have been exported from reveal.js, so look much better here - http://bit.ly/luke-sg

The video of the presentation (and more explanation) is also available here http://bit.ly/dc2013luke

--
Whether it be responsive web design or new emerging techniques that allow us to create experiences for multitudes of new devices, one thing is certain… our workflows need to change.

Many of us have started adapting our processes by doing things like scrapping mockups and designing in the browser, but there is one step in the process often left unconsidered. Style guides.

Traditionally style guides have been considered time consuming "nice to haves" only delegated to the biggest of projects. But as we shift from designing "pages" to designing systems, the way we communicate our designs need to make this shift too. By designing with living html/css style guides we can present all the elements of our systems, without creating multitudes of time consuming mockups. They not only help clients visualise the components of their systems but also help designers and developers to work together in creating truly future friendly experiences. You may be thinking "this all sounds all well and good, but that's an extra tedious, costly step in my workflow". Don't worry, these days they can be automated.

1a06ed07575b1a77fa2b324e1385c2ea?s=128

Luke Brooker

February 08, 2013
Tweet

Transcript

  1. None
  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. StyleDocco StyleDocco generates documentation and style guide documents from your

    stylesheets. Stylesheet comments will be parsed through Markdown and displayed in a generated HTML document. You can write HTML code prefixed with 4 spaces or between code fences ( ``` ) in your comments, and StyleDocco shows a preview with the styles applied, and displays the example HTML code. The previews are rendered in resizable iframes to make it easy to demonstrate responsive designs at different viewport sizes. Suggestions, feature requests and bug reports are very welcome, either at GitHub or on Twitter (@jacobrask). Installation StyleDocco requires Node.js. After installing Node.js, run npm install -fg styledocco or clone this repository. StyleDocco is free software, released under the MIT license. Examples StyleDocco StyleDocco examples examples source code source code
  44. Stylesheet The following is the code you would write in

    your stylesheet, and the Output is what you would see in the documentation. /* Provides extra visual weight and identifies the primary action in a set of buttons. <button class="btn primary">Primary</button> */ .btn.primary { background: steelblue; color: snow; border: 2px outset steelblue; } Output
  45. Kalei - Style guide Kalei theme Examples Third Party styles.css

    theme.css buttons.css fixie-­demo.css highlight/styles/googlecode.css Kalei - Style guide Generates bootstrap-like documentation for your own CSS! This project aims at making sure your style sheets are fully documented whilst being synchronized with your webpages styles. To do this it actually uses your live stylesheets in so that at anytime you can review how your styleguide looks. This website is a live example generated from Kalei's style.css Star Star 168 168 Fork Fork 24 24 Getting started 1. Download the repository (git clone git://github.com/thomasdavis/kaleistyleguide.git) 2. Serve it on a HTTP server and it should work! 3. Edit js/config.js to point at your own styles.css
  46. Example Easily show off examples of your components and the

    HTML to generate them Compose new Compose new Archive Archive Report spam Report spam Delete Delete Move to Labels Example <div class="actions button-container"> <a href="#" class="button primary">Compose new</a> Code
  47. None
  48. None
  49. /* ## Typographic components ### Hero Unit A lightweight, flexible

    component to showcase key conte nt on your site. It works well on marketing and content -heavy sites. ``` <div class="hero-unit"> <h1>Heading</h1> <p>Tagline</p> <p> <a class="btn btn-primary btn-large"> Learn more </a>
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. /* ### Nav Bar The nav bar is one of

    the most important components of the site, it needs to: - Allow an easy usable way to get around - Convey where the user currently is - On **small screens** the items are *hidden* and a tog gle link is *displayed as an iconfont*, unless **`.font face`** is not detected in which "menu" text is *a fall back*. - If **`.no-js`** is detected a fallback nav in the f ooter should *be displayed* and the toggle anchor link will point to that. - The navigation should *animate a slide down* on tog
  69. None
  70. None
  71. None
  72. None
  73. None
  74. None
  75. None