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.

Transcript

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