Living Style Guides

LIVING STYLE GUIDESJune 24, 2015

As the sun set...

It’s getting dark...

Living Style GuideA live web page that displays the styles and components used in

a particular product. The purpose of the style guide is to provide

accurate, up-to-date information about the style and construction of

the site standards.

Popularized by developer Nicole Sullivan. Emphasis: single point of

truth for documentation.

Style Guide Driven Development

➵ more at twitter.com/stubbornella

How Patterns Work

What is a “pattern”?Patterns are the building blocks of user

interfaces. They provide solutions to a

repeating interaction problem.

The pattern concept was popularized in

the book A Pattern Language, by architect

Christopher Alexander in the ‘70s.2

Web SkinSleek, intuitive, and powerful front-end framework for fasater and easier web development at Workiva.

Getting Started CSS Icons Components JavaScript Sass API

Currently v1.1.0 Web Skin 0.4.27 docs GitHub project Contribute

Web Skin

Download Web Skin

Official DefinitionWeb Skin is a ground level framework that provides markup spec

for a CSS class skinning API.1

• Consistent UI skins for a large app ecosystem.

• Detailed visual and technical specifications.

• Bridges gap between UX and Development.

Goal: make our apps feel like one seamless experience. 2

Get it

FREE

Cancel Save changes

Cancel Affirm

Default Modal (HTML)

Modals Updated 060815

Small Modal (HTML)

Small Modal (FLEX)

Small Modal with Two Choices

Paragraph contents of a small modal dialog.

Small Modal with Two Choices

Paragraph contents of a small modal dialog.

AffirmCancel

Default Modal with Two Choices

Paragraph contents of a Dialog. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Convert “Q2_2013_meeting.ppt” to Wdesk presentation?

This will allow you to edit and collaborate on this presentation in Wdesk.

Convert PresentationMaybe Later

Default Modal with 3+ Choices

Paragraph contents of a Dialog. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Create CertificationSet RemindersAdd Tags

Default Modal with 3+ Choices

Paragraph contents of a Dialog. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

ActionCancelTertiary Action

Default Modal with Decision Required

Paragraph contents of a Dialog. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

RestoreDiscard

Callout dialog variation

Actions variation: 3+ Related

Actions variation: Unrelated

Actions variation: Decision required

Please do not archive these files. Download a new copy from Web Skin as needed. They are subject to frequent change.

A way to display content over a background...

Basic panel example

Panel content

Panel heading without title

Panel content

Panel title

Panel content

Panel footer

Updated 042815

Condensed Panel title

Condensed Panel content

Condensed Panel Footer

Accordion Panels

Value Settings:

Axis

Total Returns Performance

Title:Chart Type:

General

Legend

Show Title

Show All Values

Column

Panel content

Inverse Panel heading without title

Panel content

Inverse panel title

Panel styled on hover

type something here

Pabel styled manually

type something here

Panel with heading

Panel with footer

Collapsible panel

Condensed panel

Inverse contrast variation

Panel Focus

Basic example

Please do not archive these files. Download a new copy from Web Skin as needed. They are subject to frequent change.

A way to expand and collapse content...

A way to navigate...

A way to show a list of content...

General XBRL Filing Profile Fields 42

INFO

Cras justo odio

Dapibus ac facilisis in

Morbi leo risus

Porta ac consectetur ac

Vestibulum at eros

Ut tristique mollis blandit. Integer egestas varius libero eu suscipit. Sed auctor scelerisque dui ac luctus. Morbi tristique mauris quis imperdiet ultricies.

Pellentesque ac varius mauris, id sollicitudin est. Nunc efficitur massa sed ligula porta rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris cursus nunc a tristique facilisis. Ut et mi sit amet elit varius molestie accumsan sit amet sem. In ut neque tortor. In a convallis eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Edit OK

Importing

Following Pattern• Consistency across our platform makes for a better

user experience.

• Custom styles = use wisely.

• Balance between innovation and reinvented wheels.

Avoid “special snowflakes.” Design for the ecosystem.

Wise Council

Qualifiers for New Patterns• Unique Construction: more than a visual treatment of existing

pattern, has a distinct configuration of elements.

• Solves Problem: has a stated use case.

• Modular Design: defined elements belong to the component.

• Repeatable Usage: expected to be used in several places.

Notable Style Guides

Respond to device width, resolution, or pixel density.

Save time, money, and improve site performance.

Getting Started• Many resources at styleguides.io

• Read Front End Style Guides by Anna Debenham.

• Assess level of detail needed.

• Sell it: work more efficiently and boost morale.

Parting thoughts?

References1 Lademann, Aaron. “UI Platform Presentation.” April 2015.2 “10 UI Design Patterns You Should Be Paying Attention To.” Smashing Magazine. 22 June 2009. Web. 18 May 2015.

Photo CreditsOhmer, David. Dexter Mausoleum in a Tree Grip. Digital image. http://bit.ly/1TN8g2h. 20 Nov. 2010.

Gadal, Damian. I’ll Take You There. Digital image. Http://bit.ly/1GybPiN 25. Jan. 2014.

Price, Luke. Creepy Cemetery. Digital image. http://bit.ly/1KbLuOI. 31 May 2014.

L. Dragonfly CC. First Individual Snowflake Outdoors. Digital image. http://bit.ly/1HdkT3d. 2 February 2013.

Lord of the Rings: Fellowship of the Ring. New Line Home Entertainment, 2002. Film.

Cartledge, Peter. Crow. Digital image. http://bit.ly/1HeOx69. 7 January 2015.