This is from a talk I gave at DrupalCon Sydney. The slides have been exported from reveal.js, so look much beter 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.

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

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
-
Style
guide
styles.css
Kalei
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 Kalei's style.css
fixie-­demo.css
Star 168 Fork 24
Third
Party
highlight/styles/googlecode.css
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
Example
Compose new Archive Report spam Delete
Move to Labels
Code
<div class="actions button-container">
<a href="#" class="button primary">Compose new</a>

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