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.