improving your responsive workflow with style guides
DESCRIPTION
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.TRANSCRIPT
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
Stylesheet
StyleDoccoStyleDocco examplesexamples source codesource code
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
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 documentationfor 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
StarStar 168168 ForkFork 2424
Getting started1. 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
ExampleEasily show off examples of your components and the HTML to generate them
Compose newCompose new ArchiveArchive Report spamReport spam DeleteDelete
Move to Labels
Example
<div class="actions button-container"> <a href="#" class="button primary">Compose new</a>
Code
/*## Typographic components
### Hero Unit
A 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>
/*
### 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 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 link will point to that. - The navigation should *animate a slide down* on tog