Theme Style Guide

This is the first draft of FabFitFun theme style guide that will be updated as we continue to develop the tenets and specifics.

Download Framework

or See design workflow

Branding

Layout

Main container set to 1200px.

<!-- Use "row" and "col" to set 100% width div --> <div class="row"> <div class="col"> <div class="demostyle">100% width div</div> </div> </div> <!-- Add "container" class to set max-width --> <div class="row container"> <div class="col"> <div class="demostyle">1200px div</div> </div> </div>

Use one of those codes above to set up proper main layout for your page design.

Responsive breakpoints

<!-- Use "row" and "col" to set 100% width div --> @media (max-width: 480px) { ... } // Small devices (landscape phones, less than 768px) @media (max-width: 768px) { ... } // Medium devices (tablets, less than 991px) @media (max-width: 991px) { ... } // Large devices (desktops, less than 1199px) @media (max-width: 1199px) { ... } // Extra large devices (large desktops) // No media query since the extra-large breakpoint has no upper bound on its width

Sample Layouts

Grid System

Flexbox grid system. With flexbox, col class inside of row will automatically calculates width and becomes responsive.
See Demo & more examples.

1/2 - #1
1/2 - #2
<div class="row"> <div class="col"> <div class="demostyle">1/2 - #1</div> </div> <div class="col"> <div class="demostyle">1/2 - #2</div> </div> </div>
1/2 - #1
1/2 - #2
<div class="row-bg-demo"> <!-- This will have background color or image --> <div class="row container"> <div class="col"> <div class="demostyle">1/2 - #1</div> </div> <div class="col"> <div class="demostyle">1/2 - #2</div> </div> </div> </div>
1/3 - #1
1/3 - #2
1/3 - #3
<div class="row container"> <div class="col"> <div class="demostyle">1/3 - #1</div> </div> <div class="col"> <div class="demostyle">1/3 - #2</div> </div> <div class="col"> <div class="demostyle">1/3 - #3</div> </div> </div>

To setup proper grids on your page, please See Demo & more examples.

Colors

  • Call to Action color is used for elements that reflects FabFitFun's brand and Call to Action elements.
  • Nofitication color is used for notification bar.
  • Positive color is generally used for UI elements. (e.g. Input field validation)
  • Negative color is generally used for UI elements or elements need emphasis. (e.g. Input field error message or Promotions)
Black#000000
Main text color#222222
#444444
#666666
#cccccc
#dddddd
#eeeeee
#f7f7f7
Call to Action#fb6a66
Hover#ff4646
Secondary#67bd93
#b4e0d8
Nofitication#ceacc7
Positive#4ebc41
BG 1#fce4d6
BG 2#fef8f5

Typography

Heading font: Montserrat (400 & 700)
Body font: Muli (300 & 400)

h1. Heading

h2. Heading

h3. Heading

<h1>h1. Heading</h1> <h2>h2. Heading</h2> <h3>h3. Heading</h3>

Add your own class to cutomize e.g.

<h1 class="red-text">h1. Heading custom</h1>

with CSS

.red-text{ color: red; }

This is a demo(h1 heading with no custom style)

This is a demo. Muli 300, font-size 16px, and line-height 145% are used for main content text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque tristique leo non ultricies. In sed justo ultricies justo gravida egestas at ultrices leo. Morbi in metus nec tellus vulputate efficitur vel ut ligula. Link text style Nam ut ultricies mauris. Duis auctor viverra ligula, ac rutrum nisl hendrerit eget. Morbi pretium, erat ut luctus tristique, ante nisl rhoncus justo, sollicitudin ultricies sem mi quis justo.

This is an anchor text

Added :active color to complement user's action.

Buttons

Use combination of btn, btn-cta, btn-line, and btn-lg. See below examples.

Also works with Anchor text
<button type="button" class="btn">Default</button> <button type="button" class="btn btn-cta">Call to Action</button> <!-- Bigger buttons --> <button type="button" class="btn btn-cta btn-lg">Large button</button> <!-- Anchor text --> <a href="#" class="btn btn-lg">Line</a>

Arrow icon cta icon

<a href="#" class="btn btn-lg">Arrow icon <i class="ion-arrow-right-c"></i></a> <a href="#" class="btn btn-cta btn-lg">cta icon <i class="ion-arrow-right-c"></i></a>

Icons

All icons should be used from Iconicons.

<i class="ion-ios-heart-outline"></i> <i class="ion-social-twitter"></i>

Loading icon prototype

Loading icon distracts users from what’s happening behind the scenes. FabFitFun loading icon will convey our brand and be used through out the site.

Form

A very basic style applied from the theme. Add your own custom style to customize.

Form Error messages

Validation error messages should indicate(and auto focus) the place where the error occured and give a specific direction to correct the error.

If the error message is not related to specific input field, show it around the submit button where the last action occurred.

Please enter your last name
Radio 1 Radio 2
Check 1 Check 2
Error: Please check your internet connection
<form class="sample"> <fieldset class="form-field ff-fifty"> <label for="textarea">First name</label> <input type="text" id="text" placeholder="Text Input" /> </fieldset> <fieldset class="form-field ff-fifty error"> <label for="textarea">Last name</label> <input type="text" id="text" placeholder="Text Input" /> <div class="error-msg"> Please enter your last name </div> </fieldset> <fieldset class="form-field"> <label for="text">Text input</label> <input type="text" id="text" placeholder="Text Input" /> </fieldset> <fieldset class="form-field"> <label for="password">Password input</label> <input type="password" id="password" placeholder="Password Input" /> </fieldset> <fieldset class="form-field"> <label for="select">Select</label> <select id="select"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </fieldset> <fieldset class="form-field"> <label for="textarea">Textarea</label> <textarea id="textarea"></textarea> </fieldset> <fieldset class="form-field"> <label for="file">File</label> <input type="file" id="file" /> </fieldset> <fieldset class="form-field"> <label>Radio button</label> <input type="radio" name="optionsRadios" value="option1"> Radio 1 <input type="radio" name="optionsRadios" value="option2"> Radio 2 </fieldset> <fieldset class="form-field"> <label>Checkbox</label> <input type="checkbox"> Check 1 <input type="checkbox"> Check 2 </fieldset> <fieldset class="form-field"> <button type="button" class="btn btn-lg">Submit</button> </fieldset> </form>

Alerts

Alerts messages

Success! Indicates a successful or positive action.
Info! Indicates a neutral informative change or action.
Warning! Indicates a warning that might need attention.
Danger! Indicates a dangerous or potentially negative action.
<div class="alert alert-success"> <b>Success!</b> Indicates a successful or positive action. </div> <div class="alert alert-info"> <b>Info!</b> Indicates a neutral informative change or action. </div> <div class="alert alert-warning"> <b>Warning!</b> Indicates a warning that might need attention. </div> <div class="alert alert-danger"> <b>Danger!</b> Indicates a dangerous or potentially negative action. </div>

Inverted Alert messages

Success! Indicates a successful or positive action.
Info! Indicates a neutral informative change or action.
Warning! Indicates a warning that might need attention.
Danger! Indicates a dangerous or potentially negative action.
<div class="alert alert-success invert"> <b>Success!</b> Indicates a successful or positive action. </div> <div class="alert alert-info invert"> <b>Info!</b> Indicates a neutral informative change or action. </div> <div class="alert alert-warning invert"> <b>Warning!</b> Indicates a warning that might need attention. </div> <div class="alert alert-danger invert"> <b>Danger!</b> Indicates a dangerous or potentially negative action. </div>

Badges

Badges are used to support content or a status of the content.

  • New Add-Ons credits: New
  • Membership status: Expired
  • Membership status: Will not renew
  • Plan type: Active
<span class="badge-new">New</span> <span class="badge-gray">Expired</span> <span class="badge-gray">Will not renew</span> <span class="badge-active">Active</span>

Table

Work in progress: Table style

thead 1 thead 2 thead 3
tbody 1 - row 1 tbody 2 - row 1 tbody 3 - row 1
tbody 1 - row 2 tbody 2 - row 2 tbody 3 - row 2
tfoot 1 tfoot 2 tfoot 3
<table> <thead> <tr> <th> thead 1 </th> <th> thead 2 </th> <th> thead 3 </th> </tr> </thead> <tbody> <tr> <td> tbody 1 </td> <td> tbody 2 </td> <td> tbody 3 </td> </tr> </tbody> <tfoot> <tr> <td> tfoot 1 </td> <td> tfoot 2 </td> <td> tfoot 3 </td> </tr> </tfoot> </table>

Motion

Work in progress: Subtle animations to help users to interact with UI and content on the site.

List from the material design.

  • Hints at what will happen on users action.
  • Hierarchical and spatial relationships between elements.
  • Distraction from what's happening behind the scenes (like fetching content or loading the next view).
  • Compliment and confirming users action by subtle animation feedback.
transition: all 0.2s cubic-bezier(.19,.98,.27,.95); -moz-transition: all 0.2s cubic-bezier(.19,.98,.27,.95); -webkit-transition: all 0.2s cubic-bezier(.19,.98,.27,.95);

------------------------------------------------------------------------------------------------------------------

Tooltip

Tooltip Here. Mouse over or tab n mobile

<i class="ion-ios-information" rel="tooltip" title="Tooltip content here..."></i>

Tabs

Check your tabs on mobile! Adding too many tabs might break the layout on smaller screens.

    Tab 1 Tab 2 Tab 3
Tab 1 content
Tab 2 content
Be careful this tab might gets pushed down to the different row on mobile.
<ul class="fff-tabs"> <span data-tab="tab_1" class="active">Tab 1</span> <span data-tab="tab_2" >Tab 2</span> <span data-tab="tab_3" >Tab 3</span> </ul> <div class="fff-tab-content current" id="tab_1"> Tab 1 content </div> <div class="fff-tab-content" id="tab_2"> Tab 2 content </div> <div class="fff-tab-content" id="tab_3"> Be careful this tab might gets pushed down to the different row on mobile. </div>

Match data-tab="tab_1" on the tab and id="tab_1" on the content div.

Accordion

Displays collapsible content panels for presenting information in a limited amount of space.

Accordion title

Accordion content. Sed a quam sapien. Cras at diam felis. Morbi consequat id ipsum at aliquam. Nam suscipit eleifend nisi at molestie. Nunc metus nisi, imperdiet et placerat eu, tincidunt id elit. Nullam quis ante vel eros placerat varius nec sed nunc. Duis non vehicula lacus, congue congue libero. Sed placerat vel justo ac lacinia.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nam et turpis eget neque fermentum ornare sed non leo. Sed a quam sapien. Cras at diam felis. Morbi consequat id ipsum at aliquam. Nam suscipit eleifend nisi at molestie. Nunc metus nisi, imperdiet et placerat eu, tincidunt id elit. Nullam quis ante vel eros placerat varius nec sed nunc. Duis non vehicula lacus, congue congue libero. Sed placerat vel justo ac lacinia.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nam et turpis eget neque fermentum ornare sed non leo. Sed a quam sapien. Cras at diam felis. Morbi consequat id ipsum at aliquam. Nam suscipit eleifend nisi at molestie. Nunc metus nisi, imperdiet et placerat eu, tincidunt id elit. Nullam quis ante vel eros placerat varius nec sed nunc. Duis non vehicula lacus, congue congue libero. Sed placerat vel justo ac lacinia.

 

<div class="accordion"> <h3 class="accordion-title"> Accordion title <i class="ion-ios-plus-empty"></i> </h3> <div class="accordion-content"> Accordion content... </div> </div>

Accessibility ------------------------------------------------------------------------------------------------------------------

Accessibility

Work in progress: Accessibility in web design means creating web pages that everyone can use, regardless of hardware, software, or any sensory or physical impairment.

Further reading

  • https://www.w3.org/WAI/intro/wcag.php
  • https://www.ada.gov/pcatoolkit/chap5toolkit.htm
  • http://webaim.org/standards/508/checklist
  • http://www.interactiveaccessibility.com/services/ada-compliance
  • https://codex.wordpress.org/Accessibility
  • https://developer.apple.com/ios/human-interface-guidelines/interaction/accessibility/

SCROLL TO TOP