A new version of the framework is here!
The ACC works hard to keep up to date, and we are proud to announce a new version has been released encompassing new elements and lighter code foot print
Go to Current Frame Work.The ACC's App Framework Version 1
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.
- Reduce product suit updates, and single app maintenance.
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
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 5 Documentation
Alert Boxes
Breadcrumbs
Buttons
switches
Grid
<h4 id="alert-boxes">Alert Boxes</h4>
<div data-alert="" class="alert-box radius">This is a standard alert (div.alert-box.radius).
<a href="" class="close">x</a>
</div>
<div data-alert="" class="alert-box success">This is a success alert (div.alert-box.success).
<a href="" class="close">x</a>
</div>
<div data-alert="" class="alert-box alert round">This is an alert (div.alert-box.alert.round).
<a href="" class="close">x</a>
</div>
<div data-alert="" class="alert-box secondary">This is a secondary alert (div.alert-box.secondary).
<a href="" class="close">x</a>
</div>
<hr>
<h4 id="breadcrumbs">Breadcrumbs</h4>
<ul class="breadcrumbs">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li class="unavailable">
<a href="#">Gene Splicing</a>
</li>
<li class="current">
<a href="#">Cloning</a>
</li>
</ul>
<h4 id="buttons">Buttons</h4>
<div class="row">
<div class="small-6 large-6 columns">
<a href="#" class="tiny button">.tiny.button</a>
<br>
<a href="#" class="small button">.small.button</a>
<br>
<a href="#" class="button">.button</a>
<br>
<a href="#" class="button expand">.expand</a>
<br>
</div>
<div class="small-6 large-6 columns">
<a href="#" class="tiny button secondary">.tiny.secondary</a>
<br>
<a href="#" class="small button success radius">.small.success.radius</a>
<br>
<a href="#" class="button alert round disabled">.round.disabled</a>
<br>
</div>
</div>
<div class="row">
<h4 id="switches">switches</h4>
<div class="small-6 column">
<div class="switch tiny">
<input id="a" name="switch-a" type="radio" checked="">
<label for="a" onclick="">Off</label>
<input id="a1" name="switch-a" type="radio">
<label for="a1" onclick="">On</label>
<span class="inline label">Power</span>
</div>
</div>
<div class="small-6 column">
<div class="switch tiny">
<span class="inline label">off</span>
<input id="c1" name="switch-c" type="check">
<label for="c1" onclick="">On</label>
<span class="inline label">on</span>
</div>
</div>
</div>
<br>
<nav class="top-bar" data-topbar="">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>
<a href="#">
Top Bar Title
</a>
</h1>
</li>
<li class="toggle-topbar menu-icon">
<a href="#">
<span>menu</span>
</a>
</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown not-click">
<a href="#">Main Item 1</a>
<ul class="dropdown">
<li class="title back js-generated">
<h5>
<a href="javascript:void(0)">Back</a>
</h5>
</li>
<li class="parent-link hide-for-large-up">
<a class="parent-link js-generated" href="#">Main Item 1</a>
</li>
<li>
<label>Section Name</label>
</li>
<li class="has-dropdown not-click">
<a href="#" class="">Has Dropdown, Level 1</a>
<ul class="dropdown">
<li class="title back js-generated">
<h5>
<a href="javascript:void(0)">Back</a>
</h5>
</li>
<li class="parent-link hide-for-large-up">
<a class="parent-link js-generated" href="#">Has Dropdown, Level 1</a>
</li>
<li>
<a href="#">Dropdown Options</a>
</li>
<li>
<a href="#">Dropdown Options</a>
</li>
<li>
<a href="#">Level 2</a>
</li>
<li>
<a href="#">Subdropdown Option</a>
</li>
<li>
<a href="#">Subdropdown Option</a>
</li>
<li>
<a href="#">Subdropdown Option</a>
</li>
</ul>
</li>
<li>
<a href="#">Dropdown Option</a>
</li>
<li>
<a href="#">Dropdown Option</a>
</li>
<li class="divider"></li>
<li>
<label>Section Name</label>
</li>
<li>
<a href="#">Dropdown Option</a>
</li>
<li>
<a href="#">Dropdown Option</a>
</li>
<li>
<a href="#">Dropdown Option</a>
</li>
<li class="divider"></li>
<li>
<a href="#">See all →</a>
</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown not-click">
<a href="#">Main Item 2</a>
<ul class="dropdown">
<li class="title back js-generated">
<h5>
<a href="javascript:void(0)">Back</a>
</h5>
</li>
<li class="parent-link hide-for-large-up">
<a class="parent-link js-generated" href="#">Main Item 2</a>
</li>
<li>
<a href="#">Dropdown Option</a>
</li>
<li>
<a href="#">Dropdown Option</a>
</li>
<li>
<a href="#">Dropdown Option</a>
</li>
<li class="divider"></li>
<li>
<a href="#">See all →</a>
</li>
</ul>
</li>
</ul>
</section>
</nav>
<br>
<h4>Grid</H4>
<div class="row display">
<div class="small-2 large-4 columns">small 2 | large 4</div>
<div class="small-4 large-4 columns">small 4 | large 4</div>
<div class="small-6 large-4 columns">small 6 | large 4</div>
</div>
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+
| Color Name | Hex Color |
|---|---|
ACC Blue |
#00386b |
Product Color |
#9a1267 |
Primary Color |
#198dae |
Secondary Color |
#b3b3b3 |
Tertiary Color |
#7d5891 |
Success Color |
#1abc9c |
Warning Color |
#E08514 |
Error Color |
#c32231 |
<table class="table">
<thead>
<tr>
<th>Color Name</th>
<th>Hex Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h3>ACC Blue</h3>
</td>
<td style="background-color:#00386b;" class="color-block">#00386b</td>
</tr>
<tr>
<td>
<h3>Product Color</h3>
</td>
<td style="background-color:#9a1267;" class="color-block">#9a1267</td>
</tr>
<tr>
<td>
<h3>Primary Color</h3>
</td>
<td style="background-color:#198dae;" class="color-block">#198dae</td>
</tr>
<tr>
<td>
<h3>Secondary Color</h3>
</td>
<td style="background-color:#b3b3b3;" class="color-block">#b3b3b3</td>
</tr>
<tr>
<td>
<h3>Tertiary Color</h3>
</td>
<td style="background-color:#7d5891;" class="color-block">#7d5891</td>
</tr>
<tr>
<td>
<h3>Success Color</h3>
</td>
<td style="background-color:#1abc9c;" class="color-block">#1abc9c</td>
</tr>
<tr>
<td>
<h3>Warning Color</h3>
</td>
<td style="background-color:#E08514;" class="color-block">#E08514</td>
</tr>
<tr>
<td>
<h3>Error Color</h3>
</td>
<td style="background-color:#c32231;" class="color-block">#c32231</td>
</tr>
</tbody>
</table>
Textures
Textures- Subtle textures are used on the design to give a subtle level of depth.
Textures
Paper Textures
News Print Paper lite
- File Name: billie-holiday-lite.png
- Usage: Soft paper used in the background of groupings and overlaps.
News Print Paper
- File Name: billie-holiday.png
- Usage: Soft paper used in the background of groupings and overlaps.
News Print Paper Dirty
- File Name: billie-holiday-spec.png
- Usage: Alternate soft paper used in the background of groupings and overlaps.
Construction Paper
- File Name: construction-paper.png
- Usage: A colorable texture to drop in color fields when needed.
Construction Paper Lite
- 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
- File Name: empty_diamond@2x
- 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 with Blue Color Bleed
- File Name: empty_stripe-alt@2x.png
- Usage: This texture is used in a alternating column background in table rows that are showing states.
Stripped Ink Tight
- File Name: empty_stripe.png
- Special Usage: List item states.
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
<h2 class="group-divide-bottom font--name small-12">OpenSans
<blockquote>font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;</blockquote>
</h2>
<div class="font row font-display">
<div class="ms12 column medium-4 small-6 large-2 font--dropcase_2x">Os</div>
<div class="column large-10 medium-8 small-6 font--example">
<h3>Display Fonts & Headers</h3>
<div class="font--lowercase ms6">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
<div class="font--uppercase ms6">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
<div class="font--numbers ms6">0 1 2 3 4 5 6 7 8 9</div>
<div class="font--lowercase ms4">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
<div class="font--uppercase ms4">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
<div class="font--numbers ms4">0 1 2 3 4 5 6 7 8 9</div>
</div>
</div>
<h2 class="group-divide-bottom font--name small-12">Roboto Slab
<blockquote>font-family: 'Roboto Slab', 'Times New Roman', 'Lucida Bright', Georgia, serif;</blockquote>
</h2>
<div class="font row font-slab">
<div class="ms12 column medium-4 small-6 large-2 font--dropcase_2x">Rb</div>
<div class="column large-10 medium-8 small-6 font--example">
<h3>Primary Navigation, Headers & Labels</h3>
<div class="font--lowercase ms4">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
<div class="font--uppercase ms4">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
<div class="font--numbers ms4">0 1 2 3 4 5 6 7 8 9</div>
<div class="font--lowercase ms2">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
<div class="font--uppercase ms2">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
<div class="font--numbers ms2">0 1 2 3 4 5 6 7 8 9</div>
</div>
</div>
<h2 class="group-divide-bottom font--name small-12">Open Sans
<blockquote>font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;</blockquote>
</h2>
<div class="font row font">
<div class="ms12 column medium-4 small-6 large-2 font--dropcase_2x">Os</div>
<div class="column large-10 medium-8 small-6 font--example">
<h3>Body Copy, Lists & Tables</h3>
<div class="font--lowercase ms1">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
<div class="font--uppercase ms1">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
<div class="font--numbers ms1">0 1 2 3 4 5 6 7 8 9</div>
<div class="font--lowercase ms">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
<div class="font--uppercase ms">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
<div class="font--numbers ms">0 1 2 3 4 5 6 7 8 9</div>
</div>
</div>
Typography
Headline with Counters
.order-marker.- It is some times useful to add an order-marker to the beginning of headlines.
1Header 1 Tag
2Header 2 Tag
aHeader 3 Tag
bHeader 4 Tag
cHeader 5 Tag
<h1 class="with-underline">
<span class="order-marker">1</span>Header 1 Tag</h1>
<h2 class="with-underline">
<span class="order-marker">2</span>Header 2 Tag</h2>
<h3 class="with-underline">
<span class="order-marker">a</span>Header 3 Tag</h3>
<h4 class="with-underline">
<span class="order-marker">b</span>Header 4 Tag</h4>
<h5 class="with-underline">
<span class="order-marker">c</span>Header 5 Tag</h5>
Typography States
.error, .warning, .etc...- headers and
ptags can be fully manipulated to respond to states by adding the modifiying state like error, warning, info, highlighted, validated, and completed.
Header 1 Tag Info State
Header 2 Tag Error State
Header 3 Tag Warning State
Header 4 Tag
Validated/success State
Header 5 Tag Highlighted State
Paragraph that is a highlighted State.Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
<h1 class="with-underline info">Header 1 Tag
<small>Info State</small>
</h1>
<h2 class="with-underline error">Header 2 Tag
<small>Error State</small>
</h2>
<h3 class="with-underline warning">Header 3 Tag
<small>Warning State</small>
</h3>
<h4 class="with-underline validated">Header 4 Tag
<blockquote>Validated/success State</blockquote>
</h4>
<h5 class="with-underline highlighted">Header 5 Tag
<small>Highlighted State</small>
</h5>
<p class="highlighted">
<strong>Paragraph that is a highlighted State.</strong>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam
mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
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 (Stripped)
.stripped- Table with the class
.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 2 cell A | row 2 cell B | row 2 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>
<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>
Table States Cells
td.state-name- quickly color table cells.
| Text | Warning | ||
| Text | Info | ||
| Error | Text | ||
| Validated | 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="">
<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="validated icon">
<i class="fa fa-holder"></i>
</td>
<td class="info icon">
<i class="fa fa-holder"></i>
</td>
<td class="validated">Validated</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 validated Row | Icon is Dynamic | ||
| Cell Data in Warning Row | I am an error cell | ||
| Cell Data in Warning Row | data |
<table class="table stripped">
<tr class="validated">
<td class="icon">
<i class="fa fa-holder-dynamic"></i>
</td>
<td class=""></td>
<td class="">Cell Data in validated 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="warning">
<td class="icon">
<i class="fa fa-holder-dynamic"></i>
</td>
<td class=""></td>
<td class="">Cell Data in Warning Row</td>
<td>data</td>
</tr>
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 - Inline
.question-inline- questions when there is a need can be made to be inline so the text box will follow the label. These questions will revert to the base question style when on smaller phones. Modify any
.questionwith the added class of
.question-inline
<div class="question question-inline">
<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 post-fix">
Years
</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 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 use grid sizers to align the label and input right and left.
<div class="question-grid-based required">
<div class="label-holder small-5">
<label for="">
<span class="text">Question Dropdown Title (Required)
<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 small-7">
<div class="input-space column small-6 large-9">
<input type="text" />
</div>
<div class="column value small-6 large-3">
Years
</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>
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 foundation equzlizer will remove the sidebar collapse !!!
Outside of the Group Section
I need to be wrapped by a div.content-padding to line up
Inside of a Group Section
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
<blockquote>I need to be wrapped by a div.content-padding to line up</blockquote>
</h1>
</div>
<div class="group-section">
<h3>Inside of a Group Section</h3>
<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>
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 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>
Paper Layers & Grouping
Paper Card Grouping
.page.with-group-sections .page-wrapper .group-section-holder- 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
Hello
This is content that is showing up in a section group
<div class="page with-group-sections">
<div class="page-wrapper">
<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 with-group-sections highlighted">
<div class="page-wrapper">
<section class="section group-section">
<h1>Hello</h1>
<p>This is content that is showing up in a section group</section>
</div>
</div>
Tabs Outside Grouping
page.with-group-sections > .overlap.tabs- Tabs placed outside of the groups should use the overlap so they sink into the paper texture.
Hello
This is content that is showing up in a section group
<div class="page with-group-sections">
<div class="page-wrapper">
<ul class="nav tabs overlap">
<li class="icon ">
<a class="home">
<i class="fa fa-holder"></i>
</a>
</li>
<li class="">
<a>Tab 2</li>
<li class=" selected ">
<a>Tab 3</a>
</li>
<li class="">
<a>Tab 4</a>
</li>
</ul>
<section class="section group-section">
<h1>Hello</h1>
<p>This is content that is showing up in a section group</p>
</section>
</div>
</div>
Tabs for Paper Cards
.group-section-tab-holder- Special tabs holders are introduced to the cards so they can fill the full frame of the card. The tab holder has a modification of adding the
secondaryclass to convert it to using the secondary color if the need arises.
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 with-group-sections">
<div class="page-wrapper">
<section class="section group-section">
<div class="group-section-tab-holder">
<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>
</div>
<h1>Hello</h1>
<p>This is content that is showing up in a section group</p>
<div class="group-section-tab-holder secondary">
<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>
</div>
<h2>I am Sub Tab Content</h2>
<p>This is content under a secondary tab in a card</p>
</section>
</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 part of content when you want the user to focus on the single task.
<a href="#" class="button" data-reveal-id="myModal">Click Me For A Modal</a>
<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle" class="with-underline">Awesome. I have it.</h2>
<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>
<a class="close-reveal-modal" aria-label="Close">
<i class="fa fa-holder"></i>
</a>
</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>