75

Improving your responsive workflow with style guides

Embed Size (px)

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.

Citation preview

Page 2: Improving your responsive workflow with style guides
Page 3: Improving your responsive workflow with style guides
Page 4: Improving your responsive workflow with style guides
Page 5: Improving your responsive workflow with style guides
Page 6: Improving your responsive workflow with style guides
Page 7: Improving your responsive workflow with style guides
Page 8: Improving your responsive workflow with style guides
Page 9: Improving your responsive workflow with style guides
Page 10: Improving your responsive workflow with style guides
Page 11: Improving your responsive workflow with style guides
Page 12: Improving your responsive workflow with style guides
Page 13: Improving your responsive workflow with style guides
Page 14: Improving your responsive workflow with style guides
Page 15: Improving your responsive workflow with style guides
Page 16: Improving your responsive workflow with style guides
Page 17: Improving your responsive workflow with style guides
Page 18: Improving your responsive workflow with style guides
Page 19: Improving your responsive workflow with style guides
Page 20: Improving your responsive workflow with style guides
Page 21: Improving your responsive workflow with style guides
Page 22: Improving your responsive workflow with style guides
Page 23: Improving your responsive workflow with style guides
Page 24: Improving your responsive workflow with style guides
Page 25: Improving your responsive workflow with style guides
Page 26: Improving your responsive workflow with style guides
Page 27: Improving your responsive workflow with style guides
Page 28: Improving your responsive workflow with style guides
Page 29: Improving your responsive workflow with style guides
Page 30: Improving your responsive workflow with style guides
Page 31: Improving your responsive workflow with style guides
Page 32: Improving your responsive workflow with style guides
Page 33: Improving your responsive workflow with style guides
Page 34: Improving your responsive workflow with style guides
Page 35: Improving your responsive workflow with style guides
Page 36: Improving your responsive workflow with style guides
Page 37: Improving your responsive workflow with style guides
Page 38: Improving your responsive workflow with style guides
Page 39: Improving your responsive workflow with style guides
Page 40: Improving your responsive workflow with style guides
Page 41: Improving your responsive workflow with style guides
Page 42: Improving your responsive workflow with style guides
Page 43: Improving your responsive workflow with style guides

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

Page 44: Improving your responsive workflow with style guides

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

Page 45: Improving your responsive workflow with style guides

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

Page 46: Improving your responsive workflow with style guides

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

Page 47: Improving your responsive workflow with style guides
Page 48: Improving your responsive workflow with style guides
Page 49: Improving your responsive workflow with style guides

/*## 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>

Page 50: Improving your responsive workflow with style guides
Page 51: Improving your responsive workflow with style guides
Page 52: Improving your responsive workflow with style guides
Page 53: Improving your responsive workflow with style guides
Page 54: Improving your responsive workflow with style guides
Page 55: Improving your responsive workflow with style guides
Page 56: Improving your responsive workflow with style guides
Page 57: Improving your responsive workflow with style guides
Page 58: Improving your responsive workflow with style guides
Page 59: Improving your responsive workflow with style guides
Page 60: Improving your responsive workflow with style guides
Page 61: Improving your responsive workflow with style guides
Page 62: Improving your responsive workflow with style guides
Page 63: Improving your responsive workflow with style guides
Page 64: Improving your responsive workflow with style guides
Page 65: Improving your responsive workflow with style guides
Page 66: Improving your responsive workflow with style guides
Page 67: Improving your responsive workflow with style guides
Page 68: Improving your responsive workflow with style guides

/*

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

Page 69: Improving your responsive workflow with style guides
Page 70: Improving your responsive workflow with style guides
Page 71: Improving your responsive workflow with style guides
Page 72: Improving your responsive workflow with style guides
Page 73: Improving your responsive workflow with style guides
Page 74: Improving your responsive workflow with style guides