The ACC's App Framework Version 3.1 Code Name: Bristol & Ink
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 & Ink is UI & Design Standard for web based mobile apps at the American College of Cardiology. 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 IT, Marketing & Branding, and Digital Stradegy.
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 for subtle 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.
Developement Backlog:
Version 3.1
Circle Nav Update
- DOM change to allow for more then one right and left button in the section
- Update of .page spacing to be cleaner.
- small style tweaks to remove spacing issues for the icons and disabled circle button
Version 3.0
Depreciated page decorators
- .with-group-section is depreciated to .paper-page to more correctly describe the class decorator
- .group-section is depreciated to .card to more correctly describe the class decorator
- .header.page is now .header-mobile and .header-page to allow for differences between mobile and desktop header designs.
- .footer.page is now .footer-mobile and .footer-page to allow for differences between mobile and desktop footer designs.
Refactoring and DOM Changes
- `.section-nav .circle` has been reworked.
- Removal of the `.forward` and `.backward`
- Added section placement with `.top` and `bottom`
- `.circle.button` now can take any button modifier like `.alert` and `navigation`
Improvements of Typography and Design
- Changing the base font from Open Sans to Muli for a cleaner more open font.
- Font Sizing and Vertical Spacing modified to be on a 24px baseline from a 21px baseline
- Reduction of Gutter Spacing when on smaller form factors
- All textures are reworked to remove the need for color manipulations. When adding colors to the textures they now accept full strength colors and the images reduce the colors to the proper levels.
Vendor Upgrades
- Now Using Foundation 6!
- Now Using Font Awesome 4.7!
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.6.4.3
Base Framework
zurb foundation
- This style is base off of a reduced build of zurb foundation all of the grid, columns, base typography, and form elements can be used from zurb. All functions can be turned back on but to reduce build size many of the design features have been disabled.
<a class="button" href="http://foundation.zurb.com/docs" class="">Go to Zurb Foundation Documentation</a>
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 |
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
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
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
Striped Ink
- File Name: empty_stripe@2x.png
- Usage: Page responses, error messages, and warning messages
Striped Ink Alt Grey
- File Name: empty_stripe_grey@2x.png
- Usage: Alternate versions of responses callouts and errors.
Striped Ink Alt Blue
- File Name: empty_stripe_blue@2x.png
- Usage: Alternate versions of responses callouts and errors.
Striped 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
Muli & Roboto Slab
- Muli is the base text 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.
Muli font-family: 'Muli', '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
Font Classes
font-xxx
- These classes allow for quick overrides to the font that is being displayed. This is helpful when dealing with formated content areas that are non-basic like contact ares, addresses, question and answer where display control is not driven by the semantic html usage. This control at a DOM level reduces the need to write new styles.
.font-bold .font-slab-bold .font-slab .font-medium .font .font-light .font-display
<h1>
<span class="font-bold">.font-bold</spam>
<span class="font-slab-bold">.font-slab-bold</spam>
<span class="font-slab">.font-slab</spam>
<span class="font-medium">.font-medium</spam>
<span class="font">.font</spam>
<span class="font-light">.font-light</spam>
<span class="font-display">.font-display</spam>
</h1>
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
.hollow
or
.inverse
depending 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>
Font Classes
font-xxx
- These classes allow for quick overrides to the font that is being displayed. This is helpful when dealing with formated content areas that are non-basic like contact ares, addresses, question and answer where display control is not driven by the semantic html usage. This control at a DOM level reduces the need to write new styles.
.font-bold .font-slab-bold .font-slab .font-medium .font .font-light .font-display
<h1>
<span class="font-bold">.font-bold</spam>
<span class="font-slab-bold">.font-slab-bold</spam>
<span class="font-slab">.font-slab</spam>
<span class="font-medium">.font-medium</spam>
<span class="font">.font</spam>
<span class="font-light">.font-light</spam>
<span class="font-display">.font-display</spam>
</h1>
Navigation: Tabs & Nav Lists
Tabs
Tabs (Basic)
.tabs
- Group of nav that is build for a horizontal space.
( !! WARNING !! Updated HTML and Styles From Ver 1)
<nav class="nav">
<ul class=" tabs">
<li class="tabs-title icon">
<a class="home">
<i class="fa fa-holder"></i>
</a>
</li>
<li class="tabs-title">
<a>Tab 2</a>
</li>
<li class="tabs-title is-active">
<a>Tab 3</a>
</li>
<li class="tabs-title">
<a>Tab 4</a>
</li>
</ul>
</nav>
Tabs (modifications)
.tabs+[modification]
- Tabs can be modified with
.secondary
,
.disabled
,
.visited
,
.locked
<nav class="nav">
<ul class="tabs">
<li class="tabs-title visited locked">
<a class="home">visited locked</a>
</li>
<li class="tabs-title visited locked">
<a>visited locked</a>
</li>
<li class="tabs-title selected">
<a>Selected</a>
</li>
<li class="tabs-title secondary">
<a>Secondary</a>
</li>
<li class="tabs-title disabled">
<a>Disabled</a>
</li>
</ul>
</nav>
Tabs Overlap
.tabs.overlap
- Overlap gives shallow space to give a small layer effect
<nav class="overlap nav">
<ul class="tabs ">
<li class="tab-title icon">
<a class="home">
<i class="fa fa-holder"></i>
</a>
</li>
<li class="tab-title ">
<a>Tab 2</a>
</li>
<li class="tab-title is-active">
<a>Tab 3</a>
</li>
<li class="tab-title ">
<a>Tab 4</a>
</li>
</ul>
</nav>
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 Primary
.tabs.tabs-primary
- Priamary is used for top level nav for mobile porjects.
( !! WARNING !! Updated HTML and Styles From Ver 1)
<ul class="nav tabs tabs-primary">
<li class="icon tabs-title ">
<a class="home" href="#">
<i class="fa fa-holder"></i>
</a>
</li>
<li class=" tabs-title">
<a href="#">Tab 2</a>
</li>
<li class="selected tabs-title ">
<a href="#">Tab 3</a>
</li>
<li class=" tabs-title">
<a href="#">Tab 4</a>
</li>
<li class=" tabs-title">
<a href="#">Tab 5</a>
</li>
<li class="disabled tabs-title">
<a href="#">Tab 6</a>
</li>
</ul>
<ul class="nav tabs tabs-primary reverse">
<li class="icon tabs-title">
<a class="home" href="#">
<i class="fa fa-holder"></i>
</a>
</li>
<li class=" tabs-title">
<a href="#">Tab 2</a>
</li>
<li class="selected tabs-title">
<a href="#">Tab 3</a>
</li>
<li class=" tabs-title">
<a href="#">Tab 4</a>
</li>
<li class=" tabs-title">
<a href="#">Tab 5</a>
</li>
<li class="disabled tabs-title">
<a href="#">Tab 6</a>
</li>
</ul>
Nav Lists
Nav List (Checklist)
.nav-checklist
- add class to the nav to change the .nav-list from forward links to a list with states of
.selected
,
.success
,
.warning
,
.error
<nav class="nav-list nav-checklist">
<ul>
<li class="">
<a>
<span class="text">Nav List Item 1(blank)</span>
<i class="fa fa-holder-dynamic"></i>
</a>
<li class="selected">
<a>
<span class="text">Nav List Item 2(selected)</span>
<i class="fa fa-holder-dynamic"></i>
</a>
</li>
<li class="sucess">
<a>
<span class="text">Nav List Item 3(sucess)</span>
<i class="fa fa-holder-dynamic"></i>
</a>
</li>
</ul>
</nav>
Nav List (Checklist w/ States)
.nav-checklist.statename
- add class to the nav to change the list item to reflect the state with
.warning
,
.error
,
.highlighted
...
<nav class="nav-list nav-checklist">
<ul>
<li class="">
<a>
<span class="text">Nav List Item 1(blank)</span>
<i class="fa fa-holder-dynamic"></i>
</a>
<li class="selected">
<a>
<span class="text">Nav List Item 2(selected and warning)</span>
<i class="fa fa-holder-dynamic"></i>
</a>
</li>
<li class="highlighted">
<a>
<span class="text">Nav List Item 3(highlighted)</span>
<i class="fa fa-holder-dynamic"></i>
</a>
</li>
<li class="warning">
<a>
<span class="text">Nav List Item 4(warning)</span>
<i class="fa fa-holder-dynamic"></i>
</a>
</li>
<li class="error">
<a>
<span class="text">Nav List Item 5(error)</span>
<i class="fa fa-holder-dynamic"></i>
</a>
</li>
<li class="disabled">
<a>
<span class="text">Nav List Item 5(disabled)</span>
<i class="fa fa-holder-dynamic"></i>
</a>
</li>
</ul>
</nav>
Nav List (With Headlines)
.nav-list ul li
- The nav list changes styles depending on the headline tag in front of the nav-list. or simply add the class
large
,
medium
, or
small
H1 header tag
H3 header tag
<h1>H1 header tag</h1>
<nav class="nav-list">
<ul>
<li>
<a>
<span class="text">Nav List Item 1</span>
<i class="fa fa-holder-dynamic"></i>
</a>
</li>
<li class="selected">
<a>
<span class="text">Nav List Item 2</span>
<i class="fa fa-holder-dynamic"></i>
</a>
</li>
</li>
</ul>
</nav>
<br>
<div>This list has the medium class</div>
<nav class="nav-list medium">
<ul>
<li>
<a>
<span class="text">Nav List Item 1</span>
<i class="fa fa-holder-dynamic"></i>
</a>
</li>
<li class="selected">
<a>
<span class="text">Nav List Item 2</span>
<i class="fa fa-holder-dynamic"></i>
</a>
</li>
</li>
</ul>
</nav>
<br>
<h3>H3 header tag</h3>
<nav class="nav-list">
<ul>
<li>
<a>
<span class="text">Nav List Item 1</span>
<i class="fa fa-holder-dynamic"></i>
</a>
</li>
<li class="selected">
<a>
<span class="text">Nav List Item 2</span>
<i class="fa fa-holder-dynamic"></i>
</a>
</li>
</li>
</ul>
</nav>
Pagination
Pagination
.pagination-holder .pagination
- Pagination is often used when there is a table or page of results or repeated items. The Container defaultly styles the paginator to be at the bottom of the area of repeated content but render it at the top just add the class
.top
to render the pagination upside down. The paginator has a single modifier to condense the screen size by adding the class
.pagination--compact
.
<div class="paper-page page-wrapper">
<div class="content-padding section-padding">
<div class="">
<div class="pagination-holder top">
<ul class="pagination float-right">
<li class="arrow disable left">
<a href="">
<i class="fa fa-caret-left ">
</i>
<span class="text">
prev
</span>
</a>
</li>
<li class="current">
<a href="">
1
</a>
</li>
<li>
<a href="">
2
</a>
</li>
<li>
<a href="">
3
</a>
</li>
<li>
<a href="">
4
</a>
</li>
<li class="arrow right">
<a href="">
<span class="text">
next
</span>
<i class="fa fa-caret-right ">
</i>
</a>
</li>
</ul>
</div>
</div>
<section class="section card">
<div class="group-section-pagination-holder top">
<ul class="pagination pagination--compact float-left">
<li class="arrow disable">
<a href="">
<i class="fa fa-caret-left ">
</i>
<span class="text">
prev
</span>
</a>
</li>
<li class="current">
<a href="">
1
</a>
</li>
<li>
<a href="">
2
</a>
</li>
<li>
<a href="">
3
</a>
</li>
<li>
<a href="">
4
</a>
</li>
<li class="arrow">
<a href="">
<span class="text">
next
</span>
<i class="fa fa-caret-right ">
</i>
</a>
</li>
</ul>
<ul class="pagination float-right">
<li class="action">
<a href="">
<i class="fa fa-plus ">
</i>
<span class="text">
Add
</span>
</a>
</li>
<li class="action">
<a href="">
<i class="fa fa-times ">
</i>
<span class="text">
Remove
</span>
</a>
</li>
</ul>
</div>
<div class="callout">
this is some content
</div>
<div class="pagination-holder">
<ul class="pagination pagination--compact float-right">
<li class="arrow disable">
<a href="">
<i class="fa fa-caret-left ">
</i>
<span class="text">
prev
</span>
</a>
</li>
<li class="current">
<a href="">
1
</a>
</li>
<li>
<a href="">
2
</a>
</li>
<li>
<a href="">
3
</a>
</li>
<li>
<a href="">
4
</a>
</li>
<li class="arrow">
<a href="">
<span class="text">
next
</span>
<i class="fa fa-caret-right ">
</i>
</a>
</li>
</ul>
</div>
<div class="group-section-pagination-holder">
<ul class="pagination pagination--compact float-left">
<li class="arrow disable">
<a href="">
<i class="fa fa-caret-left ">
</i>
<span class="text">
prev
</span>
</a>
</li>
<li class="current">
<a href="">
1
</a>
</li>
<li>
<a href="">
2
</a>
</li>
<li>
<a href="">
3
</a>
</li>
<li>
<a href="">
4
</a>
</li>
<li class="arrow">
<a href="">
<span class="text">
next
</span>
<i class="fa fa-caret-right ">
</i>
</a>
</li>
</ul>
<ul class="pagination float-right">
<li class="action">
<a href="">
<i class="fa fa-plus ">
</i>
<span class="text">
Add
</span>
</a>
</li>
<li class="action">
<a href="">
<i class="fa fa-times ">
</i>
<span class="text">
Remove
</span>
</a>
</li>
</ul>
</div>
</section>
<div class="">
<div class="pagination-holder">
<ul class="pagination pagination--compact float-left">
<li class="arrow disable">
<a href="">
<i class="fa fa-caret-left ">
</i>
<span class="text">
prev
</span>
</a>
</li>
<li class="current">
<a href="">
1
</a>
</li>
<li>
<a href="">
2
</a>
</li>
<li>
<a href="">
3
</a>
</li>
<li>
<a href="">
4
</a>
</li>
<li class="arrow">
<a href="">
<span class="text">
next
</span>
<i class="fa fa-caret-right ">
</i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Pagination with Result Selector
.pagination-holder .pagination.result-selector
- used often with a paginator is a ruslt selector. This allows the user to limit the amount of returned items on a single page. Because the Result Selector is bult on the paginator design it can also be used at the top or bottom like a paginator.
<div class="pagination-holder top">
<ul class="pagination result-selector float-left">
<li class="label">
Show
</li>
<li class="current">
<a href="">
10
</a>
</li>
<li>
<a href="">
20
</a>
</li>
<li>
<a href="">
50
</a>
</li>
<li class="value">
Results
</li>
</ul>
<ul class="pagination float-right">
<li class="arrow unavailable">
<a href="">
<i class="fa fa-caret-left ">
</i>
<span class="text">
prev
</span>
</a>
</li>
<li class="current">
<a href="">
1
</a>
</li>
<li>
<a href="">
2
</a>
</li>
<li>
<a href="">
3
</a>
</li>
<li>
<a href="">
4
</a>
</li>
<li class="arrow">
<a href="">
<span class="text">
next
</span>
<i class="fa fa-caret-right ">
</i>
</a>
</li>
</ul>
</div>
<div class="pagination-holder bottom">
<ul class="pagination result-selector float-left">
<li class="label">
Show
</li>
<li class="current">
<a href="">
10
</a>
</li>
<li>
<a href="">
20
</a>
</li>
<li>
<a href="">
50
</a>
</li>
<li class="value">
Results
</li>
</ul>
<ul class="pagination float-right">
<li class="arrow unavailable">
<a href="">
<i class="fa fa-caret-left ">
</i>
<span class="text">
prev
</span>
</a>
</li>
<li class="current">
<a href="">
1
</a>
</li>
<li>
<a href="">
2
</a>
</li>
<li>
<a href="">
3
</a>
</li>
<li>
<a href="">
4
</a>
</li>
<li class="arrow">
<a href="">
<span class="text">
next
</span>
<i class="fa fa-caret-right ">
</i>
</a>
</li>
</ul>
</div>
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.
( !! WARNING !! Updated HTML and Styles From Ver 1)
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>
Wizard Navs
Circle Section Nav
.section-nav
- A wizard-like page nav that creates floating circle buttons to the top and bottom of the page. Alter the position of the edge of the page with
.top
and
.bottom
and control the left and right position of the circle buttons with
.left
or
right
. Adding
.navigation
to the circle buttons will turn them blue and add the appropriate arrows. You can always replace with
.fa-holder
with any icon incase you need to use different icons for reason of the application.
<div class="page paper-page">
<div class="section-nav top">
<div class="left">
<a>
<span class="circle button navigation">
<i class="fa fa-holder"></i>
</span>
<span class="text">Back</span>
</a>
</div>
<div class="right">
<a>
<span class="circle button secondary">
<i class="fa fa-times"></i>
</span>
<span class="text">Cancel</span>
</a>
<a>
<span class="circle button success">
<i class="fa fa-times"></i>
</span>
<span class="text">Save</span>
</a>
</div>
</div>
<div class="page-wrapper">
<section class="card">
<h1 class="with-underline">Page Title</h1>
<p>hello I am some content on this page</p>
</section>
</div>
<div class="section-nav bottom">
<div class="right">
<a class="right">
<span class="circle button navigation">
<i class="fa fa-holder"></i>
</span>
<span class="text">Forward</span>
</a>
</div>
</div>
</div>
Circle Section Nav (Disabled)
.section-nav with .disabled
- Adding
.disabled
to the
.section-nav
container with style the circle nav accordingly.
<div class="page">
<div class="section-nav top disabled">
<div class="left">
<a>
<span class="circle button navigation">
<i class="fa fa-holder"></i>
</span>
<span class="text">Back</span>
</a>
</div>
</div>
<div class="page-wrapper">
<section class="">
<h1 class="with-underline">Page Title (Disabled)</h1>
<p>Somethig on this page has disabled forward navigation</p>
</section>
</div>
<div class="section-nav bottom disabled">
<div class="right">
<a>
<span class="circle button navigation">
<i class="fa fa-holder"></i>
</span>
<span class="text">Forward</span>
</a>
</div>
</div>
</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
.banded
or
.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.desaturate
will 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.
States don't obliterate `.striped` but if you are intending to do a lot of state manipulation you might want to use a `.striped.desatrate` because the greys read better against alot of colors.
Striped Table
Cell Data in success Row | Icon is Dynamic | ||
Cell Data in Warning Row | I am an error cell | ||
Cell Data in Warning Row | I am an error cell | ||
Icon is Dynamic | Cell Data in Error Row | Cell Data |
Desaturated Stripe
Cell Data in success Row | Icon is Dynamic | ||
Cell Data in Warning Row | I am an error cell | ||
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>
Inputs: Buttons & Switches
Inputs
Switch (Foundation Override)
.switch
- Switches are a more visible and more touchable versions of checkbox and radio buttons.
( !! WARNING !! Updated HTML and Styles From Ver 1)
<div class="switch-input-space">
<div class="switch">
<input class="switch-input" id="yes-no-1" type="checkbox" name="exampleSwitch">
<label class="switch-paddle" for="yes-no-1">
<span class="show-for-sr">Do you like me?</span>
<span class="switch-active" aria-hidden="true">Yes</span>
<span class="switch-inactive" aria-hidden="true">No</span>
</label>
</div>
<label class="switch-value" for="yes-no-1">Yes or No Question</label>
</div>
Switch (Disabled)
disable
- on the input changes the look and cursor on rollover
<div class="switch-input-space row">
<div class="switch">
<input class="switch-input" id="yes-no-disabled" disabled type="checkbox" name="exampleSwitch">
<label class="switch-paddle" for="yes-no-disabled">
<span class="show-for-sr">Do you like me?</span>
<span class="switch-active" aria-hidden="true">Yes</span>
<span class="switch-inactive" aria-hidden="true">No</span>
</label>
</div>
<label class="switch-value" for="yes-no-disabled">Yes or No Question</label>
</div>
Switch modifing classes
.switch
- Switches are remarkably flexable. Radio Buttons should use
.radio
as modifier, and Checkboxes use
.checkbox
.
.round
and
.radius
are very useful to change the look and feel of buttons.
Radio Buttons should use `.round` or `.radio` modifier
You can make a radio with eiither placing the `.round` or `.radio`. *
Checkboxes should use `.radius`, `.checkbox`, no modifiers
If you want control over the positive and negative icons use `.radius`. Use `.checkbox` to set it to the standard icon in the positive position
<div class="row group-divide">
<h4>Radio Buttons should use `.round` or `.radio` modifier</h4>
<p>You can make a radio with eiither placing the `.round` or `.radio`. *
<div class="row collapse">
<div class="switch-input-space column small-6">
<div class="switch round">
<input class="switch-input" id="yes-no-round" type="radio" name="radio-switch">
<label class="switch-paddle" for="yes-no-round">
<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="yes-no-round">Radio button made with `.round`</label>
</div>
<div class="switch-input-space column small-6">
<div class="switch radio">
<input class="switch-input" id="yes-no-radio" type="radio" name="radio-switch">
<label class="switch-paddle" for="yes-no-radio">
<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>
<label class="switch-value" for="yes-no-radio">Radio button made with `.radio`</label>
</div>
</div>
</div>
<div class="row group-divide">
<h4>Checkboxes should use `.radius`, `.checkbox`, no modifiers</h4>
<p>If you want control over the positive and negative icons use `.radius`. Use `.checkbox` to set it to the standard icon
in the positive position</p>
<div class="row collapse">
<div class="switch-input-space column small-6">
<div class="switch radius">
<input class="switch-input" id="radius-checkbox" type="checkbox" value="true">
<label class="switch-paddle" for="radius-checkbox">
<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-checkbox">Checkbox button made with `.radius`</label>
</div>
<div class="switch-input-space column small-6">
<div class="switch checkbox">
<input class="switch-input" id="checkbox-checkbox" type="checkbox" value="false">
<label class="switch-paddle" for="checkbox-checkbox">
<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>
<label class="switch-value" for="checkbox-checkbox">Checkbox button made with `.checkbox`</label>
</div>
</div>
</div>
Value Switchers
.value-switch
- Add
.value-switch
to a switch so both inactive and active content of the switcher are visible and stay colored.
<div class="switch-input-space column small-12">
<div class="switch value-switch">
<input class="switch-input" id="checkbox-value-switch" type="checkbox" value="false">
<label class="switch-paddle" for="checkbox-value-switch">
<span class="show-for-sr">Do you like me?</span>
<span class="switch-active" aria-hidden="true">
<i class="fa fa-thumbs-up"></i>
</span>
<span class="switch-inactive" aria-hidden="true">
<i class="fa fa-thumbs-down"></i>
</span>
</label>
</div>
</div>
<div class="switch-input-space column small-12">
<div class="switch value-switch switch-2x radius">
<input class="switch-input" id="checkbox-value-switch-radius" type="checkbox" value="false">
<label class="switch-paddle" for="checkbox-value-switch-radius">
<span class="show-for-sr">Do you like me?</span>
<span class="switch-active" aria-hidden="true">US</span>
<span class="switch-inactive" aria-hidden="true">SI</span>
</label>
</div>
<label class="switch-value" for="checkbox-value-switch-radius">You expand the switch area with switch-2x and switch-4x</label>
</div>
<div class="switch-input-space column small-12">
<div class="switch value-switch switch-4x round">
<input class="switch-input" id="checkbox-value-switch-round" type="checkbox" value="false">
<label class="switch-paddle" for="checkbox-value-switch-round">
<span class="show-for-sr">Do you like me?</span>
<span class="switch-active" aria-hidden="true">Inches</span>
<span class="switch-inactive" aria-hidden="true">Centimeters</span>
</label>
</div>
<label class="switch-value" for="checkbox-value-switch-round">You can also apply the `.radius` and `.round` to change the style
</label>
</div>
Switches with Grouped Content
.switch label
- labels can hold more then just plain text but can hold rich text when it is needed. Remember most margins are not needed when placed in labels so using
no-vertical-margin
might improve how it looks..
<div class="question required">
<div class="label-holder">
<label for="">
<span class="text">
Select One
</span>
<span class="required-holder">
<i class="fa fa-holder-dynamic">
</i>
</span>
</label>
</div>
<div class="switch-input-space column medium-6 large-12">
<div class="switch radio">
<input class="switch-input" data-bind="checked:Form().painArea.ForEditing" id="radio1" name="painArea" type="radio" value="true">
<label class="switch-paddle" for="radio1">
<span class="show-for-sr">
Bilateral: Possible intolerance
</span>
<span aria-hidden="true" class="switch-active">
<i class="fa fa-holder">
</i>
</span>
<span aria-hidden="true" class="switch-inactive">
<i class="fa fa-holder">
</i>
</span>
</label>
</div>
<label class="switch-value" for="radio1">
<h5 style="no-verticle-margin">
Bilateral
</h5>
<p>
Muscle symptoms are generalized (e.g., neck and shoulder pain, lower extremity pain)
</p>
<p class="strong">
Bilateral: Possible intolerance
</p>
</label>
</div>
<div class="switch-input-space column medium-6 large-12">
<div class="switch radio">
<input class="switch-input" data-bind="checked:Form().painArea.ForEditing" id="radio2" name="painArea" type="radio" value="false">
<label class="switch-paddle" for="radio2">
<span class="show-for-sr">
Unilateral: Unlikely intolerance
</span>
<span aria-hidden="true" class="switch-active">
<i class="fa fa-holder">
</i>
</span>
<span aria-hidden="true" class="switch-inactive">
<i class="fa fa-holder">
</i>
</span>
</label>
</div>
<label class="switch-value" for="radio2">
<h5 style="no-verticle-margin">
Unilateral
</h5>
<p>
Muscle symptoms are isolated (e.g., knee or shoulder ache)
</p>
<p class="strong">
Unilateral: Unlikely intolerance
</p>
</label>
</div>
</div>
Switch (States)
.error-active
- Switches can be colored with a class [state]-active and [state]-inactive.
Plain switch with `.error-active` and `.sucess-inactive` on the `.switch`
<h3>Plain switch with `.error-active` and `.sucess-inactive` on the `.switch`</h3>
<div class="switch-input-space row">
<div class="switch warning-active error-inactive switch-2x">
<input class="switch-input" id="active-inactive" type="checkbox" name="exampleSwitch">
<label class="switch-paddle" for="active-inactive">
<span class="show-for-sr">Do you like me?</span>
<span class="switch-active" aria-hidden="true">Yes</span>
<span class="switch-inactive" aria-hidden="true">No</span>
</label>
</div>
<label class="switch-value" for="active-inactive">.switch.error-active.warning-inactive/label>
</div>
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
- This is a standard formating for an input question.
<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"></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 value-space">
<span class="value">Years</span>
</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"></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 value-space">
<span class="value">Years</span>
</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>
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
.navOn
to 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
.moible-header
- there is a basic layout of short tabbed header of apps
<div class="row">
<header class="mobile-header">
<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 tab-title">
<a class="home">
<i class="fa fa-holder"></i>
</a>
</li>
<li id="calculator-Tab" class="selected tab-title">
<a href="#!/content/calculator/" class="condensable condensable-word small">Eval
<span class="condense">uate</span>
</a>
</li>
<li id="recommendation-Tab" class=" tab-title">
<a href="#!/content/recommendation/prescribinginfo/" class="condensable condensable-word small">Recommend
<span class="condense">ation</span>
</a>
</li>
</ul>
</header>
</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 more
links 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 Panels
and are never full hidden like the collapsable panel. By default only one
panel
of 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
.condense
will 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-word
see 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-text
and
.long-text
. On the container element add
.swappable
and 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>
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
.highlighted
to the
.page.with-group-sections
and 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-paper
is 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>
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.
Demo Layout
Section Name For Some Item
This is some text to show content on the page.
I am a plain callout. The information in this callout implies section or card context.
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>