The ACC's App Framework Version 2.8 Code Name: Bristol
The American College of Cardiology is proud of its standards of excellence when it comes to the information it supplies to the best cardiologists in the world. And now it is taking great pains to bring that exceptional standards to its UI design.
Design Philosophy
Bristol is the first major release for UI & Design Standards by the college. The project was spearheaded by a cross division team governed by the Design Standards and Branding Commitee which was made up by team members from Digital Stradegy, Marketing & Branding, and IT.
The newest design from IT team is code named Bristol and ink. The design is intended to be clean, open and focused on making data entry as smooth as possible. Subtle textures and single lines mimic the feel of a pad of paper and a ball point pen. The design consists of clean usage of a single "ink" and shades of grey. The other "action" colors are used to imply intent or application responses. Simple modifications of the primary ink color allows recognition and product branding.
What Benefits Does the Framework give.
From our member's perspective, the expectation is that the guide will make ACC products instantly recognizable through consistent brand and visual design across print and digital products. Good and consistent interaction design with reduce the customer learning curve of our digital product while reinforcing the ACC brand.
Internally, the guide has significant benefits as well, if used during product design and development:
- Reduce product design time by providing a visual design framework, eliminating the need for recurring style decisions
- Reduce product development time by providing a user interface element code base from which to generate customized designs.
- Enable product suite updates, and reduce single app maintenance.
New to Bristol
Version 2.8
Page Level Callouts '.page-message'
- Page or system level alert designs
- Page Messages are State Effected
Version 2.7
Ghost Cards
- State effected ghost cards fade into the background
- Colored Paper morph and shrink when on ghost cards
Version 2.6
Graphic Enhancement of Overlap Tabs
- Selectecd and/or Active tab treatment
- Branding Level now colors tab treatments
Version 2.5
Refactor of Paper Cards
- Paper Cards
- Colored Paper Refactored
- Background Paper States
- Colored Paper States
New Features to Tabs
- Lock added Tab States
- Visited added Tab States
Overlap Tabs
- DOM Change
- Overlap Tabs will now stay in line with cards with the added change of moving nav.overlap to a container element
Version 2.4
Foundation 6.2
- Button Group altered to use Foundation stack functions
Refactoring of states to remove unused states. Current List of States
- Error (.error)
- Warning (.warning)
- Success (.success)
- Info (.info)
- highlighted (.highlighted)
- disabled (.disabled)
Switch Upgrade
- Grouped Switches
- State Coloring for inactive and active states on switches
- Paper Layer responds to vertical break points
- Page Layout responds to vertical break points
Spacing and alignment
- Paint Dipped Cards. Alignment of holders
- use of calc() to remove single spaces of boarders when in browsers that support the function
Version 2.3
Vertical Media Queries and Adjustments
- Modular Scale Modification - line height and margin adapth to small height
- Vertical breakpoints added at 320, 480, 768px
- Paper Layer responds to vertical break points
- Page Layout responds to vertical break points
Version 2.2
Grid Based Questions
- Size Modifies
- Label Location Modifier
- Indent Modifier
- Repeating Input Grouping
Version 2.1
- Unit Switches
- Grid Based Questions
Version 2.0
- Foundation 6 is now fully integrated with the Framework
- Expanded Paper details
- New Switches
- Button Groups Simplified
- New Top Bar for Web Layouts
Base HTML Framework
The foundation of the ACC framework is based of the Zurb Framework V.5
Brand Level
var $brand-level- this variable has the ablity to over take the standard acc coloring with a branded product color. Standard values are:
- Pure ACC Color
- Header Bar and Primaary Nav Selects
- Lines, Selects, and Header Bar
- Full Color OVer Take, Typography, Selects, Header Bar, and Lines
| Variable | Color |
|---|---|
| $brand-color | |
| $product-brand-color | |
| $primary-color | |
| $secondary-color | |
| $tertiary-color |
<table class="table">
<thead>
<tr>
<th>Variable</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>$brand-color</td>
<td class="brand-color"> </td>
</tr>
<tr>
<td>$product-brand-color</td>
<td class="product-brand-color"> </td>
</tr>
<tr>
<td>$primary-color</td>
<td class="primary-color"> </td>
</tr>
<tr>
<td>$secondary-color</td>
<td class="secondary-color"> </td>
</tr>
<tr>
<td>$tertiary-color</td>
<td class="tertiary-color"> </td>
</tr>
</tbody>
</table>
Zurb Foundation - Kitchen Sink
kitchensink- This is a visual representation of UI elements that come from the base framework from ZURB. This does not includes every single element from Foundation to view a full list go to the documentation.
Go to Zurb Foundation Documentation
Now Using Zurb Foundation Sites 6
@example
Callout
This is a callout.
It has an easy to override visual style, and is appropriately subdued.
It's dangerous to go alone, take this.This is a secondary callout
It has an easy to override visual style, and is appropriately subdued.
It's dangerous to go alone, take this.This is a warning callout
It has an easy to override visual style, and is appropriately subdued.
It's dangerous to go alone, take this.This is an error callout
It has an easy to override visual style, and is appropriately subdued.
It's dangerous to go alone, take this.Breadcrumbs
Buttons
switches
Grid
Colors, Textures, Fonts & Icons
a paragraph that would talk about the high reaching goals of the project.
Colors
ACC's Colors- The ACC has a set of standard colors which include the +ACC Blue+, +Scrub Colors+, and +Intent Colors+. The colors that change depending the product are the +Scrub Colors+
Foundation for Sites by ZURB Version 6.2.3 foundation.zurb.com Licensed under MIT Open Source
| Color Name | Hex Color |
|---|---|
ACC Blue |
#00386b |
Product Color |
#9a1267 |
Primary Color |
#198dae |
Secondary Color |
#b3b3b3 |
Tertiary Color |
#7d5891 |
Success Color |
#14B057 |
Warning Color |
#E08514 |
Error Color |
#c32231 |
Navigation Color |
#018adb |
Scrub Colors
| Color Name | Hex Color |
|---|---|
Scrub Teal |
#198dae |
Scrub Green |
#14B057 |
Scrub Blue |
#018adb |
| Less used colors for highlights and pinstripes | |
Scrub Purple |
#7d5891 |
Scrub Leaf Green |
#70cd40 |
Scrub Magenta |
#b84299 |
Textures
Textures- Subtle textures are used on the design to give a subtle level of depth.
Textures
Paper Textures
News Print Solid
- File Name: billie-holiday-lite.png
- Usage: Soft paper used in the background. This texture opaque and can not be colored.
News Print Transparent
- File Name: billie-holiday.png
- Usage: News Print that can have a color behind it.
News Print Dirty & Distressed
- File Name: billie-holiday-spec.png
- Usage: Alternate soft paper used in the background of groupings and overlaps.
News Print Dark
- File Name: textured_paper.png
- Usage: This paper texture is used below news print when there is a need for a deepr layer of texture like in the overlap tabs that break the surface of News Print backgrounds.
Construction Paper
- File Name: construction-paper.png
- Usage: A colorable texture to drop in color fields when needed.
Construction Paper Subtle
- File Name: paper-texture.png
- Usage: A colorable texture to drop in color fields when needed.
Carbon Paper
- File Name: crossed_stripes.png
- Usage: Footer background with a lux quality.
Ink Marks
Application Response is shown with "ink" markings that can be simply colored by changing the background-color.
Cross Hatched Ink With Alt Grey
- File Name: empty_diamond@2x.png
- File Name: empty_diamond_grey@2x.png
- Special Usage: Table cell states
Cross Hatched Ink Tight
- File Name: empty_diamond
- Special Usage: Disabled Buttons
Stripped Ink
- File Name: empty_stripe@2x.png
- Usage: Page responses, error messages, and warning messages
Stripped Ink Alt Grey
- File Name: empty_stripe_grey@2x.png
- Usage: Alternate versions of responses callouts and errors.
Stripped Ink Alt Blue
- File Name: empty_stripe_blue@2x.png
- Usage: Alternate versions of responses callouts and errors.
Stripped Ink Tight
- File Name: empty_stripe.png
- Special Usage: List item states.
Weaves
-
File Name:
cream_pixels.png
cream_pixels_alt.png
cream_pixels_altdark.png - Usage: A colorable texture to drop in to tables for the striped and baneded tables.
Fonts
OpenSans & Roboto Slab- OpenSans is the major font family used in all digital text accross properties at the ACC. Roboto Slab and Roboto are used in highlighted cases like labels, Primary Navs, and some Header Tags.
OpenSans font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
Display Fonts & Headers
Roboto Slab font-family: 'Roboto Slab', 'Times New Roman', 'Lucida Bright', Georgia, serif;
Primary Navigation, Headers & Labels
Open Sans font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
Body Copy, Lists & Tables
Typography
Headline with Counters
.order-marker.- It is some times useful to add an order-marker to the beginning of headlines. You can modify them by adding
.hollowor
.inversedepending on the need.
1Header 1 Tag
2Header 2 Tag
aHeader 3 Tag
bHollow Marker with H4 Tag
cInversed Marker with H5 Tag
<h1>
<span class="order-marker">1</span>Header 1 Tag</h1>
<h2>
<span class="order-marker">2</span>Header 2 Tag</h2>
<h3>
<span class="order-marker">a</span>Header 3 Tag</h3>
<h4 class="with-underline">
<span class="order-marker hollow">b</span>Hollow Marker with H4 Tag</h4>
<h5 class="colored-paper" style="">
<span class="order-marker inverse">c</span>Inversed Marker with H5 Tag</h5>
Type Modifiers
bold, italic or subtle,etc...-
.bold- make text bold,
.italic- make text italic, or
.subtle- make text subtle
<div class="bold">this has the `.bold` class added to the container which increases font weight and darkens the color.</div>
<div class="emphasis">this has the `.emphasis` class added to the container which darkens the color and makes the font italic and bold</div>
<div
class="loud">this has the `.loud` class added to the container which darkens the color.</div>
<div class="quiet">this has the `.quiet` class added to the container which lightens the color.</div>
<div class="subtle">this has the `.subtle` class added to the container which decreases font weight and lightens the color.</div>
<div class="italic">this has the `.italic` class added to the container which makes it lighter and makes it italic.</div>
<div class="text-highlight-color">this has the `.text-highlight-color` class added to the container which changes the color to the product color</div>
Tables
Tables
table- plan tables are clean with barely any styles.
| table header | table header | table header |
|---|---|---|
| table row 1 table cell A
this is small text |
table row 1 table cell B
this is small text with blue |
table row 1 table cell C |
| table row 2 table cell A | table row 2 table cell B | table row 2 table cell C |
| footer cell | ||
<table class="table">
<thead>
<tr>
<th>table header</th>
<th>table header</th>
<th>table header</th>
</tr>
</thead>
<tbody>
<tr>
<td>table row 1 table cell A
<br>
<small>this is small text</small>
</td>
<td>table row 1 table cell B
<br>
<small class="color-highlighted">this is small text with blue</small>
</td>
<td>table row 1 table cell C</td>
</tr>
<tr>
<td>table row 2 table cell A</td>
<td>table row 2 table cell B</td>
<td>table row 2 table cell C</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">footer cell</td>
</tr>
</tfoot>
</table>
Tables (Banded)
.banded- There are two high styled tables
.bandedor
.stripped.
| table header | table header | table header |
|---|---|---|
| row 1 cell A | row 1 cell B | row 1 cell C |
| row 2 cell A | row 2 cell B | row 2 cell C |
| row 3 cell A | row 3 cell B | row 3 cell C |
| footer cell | ||
<table class="table banded">
<thead>
<tr>
<th>table header</th>
<th>table header</th>
<th>table header</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1 cell A</td>
<td>row 1 cell B</td>
<td>row 1 cell C</td>
</tr>
<tr>
<td>row 2 cell A</td>
<td>row 2 cell B</td>
<td>row 2 cell C</td>
</tr>
<tr>
<td>row 3 cell A</td>
<td>row 3 cell B</td>
<td>row 3 cell C</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">footer cell</td>
</tr>
</tfoot>
</table>
Tables (Striped)
.striped- Table with the class
.striped.
| table header | table header | table header |
|---|---|---|
| row 1 cell A | row 1 cell B | row 1 cell C |
| row 2 cell A | row 2 cell B | row 2 cell C |
| row 2 cell A | row 2 cell B | row 2 cell C |
| footer cell | ||
<table class="table striped">
<thead>
<tr>
<th>table header</th>
<th>table header</th>
<th>table header</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1 cell A</td>
<td>row 1 cell B</td>
<td>row 1 cell C</td>
</tr>
<tr>
<td>row 2 cell A</td>
<td>row 2 cell B</td>
<td>row 2 cell C</td>
</tr>
<tr>
<td>row 2 cell A</td>
<td>row 2 cell B</td>
<td>row 2 cell C</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">footer cell</td>
</tr>
</tfoot>
</table>
Tables (Striped Desaturate)
.striped.desaturate- Table with the class
.striped.desaturatewill produce a table that is cross colored with only greys.
| table header | table header | table header |
|---|---|---|
| row 1 cell A | row 1 cell B | row 1 cell C |
| row 2 cell A | row 2 cell B | row 2 cell C |
| row 2 cell A | row 2 cell B | row 2 cell C |
| footer cell | ||
<table class="table striped desaturate">
<thead>
<tr>
<th>table header</th>
<th>table header</th>
<th>table header</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1 cell A</td>
<td>row 1 cell B</td>
<td>row 1 cell C</td>
</tr>
<tr>
<td>row 2 cell A</td>
<td>row 2 cell B</td>
<td>row 2 cell C</td>
</tr>
<tr>
<td>row 2 cell A</td>
<td>row 2 cell B</td>
<td>row 2 cell C</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">footer cell</td>
</tr>
</tfoot>
</table>
Tables Row(Seperator)
.seperator- Table with the class
.stripped.
| table header | table header | table header |
|---|---|---|
| row 1 cell A | row 1 cell B | row 1 cell C |
| Separator | ||
| footer cell | ||
<table class="table stripped">
<thead>
<tr>
<th>table header</th>
<th>table header</th>
<th>table header</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1 cell A</td>
<td>row 1 cell B</td>
<td>row 1 cell C</td>
</tr>
<tr class="seperator">
<td colspan='3'>Separator</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">footer cell</td>
</tr>
</tfoot>
</table>
Tables Row(Seperator + State)
.seperator.error- An Error State on a table sep.
| table header | table header | table header |
|---|---|---|
| row 1 cell A | row 1 cell B | row 1 cell C |
| Separator With Info | ||
| row 1 cell A | row 1 cell B | row 1 cell C |
| Separator With success | ||
| row 1 cell A | row 1 cell B | row 1 cell C |
| Separator With Error | ||
| row 1 cell A | row 1 cell B | row 1 cell C |
| Separator With warning | ||
| row 1 cell A | row 1 cell B | row 1 cell C |
| Separator With disabled | ||
| row 1 cell A | row 1 cell B | row 1 cell C |
| footer cell | ||
<table class="table stripped">
<thead>
<tr>
<th>table header</th>
<th>table header</th>
<th>table header</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1 cell A</td>
<td>row 1 cell B</td>
<td>row 1 cell C</td>
</tr>
<tr class="seperator info">
<td colspan='3'>Separator With Info</td>
</tr>
<tr>
<td>row 1 cell A</td>
<td>row 1 cell B</td>
<td>row 1 cell C</td>
</tr>
<tr class="seperator success">
<td colspan='3'>Separator With success</td>
</tr>
<tr>
<td>row 1 cell A</td>
<td>row 1 cell B</td>
<td>row 1 cell C</td>
</tr>
<tr class="seperator error">
<td colspan='3'>Separator With Error</td>
</tr>
<tr>
<td>row 1 cell A</td>
<td>row 1 cell B</td>
<td>row 1 cell C</td>
</tr>
<tr class="seperator warning">
<td colspan='3'>Separator With warning</td>
</tr>
<tr>
<td>row 1 cell A</td>
<td>row 1 cell B</td>
<td>row 1 cell C</td>
</tr>
<tr class="seperator disabled">
<td colspan='3'>Separator With disabled</td>
</tr>
<tr>
<td>row 1 cell A</td>
<td>row 1 cell B</td>
<td>row 1 cell C</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">footer cell</td>
</tr>
</tfoot>
</table>
Table States Cells
td.state-name- quickly color table cells.
| Text | Warning | ||
| Text | Info | ||
| Error | Text | ||
| Success | text |
<table class="table">
<tr>
<td class="error icon">
<i class="fa fa-holder"></i>
</td>
<td class="">
<i class="fa fa-holder"></i>
</td>
<td class="">Text</td>
<td class="warning">
<i class="fa fa-holder"></i>Warning</td>
</tr>
<tr>
<td class="">
<i class="fa fa-holder"></i>
</td>
<td class="info icon">
<i class="fa fa-holder"></i>
</td>
<td class="">Text</td>
<td class="info">
<i class="fa fa-holder"></i> Info</td>
</tr>
<tr>
<td class="">
<i class="fa fa-holder"></i>
</td>
<td class="warning icon">
<i class="fa fa-holder"></i>
</td>
<td class="error">Error</td>
<td class="">
<i class="fa fa-holder"></i> Text</td>
</tr>
<tr>
<td class="success icon">
<i class="fa fa-holder"></i>
</td>
<td class="info icon">
<i class="fa fa-holder"></i>
</td>
<td class="success">Success</td>
<td class="">
<i class="fa fa-holder"></i> text</td>
</tr>
</table>
Table States - Rows
tr.state- quickly color table rows with the states.
| Cell Data in success Row | Icon is Dynamic | ||
| Cell Data in Warning Row | I am an error cell | ||
| Icon is Dynamic | Cell Data in Error Row | Cell Data |
<table class="table stripped">
<tr class="success">
<td class="icon">
<i class="fa fa-holder-dynamic"></i>
</td>
<td class=""></td>
<td class="">Cell Data in success Row</td>
<td class="">Icon is Dynamic</td>
</tr>
<tr class="warning">
<td class="icon">
<i class="fa fa-holder-dynamic"></i>
</td>
<td class=""></td>
<td class="">Cell Data in Warning Row</td>
<td class="error">I am an error cell</td>
</tr>
<tr class="error">
<td class="icon">
<i class="fa fa-holder-dynamic"></i>
</td>
<td class="">Icon is Dynamic</td>
<td class="">Cell Data in Error Row</td>
<td class="">Cell Data</td>
</tr>
</table>
Forms - Questions & Answers
The heart of this design is around the modular structure of how you implement inputs or "Questions" and how you display that information "Answers". Question and Answers are containers that hold some or all of their children depending on the need. Both Questions and Answers share a common build structure. With the parent container which controls the width and its children which can be modified from the containters State.
Questions - How they are built
Questions are constructed with a stacked collection of divs within the container div.question. The elements are .label-holder, .input-holder,.message-holder, and .hint.
The Antomy
Questions -Required
.question- Below is a standard formating for an input question. The questions elements are designed to be fluid with in the questions width dimensions. So to have a smaller input constrain the
.queationcontainer. Modify with
.requiredand change the states with
warning, 'error', and 'data'
<div class="question required">
<div class="label-holder">
<label for="">
<span class="text">Question Dropdown Title (Required)</span>
<span class="required-holder">
<i class="fa fa-holder-dynamic"></i>
</span>
</label>
</div>
<div class="input-holder">
<div class="input-space column small-6 large-9">
<input type="text" />
</div>
<div class="column small-6 large-3">
<small class="value">Years</small>
</div>
</div>
<div class="message-holder">
<small class="error">
<i class="fa fa-holder"></i>Error message</small>
<small class="warning">
<i class="fa fa-holder"></i>Warning message</small>
<small class="data">
<i class="fa fa-holder"></i>Data message</small>
</div>
<div class="hint">This is some hint text</div>
</div>
Questions - States
.question + .warning + error +...- Modify the container with
.required,
.warning, '.error', and other states. Modifiers change the icons and control the visiblity of the message holder.
<div class="question warning wildcard">
<div class="label-holder">
<label for="">
<span class="text">Question</span>
<span class="required-holder">
<i class="fa fa-holder-dynamic"></i>
</span>
</label>
</div>
<div class="input-holder">
<div class="input-space column small-6 large-9">
<input type="text" />
</div>
<div class="column small-6 large-3">
<small class="value">Years</small>
</div>
</div>
<div class="message-holder">
<small class="error">
<i class="fa fa-holder"></i>Error message</small>
<small class="warning">
<i class="fa fa-holder"></i>Warning message</small>
<small class="info">
<i class="fa fa-holder"></i>Data message</small>
</div>
<div class="hint">This is some hint text</div>
</div>
Questions Grid Based
This is a variation of the question block used by NCDR. And is the replacement for the linear question
The Antomy
Questions Grid Based
.question-grid-based- This is a variation of the question block used by NCDR.
.label-holder & .input-holderare used as containters so you can add class grid sizer to the
split_1of5, split_2of5, split_3of5, split_4of5to control the size of the label and input space.
Default
<div class="row">
<h5 class="highlighted">Default</h5>
<div class="column small-12 end">
<div class="question-grid-based span-2-col required label-position-left">
<div class="label-holder">
<label for="">
<span class="text">Question Title
<a class="seq">1234</a>
</span>
<span class="required-holder">
<i class="fa fa-holder-dynamic"></i>
</span>
</label>
<div class="hint">This is some hint text</div>
</div>
<div class="input-holder">
<div class="input-space">
<input type="text">
</div>
<div class="message-holder">
<small class="error">
<i class="fa fa-holder"></i>Error message</small>
<small class="warning">
<i class="fa fa-holder"></i>Warning message</small>
<small class="data">
<i class="fa fa-holder"></i>Data message</small>
</div>
<div class="hint">This is some hint text</div>
</div>
</div>
</div>
</div>
Chile Indent Modifier
.indent-1- Grid questions can show there relationship to eachother by the use of indent modifiers. Children indent their inputs and mark themselves to show the relationship to the parent.
Default
<div class="row">
<h5 class="highlighted">Default</h5>
<div class="column small-12 last">
<div class="question-grid-based span-2-col required label-position-left indent-1">
<div class="label-holder">
<label for="">
<span class="text">Question Indent 1
<a class="seq">1234</a>
</span>
<span class="required-holder">
<i class="fa fa-holder-dynamic"></i>
</span>
</label>
<div class="hint">This is some hint text</div>
</div>
<div class="input-holder">
<div class="input-space">
<input type="text">
</div>
<div class="message-holder">
<small class="error">
<i class="fa fa-holder"></i>Error message</small>
<small class="warning">
<i class="fa fa-holder"></i>Warning message</small>
<small class="data">
<i class="fa fa-holder"></i>Data message</small>
</div>
<div class="hint">This is some hint text</div>
</div>
</div>
</div>
<div class="column small-12 last">
<div class="question-grid-based span-2-col required label-position-left indent-2">
<div class="label-holder">
<label for="">
<span class="text">Question Indent 2
<a class="seq">1234</a>
</span>
<span class="required-holder">
<i class="fa fa-holder-dynamic"></i>
</span>
</label>
<div class="hint">This is some hint text</div>
</div>
<div class="input-holder">
<div class="input-space">
<input type="text">
</div>
<div class="message-holder">
<small class="error">
<i class="fa fa-holder"></i>Error message</small>
<small class="warning">
<i class="fa fa-holder"></i>Warning message</small>
<small class="data">
<i class="fa fa-holder"></i>Data message</small>
</div>
<div class="hint">This is some hint text</div>
</div>
</div>
</div>
<div class="column small-6">
<div class="question-grid-based required label-position-left indent-3">
<div class="label-holder">
<label for="">
<span class="text">Question Indent 3
<a class="seq">1234</a>
</span>
<span class="required-holder">
<i class="fa fa-holder-dynamic"></i>
</span>
</label>
<div class="hint">This is some hint text</div>
</div>
<div class="input-holder">
<div class="input-space">
<input type="text">
</div>
<div class="message-holder">
<small class="error">
<i class="fa fa-holder"></i>Error message</small>
<small class="warning">
<i class="fa fa-holder"></i>Warning message</small>
<small class="data">
<i class="fa fa-holder"></i>Data message</small>
</div>
<div class="hint">This is some hint text</div>
</div>
</div>
</div>
<div class="column small-6"></div>
</div>
Single Switch Modifier
.label-position-right.single-switch[.tiny-switches,.small-switches,.large-switches]- Single switches sometimes don't have value labels but use the question labels. The size and alignment of the switches controlled by adding
.tiny-switches,
.small-switches,
.large-switchesto the question div.
<div class="row">
<div class="column small-12">
<div class="question-grid-based required single-switch label-position-right small-switches">
<div class="label-holder">
<label for="">
<span class="text">Question Indent 3
<a class="seq">1234</a>
</span>
<span class="required-holder">
<i class="fa fa-holder-dynamic"></i>
</span>
</label>
</div>
<div class="input-holder">
<div class="switch-input-space">
<div class="switch radius">
<input class="switch-input" id="radius-singleswitch" type="checkbox" value="true">
<label class="switch-paddle" for="radius-singleswitch">
<span class="show-for-sr">Do you like me?</span>
<span class="switch-active" aria-hidden="true">
<i class="fa fa-holder"></i>
</span>
<span class="switch-inactive" aria-hidden="true">
<i class="fa fa-holder"></i>
</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
Grouping and Fluid Alignment for Grid Based Questions
Repeating Switches Column Modifier
.group-3up- special quesitons have repeating inputs like radio buttons ths controls how if the inputs will spread themselves into columns.
<div class="row">
<div class="column small-12">
<div class="question-grid-based required label-position-left span-2-col group-2up">
<div class="label-holder">
<label for="">
<span class="text">Question Indent 3
<a class="seq">1234</a>
</span>
<span class="required-holder">
<i class="fa fa-holder-dynamic"></i>
</span>
</label>
</div>
<div class="input-holder">
<div class="switch-input-space">
<div class="switch radius">
<input class="switch-input" id="radius-checkbox1" type="checkbox" value="true">
<label class="switch-paddle" for="radius-checkbox1">
<span class="show-for-sr">Do you like me?</span>
<span class="switch-active" aria-hidden="true">
<i class="fa fa-check-circle-o"></i>
</span>
<span class="switch-inactive" aria-hidden="true">
<i class="fa fa-times-circle"></i>
</span>
</label>
</div>
<label class="switch-value" for="radius-checkbox1">Random Label Length</label>
</div>
<div class="switch-input-space">
<div class="switch radius">
<input class="switch-input" id="radius-checkbox2" type="checkbox" value="true">
<label class="switch-paddle" for="radius-checkbox2">
<span class="show-for-sr">Do you like me?</span>
<span class="switch-active" aria-hidden="true">
<i class="fa fa-check-circle-o"></i>
</span>
<span class="switch-inactive" aria-hidden="true">
<i class="fa fa-times-circle"></i>
</span>
</label>
</div>
<label class="switch-value" for="radius-checkbox2">Random Label Length</label>
</div>
<div class="switch-input-space">
<div class="switch radius">
<input class="switch-input" id="radius-checkbox3" type="checkbox" value="true">
<label class="switch-paddle" for="radius-checkbox3">
<span class="show-for-sr">Do you like me?</span>
<span class="switch-active" aria-hidden="true">
<i class="fa fa-check-circle-o"></i>
</span>
<span class="switch-inactive" aria-hidden="true">
<i class="fa fa-times-circle"></i>
</span>
</label>
</div>
<label class="switch-value" for="radius-checkbox3">Random Label Length</label>
</div>
<div class="switch-input-space">
<div class="switch radius">
<input class="switch-input" id="radius-checkbox4" type="checkbox" value="true">
<label class="switch-paddle" for="radius-checkbox4">
<span class="show-for-sr">Do you like me?</span>
<span class="switch-active" aria-hidden="true">
<i class="fa fa-check-circle-o"></i>
</span>
<span class="switch-inactive" aria-hidden="true">
<i class="fa fa-times-circle"></i>
</span>
</label>
</div>
<label class="switch-value" for="radius-checkbox4">Random Label Length</label>
</div>
<div class="switch-input-space">
<div class="switch radius">
<input class="switch-input" id="radius-checkbox5" type="checkbox" value="true">
<label class="switch-paddle" for="radius-checkbox5">
<span class="show-for-sr">Do you like me?</span>
<span class="switch-active" aria-hidden="true">
<i class="fa fa-check-circle-o"></i>
</span>
<span class="switch-inactive" aria-hidden="true">
<i class="fa fa-times-circle"></i>
</span>
</label>
</div>
<label class="switch-value" for="radius-checkbox5">Random Label Length</label>
</div>
<div class="switch-input-space">
<div class="switch radius">
<input class="switch-input" id="radius-checkbox6" type="checkbox" value="true">
<label class="switch-paddle" for="radius-checkbox6">
<span class="show-for-sr">Do you like me?</span>
<span class="switch-active" aria-hidden="true">
<i class="fa fa-check-circle-o"></i>
</span>
<span class="switch-inactive" aria-hidden="true">
<i class="fa fa-times-circle"></i>
</span>
</label>
</div>
<label class="switch-value" for="radius-checkbox6">Random Label Length</label>
</div>
</div>
</div>
</div>
</div>
Fluid Question Group
.question-group.fluid-align
- A containter that will align the labels to the longest label.
Default
<
h5
class
=
"highlighted"
>
Default
</
h5
>
<
div
class
=
" question-group fluid-align"
>
<
div
class
=
"question-grid-based span-2-col required label-position-left"
>
<
div
class
=
"label-holder"
>
<
label
for
=
""
>
<
span
class
=
"text"
>
Question Title that is Longer
<
a
class
=
"seq"
>
1234
</
a
>
</
span
>
<
span
class
=
"required-holder"
>
<
i
class
=
"fa fa-holder-dynamic"
>
</
i
>
</
span
>
</
label
>
</
div
>
<
div
class
=
"input-holder"
>
<
div
class
=
"input-space"
>
<
input
type
=
"text"
>
</
div
>
<
div
class
=
"hint"
>
This is some hint text
</
div
>
</
div
>
</
div
>
<
div
class
=
"question-grid-based span-2-col required label-position-left"
>
<
div
class
=
"label-holder"
>
<
label
for
=
""
>
<
span
class
=
"text"
>
Title
<
a
class
=
"seq"
>
1234
</
a
>
</
span
>
<
span
class
=
"required-holder"
>
<
i
class
=
"fa fa-holder-dynamic"
>
</
i
>
</
span
>
</
label
>
</
div
>
<
div
class
=
"input-holder"
>
<
div
class
=
"input-space"
>
<
input
type
=
"text"
>
</
div
>
<
div
class
=
"hint"
>
This is some hint text
</
div
>
</
div
>
</
div
>
<
div
class
=
"question-grid-based span-2-col required label-position-left"
>
<
div
class
=
"label-holder"
>
<
label
for
=
""
>
<
span
class
=
"text"
>
Question Title
<
a
class
=
"seq"
>
1234
</
a
>
</
span
>
<
span
class
=
"required-holder"
>
<
i
class
=
"fa fa-holder-dynamic"
>
</
i
>
</
span
>
</
label
>
</
div
>
<
div
class
=
"input-holder"
>
<
div
class
=
"input-space"
>
<
input
type
=
"text"
>
</
div
>
<
div
class
=
"hint"
>
This is some hint text
</
div
>
</
div
>
</
div
>
</
div
>
Override Warning
The use of the .question-group.fluid-align will override any sizing on the questions that might have been applied.
Grouping Repeating Questions
Form Repeater
.repeater- This is form elements repeater. This Module is broken into 3 major containers. The
rendersare any previously saved collection of inputs.The
question-groupholds all of the questions that need to be repeated. And the
.repeater-actionsis the buttons to save|submit and cancel the current session of inputs. The repeater has a focused mode when editing adding
.repeater.edit-modeto the containter will hide the renders at the top and toggle any elements that have been tagged with
.edit-mode--hideand
.edit-mode--show.
Edit Record
Add Record
<div class="repeater required">
<div class="label-holder">
<label for="">
<span class="text">Multi Input Form</span>
<span class="required-holder">
<i class="fa fa-holder-dynamic"></i>
</span>
</label>
</div>
<div class="render">
<div class="render-actions">
<a href="" class="edit">
<i class="fa fa-holder"></i>
<span class="text">edit</span>
</a>
<a href="" class="delete">
<i class="fa fa-holder"></i>
<span class="text">delete</span>
</a>
</div>
<ul class="render-holder">
<li class="italic starred">
<i class="fa fa-holder"></i>
</li>
<li class="bold break">Jeff Morris</li>
<li>jmorris@acc.org</li>
<li class="validated">
<i class="fa fa-holder"></i>
</li>
</ul>
<div class="message-holder">
<small class="warning">
<i class="fa fa-holder-dynamic"></i>
This is a dynamic render message.
</small>
</div>
</div>
<div class="question-group">
<div class="required-message">All inputs marked with the * are required to submit and save</div>
<h4 class="edit-mode--show warning">Edit Record</h4>
<h4 class="edit-mode--hide highlighted">Add Record</h4>
<div class="row">
<div class="question required column small-4">
<div class="label-holder">
<label for="">
<span class="text">Question (Required)</span>
<span class="required-holder">
<i class="fa fa-holder-dynamic"></i>
</span>
</label>
</div>
<div class="input-holder">
<div class="input-space column small-6 large-9">
<input type="text" />
</div>
<div class="column small-6 large-3">
<small class="value">Years</small>
</div>
</div>
<div class="message-holder">
<small class="error">
<i class="fa fa-holder"></i>Error message</small>
<small class="warning">
<i class="fa fa-holder"></i>Warning message</small>
<small class="data">
<i class="fa fa-holder"></i>Data message</small>
</div>
<div class="hint">This is some hint text</div>
</div>
<div class="question required column small-4">
<div class="label-holder">
<label for="">
<span class="text">Question (Required)</span>
<span class="required-holder">
<i class="fa fa-holder-dynamic"></i>
</span>
</label>
</div>
<div class="input-holder">
<div class="input-space column small-6 large-9">
<input type="text" />
</div>
<div class="column small-6 large-3">
<small class="value">Years</small>
</div>
</div>
<div class="message-holder">
<small class="error">
<i class="fa fa-holder"></i>Error message</small>
<small class="warning">
<i class="fa fa-holder"></i>Warning message</small>
<small class="data">
<i class="fa fa-holder"></i>Data message</small>
</div>
<div class="hint">This is some hint text</div>
</div>
<div class="question required column small-4">
<div class="label-holder">
<label for="">
<span class="text">Question (Required)</span>
<span class="required-holder">
<i class="fa fa-holder-dynamic"></i>
</span>
</label>
</div>
<div class="input-holder">
<div class="input-space column small-6 large-9">
<input type="text" />
</div>
<div class="column small-6 large-3">
<small class="value">Years</small>
</div>
</div>
<div class="message-holder">
<small class="error">
<i class="fa fa-holder"></i>Error message</small>
<small class="warning">
<i class="fa fa-holder"></i>Warning message</small>
<small class="data">
<i class="fa fa-holder"></i>Data message</small>
</div>
<div class="hint">This is some hint text</div>
</div>
</div>
<div class="message-holder">
<small class="warning">
<i class="fa fa-holder"></i>
This is a dynmic message for the question group.
</small>
</div>
</div>
<div class="repeater-action">
<a href="" class="clear">
<i class="fa fa-holder"></i>
<span class="text">clear</span>
</a>
<a href="" class="save">
<i class="fa fa-holder"></i>
<span class="text">save</span>
</a>
</div>
</div>
<div class="repeater required edit-mode">
<div class="label-holder">
<label for="">
<span class="text">Multi Input Form (Edit)</span>
<span class="required-holder">
<i class="fa fa-holder-dynamic"></i>
</span>
</label>
</div>
<div class="render">
<div class="render-actions">
<a href="" class="edit">
<i class="fa fa-holder"></i>
<span class="text">edit</span>
</a>
<a href="" class="delete">
<i class="fa fa-holder"></i>
<span class="text">delete</span>
</a>
</div>
<ul class="render-holder">
<li class="italic starred">
<i class="fa fa-holder"></i>
</li>
<li class="bold break">Jeff Morris</li>
<li>jmorris@acc.org</li>
<li class="validated">
<i class="fa fa-holder"></i>
</li>
</ul>
<div class="message-holder">
<small class="warning">
<i class="fa fa-holder-dynamic"></i>
This is a dynamic render message.
</small>
</div>
</div>
<div class="question-group">
<div class="required-message">All inputs marked with the * are required to submit and save</div>
<h4 class="edit-mode--show warning">Edit Record</h4>
<h4 class="edit-mode--hide highlighted">Add Record</h4>
<div class="row">
<div class="question required column small-4 outline">
<span class="notation">Question Block</span>
</div>
<div class="question required column small-5 outline">
<span class="notation">Question Block</span>
</div>
<div class="question required column small-3 outline">
<span class="notation">Question Block</span>
</div>
</div>
<div class="message-holder">
<small class="warning">
<i class="fa fa-holder"></i>
This is a dynmic message for the question group.
</small>
</div>
</div>
<div class="repeater-action">
<a href="" class="clear">
<i class="fa fa-holder"></i>
<span class="text">clear</span>
</a>
<a href="" class="save">
<i class="fa fa-holder"></i>
<span class="text">save</span>
</a>
</div>
</div>
Special Inputs
Questions - File Upload
.file-upload- File uploads are a modified from the standard input-spacer to allow for correct labels to show up when the file is attached.
<div class="button file-upload">
<i class="fa fa-upload"></i>
<span class="text">Upload</span>
<input type="file" class="upload" data-bind="file: { data: document, name: documentname, allowed: allowedTypes }">
</div>
Grids & Layouts
Split Layout With Off Canvas Reveal
.mobile-offcanvas-wrapper- This is a structural container that has the ablity to change from content and sidebar to just content and the sidebar being off canvas. Trigger the off canvas reveal by adding
.navOnto the div.split-layout. Change the switch point by adding
.large,
.medium, or
.small.
!!! must include _layout-split.scss !!!
!!! requires javascripts !!!
Content
Some extra content in the content area
It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
Content
Some extra content in the content area
It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
<div class="mobile-offcanvas-wrapper">
<section class="split-layout medium navOn">
<aside class="split-sidebar">
<h2>Sidebar with NavOn</h2>
<p>This Content will stay visable as the screen gets smaller</p>
</aside>
<article class="split-content">
<div class="page-wrapper">
<div class="content-padding">
<h1>Content</h1>
<p>Some extra content in the content area</p>
<p>It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,
a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur,
from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable
source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
of Good and Evil) by Cicero, written in 45 BC.</p>
</div>
</div>
</article>
</section>
</div>
<div class="mobile-offcanvas-wrapper">
<section class="split-layout large navOff">
<aside class="split-sidebar">
<h2>Sidebar navOff</h2>
<p>When the view port shrinks past Large this will hide</p>
</aside>
<article class="split-content">
<div class="page-wrapper">
<div class="content-padding">
<h1>Content</h1>
<p>Some extra content in the content area</p>
<p>It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,
a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur,
from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable
source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
of Good and Evil) by Cicero, written in 45 BC.</p>
</div>
</div>
</article>
</section>
</div>
Split Layout
.mobile-offcanvas-wrapper- This is a structural container for content and sidebar. Change the switch point where the side bar disapears by adding
.large,
.medium, or
.small.
Outside of the Group Section I need to be wrapped by a div.content-padding to line up
Inside of a "Card" on "Colored Paper"
Some extra content in the content area
It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
<div class="mobile-offcanvas-wrapper">
<section class="split-layout medium navOn">
<aside class="split-sidebar">
<h2>Sidebar</h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
</aside>
<article class="split-content page with-group-sections">
<div class="page-wrapper">
<div class="content-padding">
<h1>Outside of the Group Section
<span class="sub-line">I need to be wrapped by a div.content-padding to line up</span>
</h1>
</div>
<div class="card">
<div class="colored-paper">
<h3>Inside of a "Card" on "Colored Paper"</h3>
<p>Some extra content in the content area</p>
</div>
<p>It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,
a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur,
from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable
source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
of Good and Evil) by Cicero, written in 45 BC.</p>
</div>
</div>
</article>
</section>
</div>
Mobile Header
.header.pagel- there is a basic layout of short tabbed header of apps
<div class="row">
<header class="header page">
<a href="#!/content/calculator/" class="logo">
<img src="assets/img/headerlogo.svg" alt="ACC Statin Intolerance Guidelines">
</a>
<ul class="nav tabs tabs-primary">
<li class="icon">
<a class="home">
<i class="fa fa-holder"></i>
</a>
</li>
<li id="calculator-Tab" class="selected">
<a href="#!/content/calculator/" class="condensable small">Eval
<span class="condense">uate</span>
</a>
</li>
<li id="recommendation-Tab" class="">
<a href="#!/content/recommendation/prescribinginfo/" class="condensable small">Recommend
<span class="condense">ation</span>
</a>
</li>
</ul>
</header>
</div>
Score Bars (.data-display)
.data-display Scorebars are following bars that give automatic feed back to changes on the calculators.
!! Requires Javascript to Function !!
Paper Layers & Grouping
Paper Cards
.page.paper-page .page-wrapper.content-padding .card- by default pages are white but when the need arises to have grouped section 'cards' are introduced and the background area becomes a layer of soft off white construction paper. If the need arises to highlight a collection of cards add
.highlightedto the
.page.with-group-sectionsand the product color will bleed into the construction paper.
Hello
This is content that is showing up in a section group
.Page.Paper-Page.Error
.Page.Paper-Page.Highlighted
<div class="page paper-page">
<div class="page-wrapper content-padding">
<section class="section group-section">
<h1>Hello</h1>
<p>This is content that is showing up in a section group</p>
</section>
</div>
</div>
<div class="page paper-page error">
<div class="page-wrapper content-padding">
<section class="section card">
<h1>.Page.Paper-Page.Error</h1>
</section>
</div>
</div>
<div class="page paper-page highlighted">
<div class="page-wrapper content-padding">
<section class="section card">
<h1>.Page.Paper-Page.Highlighted</h1>
</section>
</div>
<div class="page-wrapper content-padding">
<section class="section card ghost">
<h1>.Page.Paper-Page .Card.Ghost</h1>
</section>
</div>
</div>
Ghost Cards
card.ghost- Ghosted cards are used as holder for an upcoming or locked section. When you want to show a section that will become editable or expanded but don't want it to pop in ghost is a good design pattern to use.
Hello I am a ghost
you can see I am transparent and I do not float like other cards.
.Page.Paper-Page.Error .Card.Ghost
<div class="page paper-page">
<div class="page-wrapper content-padding">
<section class="section card">
<h1>Hello I am a ghost</h1>
<p>This is content that is showing up in a section group</p>
</section>
</div>
</div>
<div class="page paper-page error">
<div class="page-wrapper content-padding">
<section class="section card ghost">
<div class="error colored-paper">Colored Paper is Effected by Ghosting</div>
<h1>.Page.Paper-Page.Error .Card.Ghost</h1>
</section>
</div>
</div>
Tabs on Paper Pages
.page.paper-page > .overlap >.tabs- Tabs placed outside of cards are used to change all cards under the tabs. This pattern is used for sub page toggling.
Hello
This is content that is showing up in a section group
<div class="page paper-page">
<nav class="overlap">
<ul class="tabs">
<li class="icon">
<a class="home">
<i class="fa fa-holder"></i>
</a>
</li>
<li class="">
<a>Tab 2</a>
</li>
<li class="selected">
<a>Tab 3</a>
</li>
<li class="">
<a>Tab 4</a>
</li>
</ul>
</nav>
<div class="page-wrapper">
<section class="section group-section radius">
<h1>Hello</h1>
<p>This is content that is showing up in a section group</p>
</section>
</div>
</div>
Tabs on Paper Pages with States
.page.paper-page > .overlap >.tabs- Tabs placed outside of cards are used to change all cards under the tabs. This pattern is used for sub page toggling.
Hello
This is content that is showing up in a section group
Hello
This is content that is showing up in a section group
<div class="page paper-page warning">
<nav class="overlap">
<ul class="tabs">
<li class="icon">
<a class="home">
<i class="fa fa-holder"></i>
</a>
</li>
<li class="">
<a>Tab 2</a>
</li>
<li class="selected">
<a>Tab 3</a>
</li>
<li class="">
<a>Tab 4</a>
</li>
</ul>
</nav>
<div class="page-wrapper content-padding">
<section class="section group-section radius">
<h1>Hello</h1>
<p>This is content that is showing up in a section group</p>
</section>
</div>
</div>
<div class="page paper-page error">
<nav class="overlap">
<ul class="tabs">
<li class="icon">
<a class="home">
<i class="fa fa-holder"></i>
</a>
</li>
<li class="">
<a>Tab 2</a>
</li>
<li class="selected">
<a>Tab 3</a>
</li>
<li class="">
<a>Tab 4</a>
</li>
</ul>
</nav>
<div class="page-wrapper content-padding">
<section class="section group-section radius">
<h1>Hello</h1>
<p>This is content that is showing up in a section group</p>
</section>
</div>
</div>
Tabs for Paper Cards
.page.paper-page .card .colored-paper .nav.tabs- Special tabs holders are introduced to the cards so they can fill the full frame of the card.
.color-paperis a container that wraps Tabs.This pattern should be used to toggle content on a single card or area of a card.
Hello
This is content that is showing up in a section group
I am Sub Tab Content
This is content under a secondary tab in a card
<div class="page paper-page">
<div class="page-wrapper content-padding">
<section class="section card">
<div class="colored-paper">
<nav>
<ul class="nav tabs">
<li class="">
<a>Tab 1</a>
</li>
<li class=" selected ">
<a>Tab 2</a>
</li>
<li class="">
<a>Tab 3</a>
</li>
</ul>
</nav>
</div>
<h1>Hello</h1>
<p>This is content that is showing up in a section group</p>
<div class="colored-paper info">
<nav>
<ul class="nav tabs">
<li class="">
<a>Tab 1</a>
</li>
<li class=" selected ">
<a>Tab 2</a>
</li>
<li class="">
<a>Tab 3</a>
</li>
</ul>
</nav>
</div>
<h2>I am Sub Tab Content</h2>
<p>This is content under a secondary tab in a card</p>
</section>
</div>
</div>
Content in Colored paper
.page.paper-page .card .color-paper *- Content can be written into colored paper but it is limited to basic contnet like headers and paragraph tags.
I am Content inside of a colored paper
This is a "p" tag inside of colored paper
<div class="page paper-page">
<div class="page-wrapper">
<section class="section card">
<div class="colored-paper">
<h2>I am Content inside of a colored paper</h2>
<p>This is a "p" tag inside of colored paper</p>
</div>
</section>
</div>
</div>
Content in Colored paper
.color-paper.[state]- Colored paper can be colored with states to change it from its base color which is the product color.
Warning State
Info State
Error State
<div class="page paper-page">
<div class="page-wrapper">
<div class="row">
<div class="medium-4 columns">
<div class="card">
<div class="colored-paper warning">
<h3 class="text-center">Warning State</h3>
</div>
</div>
</div>
<div class="medium-4 columns">
<div class="card">
<div class="colored-paper info">
<h3 class="text-center">Info State</h3>
</div>
</div>
</div>
<div class="medium-4 columns">
<div class="card">
<div class="colored-paper error">
<h3 class="text-center">Error State</h3>
</div>
</div>
</div>
</div>
</div>
</div>
Paper Card Rounded Corners
.card.radius- Using the Utility Class of radius you can round the corners of cards. Just add "radius" "radius-top" "radius-bottom"
radius-top
colored paper also gets the rounded corners set by the card
radius
radius-bottom
colored paper
<div class="page with-group-sections">
<div class="page-wrapper">
<div class="row">
<div class="medium-4 columns">
<div class="card radius-top">
<div class="colored-paper">
<h3 class="text-center">radius-top</h3>
</div>
<p>colored paper also gets the rounded corners set by the card</p>
</div>
</div>
<div class="medium-4 columns">
<div class="card radius">
<h3 class="text-center">radius</h3>
</div>
</div>
<div class="medium-4 columns">
<div class="card radius-bottom">
<h3 class="text-center">radius-bottom</h3>
<div class="colored-paper">
<h3 class="text-center">colored paper</h3>
</div>
</div>
</div>
</div>
</div>
</div>
Space Savers Modals, Reveals, Accodians, and Collapses
There is always a need to either hide content, reveal content or focus our users on content below are some of the containers that can help shape a non overwhelming user experiance.
Modals( Foundation Reveal)
.reveal-modal- Popup, modal, reveal - a design pattern to show a hidden a part of content when you want the user to focus on a single task.
Awesome. I Have It.
Your couch. It is mine.
I'm a cool paragraph that lives inside of an even cooler modal. Wins!
<p>
<a class="button" data-open="exampleModal1">Click me for a modal</a>
</p>
<div class="reveal" id="exampleModal1" data-reveal>
<h1>Awesome. I Have It.</h1>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
Collapsable Panels
.collapsable-panel- a container element which naturaly is hiden and reveals when it is prompted. This element is great for
read morelinks when the content is small.
!! Requires Javascript to Function !!
H2 in a collapse panel
All basic html content can be placed in the panel
H2 in an inset collapse panel
All basic html content can be placed in the panel
<div class="row">
<div class="column small-12 medium-6">
<div class="collapsable-panel" style="display: block;">
<div class="bar close">
<a class="action-btn close" data-bind="click:panelHide">
<i class="fa fa-holder"></i>
<span class="text">close</span>
</a>
</div>
<div class="content">
<div class="row">
<div class="column small-12">
<h2>H2 in a collapse panel</h2>
<p>All basic html content can be placed in the panel</p>
</div>
</div>
</div>
<div class="bar jumpToTop">
<a class="action-btn top" data-bind="click:panelScrollTop">
<i class="fa fa-holder"></i>
<span class="text">top</span>
</a>
</div>
</div>
</div>
<div class="column small-12 medium-6">
<div class="collapsable-panel inset" style="display: block;">
<div class="bar close">
<a class="action-btn close" data-bind="click:panelHide">
<i class="fa fa-holder"></i>
<span class="text">close</span>
</a>
</div>
<div class="content">
<div class="row">
<div class="column small-12">
<h2>H2 in an inset collapse panel</h2>
<p>All basic html content can be placed in the panel</p>
</div>
</div>
</div>
<div class="bar jumpToTop">
<a class="action-btn top" data-bind="click:panelScrollTop">
<i class="fa fa-holder"></i>
<span class="text">top</span>
</a>
</div>
</div>
</div>
</div>
Collapsable Panel (State)
.collapsable-panel- Collapse panels can be used with states and the panels subtly color with the state colors.
!! Requires Javascript to Function !!
H2 in Panel
All basic html content can be placed in the panel
H2 in Inset Panel
All basic html content can be placed in the panel
<div class="row">
<div class="column small-12 medium-6">
<div class="collapsable-panel warning" style="display: block;">
<div class="bar close">
<a class="action-btn close" data-bind="click:panelHide">
<i class="fa fa-holder"></i>
<span class="text">close</span>
</a>
</div>
<div class="content">
<div class="row">
<div class="column small-12">
<h2>H2 in Panel</h2>
<p>All basic html content can be placed in the panel</p>
</div>
</div>
</div>
<div class="bar jumpToTop">
<a class="action-btn top" data-bind="click:panelScrollTop">
<i class="fa fa-holder"></i>
<span class="text">top</span>
</a>
</div>
</div>
</div>
<div class="column small-12 medium-6">
<div class="collapsable-panel error inset" style="display: block;">
<div class="bar close">
<a class="action-btn close" data-bind="click:panelHide">
<i class="fa fa-holder"></i>
<span class="text">close</span>
</a>
</div>
<div class="content">
<div class="row">
<div class="column small-12">
<h2>H2 in Inset Panel</h2>
<p>All basic html content can be placed in the panel</p>
</div>
</div>
</div>
<div class="bar jumpToTop">
<a class="action-btn top" data-bind="click:panelScrollTop">
<i class="fa fa-holder"></i>
<span class="text">top</span>
</a>
</div>
</div>
</div>
</div>
Accordion (requires Collapsable Panel SCSS)
.accordion- Accordions are built from a group of
Collapsable Panelsand are never full hidden like the collapsable panel. By default only one
panelof the accordian can be open at a time.
!! Requires Javascript to Function !!
Header and Toggle Area (Open)
Content
Header and Toggle Area (Closed)
<div class="accordion">
<div class="selected">
<h2 class="toggle" data-bind="click:panelShow">
<i class="fa fa-holder"></i>
<span class="text">Header and Toggle Area (Open)</span>
</h2>
<div class="collapsable-panel ">
<div class="bar close">
<a class="action-btn close" data-bind="click:panelHide">
<i class="fa fa-holder"></i>close</a>
</div>
<div class="content">
<div class="row">
<div class="column small-12">
<p>Content</p>
</div>
</div>
</div>
<div class="bar jumpToTop">
<a class="action-btn top" data-bind="click:panelScrollTop">
<i class="fa fa-holder"></i>top</a>
</div>
</div>
</div>
<div class="">
<h2 class="toggle" data-bind="click:panelShow">
<i class="fa fa-holder"></i>
<span class="text">Header and Toggle Area (Closed)</span>
</h2>
</div>
</div>
HELPER - Condensable (Condense)
.condensable.large .condense- This pattern allows for responsive reduction of content. Content tagged with
.condensewill turn to display:none when it passes the below the break point. On the container element add '.condensable' and set the break point where you want it by adding the class
.small,
.medium, or
.large. !! Single word reduction requires adding
condensable-wordsee example below.
Condensable Sub-line The full word is only seen on large screens.It only says Super below on smaller screens Super califragilisticexpialidocious
<h2>
Condensable Sub-line
<span class="sub-line condensable large">
<span class="condense">The full word is only seen on large screens.</span>It only says Super below on smaller screens</span>
<span class="sub-line condensable condensable-word large">Super
<span class="condense">califragilisticexpialidocious</span>
</span>
</h2>
HELPER - Swappable (short-text long-text)
.swappable- This pattern allows for responsive swapping of content from
.short-textand
.long-text. On the container element add
.swappableand set the break point where you want it to switch by adding the class
.small,
.medium, or
.large. The elements with the .short-text and .long-text must be inline elements.
Swappable Sub-line Short Title Long TItle Seen on Medium Screens and Up
<h2 class="swappable medium">
Swappable Sub-line
<span class="sub-line">
<span class="short-text">Short Title</span>
<span class="long-text">Long TItle Seen on Medium Screens and Up</span>
</span>
</h2>
Callouts and Messaging
There are a lot of ways the UI can communicate with the user. Most of the time pure use of typography and higharcy is all that is needed. But in times when you need to bring the attention to a specific peice of content a call out is used. There are two levels of callouts. One is at the page or system level and the second is at the card or section level.
Code and Usage
Callout
.callout- a small part of content that is called out on the page. This type of treatment is great for asides, extra info or alerts.
This call out is used for showing content on the page that should not be missed.
<div class="callout">
<h5>This call out is used for showing content on the page that should not be missed.</h5>
</div>
Callout [States]
.callouts + .warning- Callouts are built to be effected by states so they can reflect there message as Info, Warning, Error for example.
I am a call out that shows a warning about something in this section.
<div class="callout warning">
<h5>I am a call out that shows a warning about something in this section.</h5>
</div>
Callout - Page Messages
.page-message- added to
.calloutto make a top level message for an app. These
.page-messageare designed be be outside of cards and show up in the background area.
<div class="page-message callout">
<a class="close-bar">
<span class="close-button">
<i class="fa fa-times" aria-hidden="true"></i>
</span>
</a>
<div class="message-container">
<div class="icon-holder">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-holder-dynamic fa-stack-1x"></i>
</span>
</div>
<div class="message-holder">
<h5>This app is for nonvalvular atrial fibrillation patients only, and should not be used to guide therapy in patients
with mechanical or bioprosthetic valves.</h5>
</div>
</div>
</div>
Callout - Page Messages [States]
.page-message + .warning- page messages are designed to work with states with the backgrounds, close bar and icon all changing to reflect the state add at the root level of the
.page-message
<div class="page-message callout warning">
<a class="close-bar">
<span class="close-button">
<i class="fa fa-times" aria-hidden="true"></i>
</span>
</a>
<div class="message-container">
<div class="icon-holder">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-holder-dynamic fa-stack-1x"></i>
</span>
</div>
<div class="message-holder">
<h5>This app is for nonvalvular atrial fibrillation patients only, and should not be used to guide therapy in patients
with mechanical or bioprosthetic valves.</h5>
</div>
</div>
</div>