Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Improving your responsive workflow with style guides


Published on

This is from a talk I gave at DrupalCon Sydney. The slides have been exported from reveal.js, so look much beter here -

The video of the presentation (and more explanation) is also available here

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.

Published in: Design

Improving your responsive workflow with style guides

  1. 1. StyleDocco examples source code 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
  2. 2. StylesheetThe 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
  3. 3. Kalei - Style guide Kalei - Style guide styles.cssKalei theme theme.css Generates bootstrap-like documentation for your own CSS!Examples 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. buttons.css This website is a live example generated from Kaleis style.css fixie-­demo.css Star 168 Fork 24Third Party highlight/styles/googlecode.css Getting started 1. Download the repository (git clone git:// 2. Serve it on a HTTP server and it should work! 3. Edit js/config.js to point at your own styles.css
  4. 4. ExampleEasily show off examples of your components and the HTML to generate themExample Compose new Archive Report spam Delete Move to LabelsCode <div class="actions button-container"> <a href="#" class="button primary">Compose new</a>
  5. 5. /*## Typographic components### Hero UnitA lightweight, flexible component to showcase key content 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>
  6. 6. /*### Nav BarThe nav bar is one of the most important components ofthe 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 toggle link is *displayed as an iconfont*, unless **`.fontface`** is not detected in which "menu" text is *a fallback*. - If **`.no-js`** is detected a fallback nav in the footer should *be displayed* and the toggle anchor linkwill point to that. - The navigation should *animate a slide down* on tog