Logo icon

STYLE GUIDE v4.0

Glispa Connect Style Guide

GETTING STARTED

LAYOUT

UI ELEMENTS


GETTING STARTED


Setup code

Include the following code in the head section.

<!-- Typeface -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600,700,900" rel="stylesheet">
<!-- Icon -->
<link rel="icon" type="image/png" href="https://s3.amazonaws.com/avocarrot-style-guide/4.0/images/avocarrot-skin/favicon/favicon-32x32.png" sizes="32x32">
<!-- Apps style-->
<link rel="stylesheet" href="https://s3.amazonaws.com/avocarrot-style-guide/latest/avocarrot-skin/apps/apps.min.css">

To include a specific version, ie v1.0 include the versioned import instead.

<link rel="stylesheet" href="https://s3.amazonaws.com/avocarrot-style-guide/1.0/avocarrot-skin/apps/apps.min.css">

LAYOUT


Side Menu Layout

<div class="side-menu-layout__container">
  <!-- Menu -->
  <div class="side-menu-layout__menu expanded">
    <!-- Header -->
    <header>
      <!-- Menu responsive button (with animation)-->
      <button class="side-menu-layout__menu__mobile-trigger"><i></i></button>
      <!-- Link to main page -->
      <a href="./link/to/root">
        <img width="120" src="https://s3.amazonaws.com/avocarrot-style-guide/4.0/images/avocarrot-skin/logo/full-light.png" alt="Logo">
      </a>
    </header>
    <!-- Navigation Content -->
    <nav>
      <ul>
        <li>
          <a class="active" href="/inventory">
              <i class="icon location_world"></i>
              <span>INVENTORY</span>
            </a>
        </li>
        <li>
          <a href="/reporting">
              <i class="icon files_single-content-03"></i>
              <span>REPORTING</span>
            </a>
        </li>
      </ul>
      <!-- Optional Seperator -->
      <hr>
      <ul>
        <!-- Secondary link -->
        <li class="side-menu-layout__secondary-link">
          <a href="/integration">
              <i class="icon icon ui-1_settings-gear-63"></i>
              <span>INTEGRATION</span>
            </a>
        </li>
      </ul>
    </nav>
    <!-- Footer -->
    <footer>
      Glispa Connect 2018. All rights reserved
    </footer>
  </div>
  <!-- Content Wrapper -->
  <div class="side-menu-layout__content-wrapper">
    <!-- Header -->
    <div class="side-menu-layout__header">
      <h3> Title </h3> ...
    </div>
    <!-- Content -->
    <div class="side-menu-layout__content">
      ...
    </div>
  </div>
</div>
Logo
Glispa Connect 2017. All rights reserved

HEADER TITLE

Placeholder for UI elements

Master Bar Layout

To setup a basic application layout you can utilize the Master Bar, Side Bar and Content Panel UI elements.

<!-- Master Bar -->
<div class="master-bar__wrapper">
  ...
</div>
<!-- Container -->
<div class="container-wrapper">
  <div class="container">
    <!-- Side Bar -->
    <div class="side-bar-wrapper">
      <div class="side-bar">
        ...
      </div>
    </div>
    <!-- Content Panel -->
    <div class="content-panel">
      ...
    </div>
    <div class="content-footer">
      <p> Optional footer </p>
    </div>
  </div>
</div>

MASTER BAR TITLE



Content panel



For full width pages you can use the --full-width alternatives.

<!-- Master Bar -->
<div class="master-bar__wrapper">
  ...
</div>
<!-- Container -->
<div class="container-wrapper">
  <div class="container">
    <!-- Content panel full width -->
    <div class="content-panel--full-width">
      ...
    </div>
    <!-- Content Footer full width -->
    <div class="content-footer--full-width">
      ...
    </div>
  </div>
</div>

MASTER BAR TITLE


Content Panel


To include extra space for master-bars with more height add the .container-wrapper--extended-master-bar class in the .container-wrapper layout.

<div class="master-bar__wrapper">
  <div class="row top-spacing-1x bottom-spacing-1x">
    <div class="columns"> More content </div>
  </div>
  <div class="master-bar">
    ...
  </div>
</div>
<div class="container-wrapper container-wrapper--extended-master-bar">
  <div class="container">
    ...
  </div>
</div>
More content

MASTER BAR TITLE


Content Panel


Master Bar Content

If you want to show only a title for the master bar content include the master-bar__content ui-element.

<div class="master-bar__wrapper">
  <div class="master-bar">
    <!-- Logo -->
    <div class="master-bar__logo">
      <img src="https://s3.amazonaws.com/avocarrot-style-guide/4.0/images/avocarrot-skin/logo/icon.png" width="150" alt="Logo" />
    </div>
    <!-- Content -->
    <div class="master-bar__content">
      <p class="no-bottom-spacing">MASTER BAR TITLE</p>
    </div>
  </div>
</div>

MASTER BAR TITLE

Master Bar Navigation

Aside from the main navigation or content, the master bar can wrap additional links and a dropdown menu.

<div class="master-bar__wrapper">
  <div class="master-bar">
    <!-- Logo -->
    <div class="master-bar__logo">
      <img src="https://s3.amazonaws.com/avocarrot-style-guide/4.0/images/avocarrot-skin/logo/icon.png" width="150" alt="Logo" />
    </div>
    <!-- Navigation -->
    <nav class="master-bar__navigation">
      <a class="master-bar__navigation__link" href="/reportin">REPORTING</a>
      <a class="master-bar__navigation__link" href="/apps" class="active">APPS</a>
    </nav>
    <!-- Aside content -->
    <aside class="master-bar__aside">
      <a href="/documentation" class="button-trigger">
        <i class="icon objects_support-17 icon--right-spacing"></i>
        DOCUMENTATION
      </a>
      <div class="master-bar__menu dropdown">
        <div class="dropdown-trigger expanded dropdown-trigger--icon">
          <button type="button">
           <i class="icon users_circle-08 x3"></i>
          </button>
        </div>
        <div class="dropdown-pane stack-right expanded text-left">
          <div class="dropdown-pane-section">
            <a class="dropdown-option" href="/payment">
              <i class="icon business_money-bag x2 icon--right-spacing"></i>PAYMENT
            </a>
            <a class="dropdown-option" href="/preferences">
              <i class="icon users_badge-13 x2 icon--right-spacing"></i>PREFERENCES
            </a>
          </div>
          <div class="dropdown-pane-section">
            <a class="dropdown-option" href="/logout">
              <i class="icon arrows-4_logout x2 icon--right-spacing"></i>LOGOUT
            </a>
          </div>
        </div>
      </div>
    </aside>
  </div>
</div>

Master Bar Mobile Menu

Contracted
<div class="master-bar__wrapper">
  <div class="master-bar master-bar--mobile">
    <!-- Logo -->
    <div class="master-bar__logo">
      <img src="https://s3.amazonaws.com/avocarrot-style-guide/4.0/images/avocarrot-skin/logo/icon.png" width="150" alt="Logo">
    </div>
    <!-- Master Bar Mobile Trigger -->
    <div class="master-bar--mobile-trigger">
      <button class="button-trigger">
      <i class="icon ui-2_menu-34 x3"></i>
    </button>
    </div>
  </div>
</div>
Expanded
<div class="master-bar__wrapper">
  <div class="master-bar master-bar--mobile">
    <!-- Logo -->
    <div class="master-bar__logo">
      <img src="https://s3.amazonaws.com/avocarrot-style-guide/4.0/images/avocarrot-skin/logo/icon.png" width="150" alt="Logo">
    </div>
    <!-- Master Bar Mobile Trigger -->
    <div class="master-bar--mobile-trigger">
      <button class="button-trigger">
      <i class="icon ui-1_simple-remove x3"></i>
    </button>
    </div>
    <!-- Navigation -->
    <nav class="master-bar__navigation">
      <a class="master-bar__navigation__link" href="/reporting">REPORTING</a>
      <a class="master-bar__navigation__link active" href="/apps">APPS</a>
      <div>
        <hr>
      </div>
      <a class="master-bar__navigation__secondary-link button-trigger" href="/documentation">
        <i class="icon objects_support-17 icon--right-spacing"></i> DOCUMENTATION
      </a>
      <a class="master-bar__navigation__secondary-link button-trigger" href="/payment">
        <i class="icon business_money-bag x2 icon--right-spacing"></i>PAYMENT
      </a>
      <a class="master-bar__navigation__secondary-link button-trigger" href="/preferences">
        <i class="icon users_badge-13 x2 icon--right-spacing"></i>PREFERENCES
      </a>
      <div>
        <hr>
      </div>
      <a class="master-bar__navigation__secondary-link button-trigger bottom-spacing-1x" href="/logout">
        <i class="icon arrows-4_logout x2 icon--right-spacing"></i>LOGOUT
      </a>
    </nav>
  </div>
</div>
div>

Content Panel

In each section you must define a content header.

<div class="content-panel">
  <header class="content-panel-header">
    <p class="no-bottom-spacing">CONTENT HEADER</p>
  </header>
  <section class="content-panel-section">
    <p>Content</p>
  </section>
</div>

CONTENT HEADER

Content

In each section you can optionally define a full width a navigation section using the content-panel-navigation--full-width class.

<div class="content-panel-navigation content-panel-navigation--full-width">
  <div class="row text-center small-up-1 medium-up-2 large-up-3">
    <div class="column content-panel-navigation__item">
      <button type="button">Option 1</button>
    </div>
    <div class="column content-panel-navigation__item selected">
      <button type="button">Option 2</button>
    </div>
    <div class="column content-panel-navigation__item disabled">
      <button type="button">Option 3</button>
    </div>
  </div>
</div>

To include expandable navigation use the .content-panel-navigation__trigger element

  • Include the .content-panel-navigation--expanded class for the expanded state
  • Remove the .content-panel-navigation--expanded class for the contracted state
<div class="content-panel-navigation--expandable content-panel-navigation--expanded">
  <div class="content-panel-navigation__item">
    <button type="button">Option 1</button>
  </div>
  <div class="content-panel-navigation__item active">
    <button type="button">Option 2</button>
  </div>
  <div class="content-panel-navigation__item">
    <button type="button">Option 3</button>
  </div>
  <div class="content-panel-navigation__trigger">
    <button class="button round primary" type="button" name="button">
      <i class="icon ui-1_simple-remove x2"></i>
    </button>
  </div>
</div>

UI ELEMENTS


Grid

The Grid system is built on top of Foundation 6 Flex Grid.


Foundation Flex Grid documentation


The following additional helper classes have been added:

You can apply specific margins to any element from *-1x to *-4x times of Grid's vertical height spacing. .bottom-spacing-x or .top-spacing-x

The same is applied for .top-spacing-x

You can apply specific margins to any element from *-1x to *-4x times of Grid's vertical height spacing. .bottom-spacing-x or .top-spacing-x

The same is applied for .top-spacing-x

<p class="no-bottom-spacing">
  You can also remove any bottom spacing.
</p>
<p class="no-top-spacing">
  Or top spacing.
</p>

You can also remove any bottom spacing.

Or top spacing.

<p class="small-bottom-spacing-3x">
  Bottom spacing 3x for small resolutions
</p>
<p class="medium-bottom-spacing-3x">
  Bottom spacing 3x for medium resolutions
</p>
<p class="small-top-spacing-3x">
  Top spacing 3x for small resolutions
</p>
<p class="medium-top-spacing-3x">
  Top spacing 3x for medium resolutions
</p>

Or even enable it only for specific resolutions

small-bottom-spacing-* small-top-spacing-*

medium-bottom-spacing-* medium-top-spacing-*

<p class="left-spacign-1x">
  Left spacing 1x
</p>
<p class="right-spacign-1x">
  Right spacing 1x
</p>

Enable right or left spacing using left-spacing-1x and right-spacing-1x classes

If you want to show left or right separators include separator--left and separator--right respectively.

<div class="columns separator--left">
  Separator on the left side
</div>
<div class="columns separator--right">
  Separator on the right side
</div>
Separator on the right side
Separator on the left side

To show / hide UI elements for different resolutions you can use the Foundation 6 Visiblity Helpers.


Foundation Visiblity Helpers documentation


The following additional helper classes have been added:

<p class="text-center-for-small">
  Centers text for small dimensions
</p>
<p class="text-center-for-medium">
  Centers text for small and medium dimensions
</p>
<p class="align-center-for-small">
  Alligns chidren in the middle for small dimensions
</p>
<p class="align-center-for-small">
  Alligns chidren in the middle for small and medium dimensions
</p>

Centers text for small dimensions

Centers text for small and medium dimensions

Alligns chidren in the middle for small dimensions

Alligns chidren in the middle for small and medium dimensions


Colors

You can style the the foreground color of <h1/> , <h2/> ... <p/> tags using the following classes:

<p class="primary"> primary </p>
<p class="secondary"> secondary </p>
<p class="success"> success </p>
<p class="info"> info </p>
<p class="warning"> warning </p>
<p class="alert"> alert </p>
<p class="light"> light </p>

primary

secondary

info

success

warning

alert

light


Images

The following image assets are available.

<img src="https://s3.amazonaws.com/avocarrot-style-guide/4.0/images/avocarrot-skin/logo/icon.png"/>
<img src="https://s3.amazonaws.com/avocarrot-style-guide/4.0/images/avocarrot-skin/logo/full-dark.png"/>
<img src="https://s3.amazonaws.com/avocarrot-style-guide/4.0/images/avocarrot-skin/logo/full-light.png"/>

Typography

<h1> h1 header </h1>
<h2> h2 header </h2>
<h3> h3 header </h3>
<h4> h4 header </h4>
<h5> h5 header </h5>
<h6> h6 header </h6>
<p>
  This is a paragraph with <strong>strong</strong> and <em>em</em> text
</p>
<p class="lead">
  This is a lead paragraph
</p>
<small>
  You can also have tiny text
</small>

h1 header

h2 header

h3 header

h4 header

h5 header
h6 header

This is a paragraph with strong and em text

This is a lead paragraph

You can also have tiny text

To have vertically aligned text with icon use the .text--vertical-align class

<h3 class="text--vertical-align">
  <i class="icon tech_computer-old x3 icon--right-spacing"> </i> H3 with vertically aligned icon
</h3>
<p class="text--vertical-align">
  <i class="icon tech_computer-old icon--right-spacing"> </i> Paragraph with vertically aligned icon
</p>

H3 with vertically aligned icon

Paragraph with vertically aligned icon

To have baseline aligned text with icon use the .text--baseline-align class

<h3 class="text--baseline-align">
  <i class="icon tech_computer-old x3 icon--right-spacing"> </i> H3 with baseline aligned icon
</h3>
<p class="text--baseline-align">
  <i class="icon tech_computer-old icon--right-spacing"> </i> Paragraph with baseline aligned icon
</p>

H3 with baseline aligned icon

Paragraph with baseline aligned icon

You can truncate text in columns by applying the text--truncate class.

<div class="row align-middle align-center">
  <div class="columns large-3 text--truncate">
    Text is truncated
  </div>
  <div class="columns large-3">
    Text is not truncated
  </div>
</div>
Text is truncated
Text is not truncated

Icons

Icons are built on top of Nucleo icons.

To use an icon include the icon's class name in an i tag with the .icon <code> prefix.

CLICK HERE to see the full icon set.

<i class="icon files_archive"></i>
<i class="icon arrows-1_download"></i>

files_archive

\e907

arrows-1_download

\ea9a

To include margins for icons with text (ie for anchor tags) use the .icon--right-spacing class

<a href="#">
  <i class="icon files_archive icon--right-spacing"></i> Link with icon
</a>
<p>
  <i class="icon arrows-1_download icon--right-spacing"></i> Text with icon
</p>

Text with icon

To light icons (for dark backgrounds) use the .icon--light class

<i class="icon icon--light files_archive"></i>
<i class="icon icon--light arrows-1_download"></i>

Buttons

You can set buttons using the basic pallete colors.

Button text always defaults to UPPERCASE.

<button class="button primary"> BUTTON </button>
<button class="button secondary"> BUTTON </button>
<button class="button alert"> BUTTON </button>

Disabled status are handled automatically when the disabled attribute is set.

<button class="button primary" disabled> DISABLED </button>
<button class="button secondary" disabled> DISABLED </button>

Use .button.round for secondary menu controls.

<button class="button round">
  <i class="icon ui-2_grid-45 icon--light"></i>
</button>
<button class="button round" disabled>
  <i class="icon ui-2_grid-45 icon--light"></i>
</button>
<button class="button round secondary">
  <i class="icon ui-2_grid-45 icon--light"></i>
</button>
<button class="button round secondary" disabled>
  <i class="icon ui-2_grid-45 icon--light"></i>
</button>

Button Triggers

Use button-trigger when attaching a trigger event to an in-page action. Button triggers include both text and an icon.

<!-- Default Button Trigger -->
<button class="button-trigger"> BUTTON </button>
<button class="button-trigger" disabled> BUTTON </button>
<button class="button-trigger">
  <i class="icon arrows-1_minimal-left"></i> BUTTON
</button>
<!-- Primary Button Trigger -->
<button class="button-trigger primary"> BUTTON </button>
<button class="button-trigger primary" disabled> BUTTON </button>
<button class="button-trigger primary">
  <i class="icon arrows-1_minimal-left"></i> BUTTON
</button>

To include a button triggers with only an icon add the button-trigger--icon-only class.

<!-- Icon-only Button Trigger -->
<button class="button-trigger button-trigger--icon-only primary">
  <i class="icon icon ui-1_trash-simple"></i>
</button>


Forms

Input

<!-- Text input -->
<label class="title-label" for="input-text"> Text input label</label>
<input name="input-text" type="text" placeholder="NAME">

<!-- Email input -->
<label class="title-label" for="input-email"> Email input label</label>
<input name="input-email" type="email" placeholder="EMAIL">

Input validations

<div class="form-control-error">
  <input type="text" value="INVALID INPUT" class="bottom-spacing-half-x">
  <div class="form-control-error--message">Custom error message</div>
</div>
<div class="form-control-success">
  <input type="text" value="CORRECT INPUT">
</div>
Custom error message

Messages

<div class="form-error-message text-center">
  Optional error message
</div>
<div class="form-success-message text-center">
  <i class="icon ui-1_check-circle-07 x3 bottom-spacing-half-x"></i>
  Optional success message
</div>
<div class="form-info-message text-center">
  <i class="icon travel_info x3 bottom-spacing-half-x"></i>
  Optional informational message
</div>
Optional error message
Optional success message
Optional informational message

Select

<div class="select-dropdown">
  <select name="option-selection">
    <option value="" disabled selected>Select your option</option>
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
    <option value="option-3">Option 3</option>
  </select>
</div>

Checkbox

<div class="checkbox">
  <input type="checkbox" id="checkbox-1">
  <label for="checkbox-1"> CHECKBOX </label>
</div>
<div class="checkbox">
  <input type="checkbox" id="checkbox-2" checked>
  <label for="checkbox-2"> CHECKBOX </label>
</div>
<div class="checkbox">
  <input type="checkbox" id="checkbox-3" disabled>
  <label for="checkbox-3" class="disabled"> CHECKBOX </label>
</div>

Radio button

<div class="radio-button">
  <input type="radio" name="options-group" id="option-1" value="1" checked/>
  <label class="radio-label" for="option-1"> RADIO BUTTON </label>
</div>
<div class="radio-button">
  <input type="radio" name="options-group" id="option-2" value="2" />
  <label class="radio-label" for="option-2"> RADIO BUTTON </label>
</div>
<div class="radio-button">
  <input type="radio" name="options-group" id="option-3" value="3" disabled />
  <label class="radio-label" for="option-3"> RADIO BUTTON </label>
</div>

Number input

The default number input is shown without any controls

<div class="number-input">
  <span class="number-input--symbol">&#36;</span>
  <input class="number-input--value" type="number" value=1 min=0 max=10 step="any"/>
</div>
$

On click the number-input--controls should be shown

<div class="number-input">
  <span class="number-input--symbol">&#36;</span>
  <input class="number-input--value" type="number" value=1 min=0 max=10 step="any"/>
  <div class="number-input--controls">
    <button type="submit" class="number-input--controls--set">
      <i class="icon ui-1_check x2"></i>
    </button>
    <button type="button" class="number-input--controls--reset">
      <i class="icon ui-1_circle-remove x2"></i>
    </button>
  </div>
</div>
$

For the save operations, click to the number-input--controls-set a loader should replace the controls

<div class="number-input">
  <span class="number-input--symbol">&#36;</span>
  <input class="number-input--value" type="number" value=1 min=0 max=10 step="any"/>
  <div class="number-input--loader">
    <span class="loader small"></span>
  </div>
</div>
$

Table

<div class="table__wrapper">
  <div class="table--fixed-columns is-scrollable">
    <table>
      <thead>
        <th class="table__column--is-sortable"> App ID </th>
      </thead>
      <tbody>
        <tr class="table__row__header">
          <td class="table__row__header-title"> Totals </td>
        </tr>
        <tr class="table__row--fixed nested-level-0">
          <td title="6040"> 6040 </td>
        </tr>
        <tr class="table__row--fixed nested-level-1">
          <td title="USA">
            <span class="flag-icon flag-icon-us icon--right-spacing"></span>
            USA
          </td>
        </tr>
        ...
      </tbody>
    </table>
  </div>
  <div class="table--scrollable-columns">
    <table style="width: 150%;">
      <thead>
        <th class="table__column--is-sortable table__column--is-sorted-desc"> Adspend </th>
        <th class="table__column--is-sortable"> CTR </th>
        ...
      </thead>
      <tbody>
        <tr class="table__row__header">
          <td> $178.64</td>
          ...
        </tr>
        <tr class="table__row nested-level-0">
          <td> $151.22</td>
          ...
        </tr>
        <tr class="table__row nested-level-1">
          <td> $149.95</td>
          ...
        </tr>
      </tbody>
    </table>
  </div>
</div>

Controlling the table style

  • You can disable scrolling by removing the .is-scrollable class and the style="width: 150%;" block;

  • You can set descending/ascending table icons using the corresponding classes .table__column--is-sorted-desc and .table__column--is-sorted-asc

  • Rows that are marked with the .table__row__header and table__row__header-title classes display a unique font-weigth, background combination.

  • The nested-level-{{number}} classes determine the left-padding offset for nested rows

App ID
Totals
6040
United States of America
Canada
9271
Australia
Canada
Adspend CTR eCPM Impressions
$178.64 0.34% $1.54 115.74 K
$151.22 0.29% $1.42 106.22 K
$149.95 0.28% $1.43 105.16 K
$1.27 0.38% $1.20 1.06 K
$27.42 0.97% $2.88 9.52 K
$25.00 0.95% $2.82 8.86 K
$2.27 1.35% $3.83 592

Loader

Loaders can be used as independent components.

<span class="loader"></span>
<span class="loader small"></span>

Or inside other components, with fixed dot size.

<a class="button primary">
  <span class="loader"></span>
</a>
<button class="button secondary">
  <span class="loader"></span>
</button>

Panel

Use panel to wrap other UI elements or DOM elements.

<div class="panel">
  <p class="text-center"> Content </p>
</div>

Content


Form panel

<div class="form-panel">
  <form action="...">
    <!-- Input fields -->
    <div class="form-panel-row">
      <label class="title-label" for="app-name">App name</label>
      <input type="text" name="app-name" placeholder="e.g Angry Birds" value="">
    </div>
    <div class="form-panel-row">
      <label class="title-label" for="app-store-url">Store URL / package name</label>
      <input type="text" name="app-store-url" placeholder="e.g com.apk.googles" value="">
    </div>
    <!-- Select dropdown -->
    <div class="form-panel-row">
      <label class="title-label" for="platform-selection">Platform</label>
      <div class="select-dropdown">
        <select name="platform-selection">
          <option value="ANDROID">Android</option>

          <option value="IOS">iOS</option>
        </select>
      </div>
    </div>
  </form>
</div>

App icon

To iterate app icons colors (10 available types) using the type-1, type-2 ... class names.

<span class="app-icon" style="background-image: url(https://s3.amazonaws.com/avocarrot-style-guide/4.0/images/common/app-icons/f44336.jpg)">A</span>
<span class="app-icon" style="background-image: url(https://s3.amazonaws.com/avocarrot-style-guide/4.0/images/common/app-icons/673ab7.jpg)">B</span>
<span class="app-icon" style="background-image: url(https://s3.amazonaws.com/avocarrot-style-guide/4.0/images/common/app-icons/009688.jpg)">C</span>
<span class="app-icon" style="background-image: url(https://s3.amazonaws.com/avocarrot-style-guide/4.0/images/common/app-icons/ffc107.jpg)">D</span>
<span class="app-icon" style="background-image: url(https://s3.amazonaws.com/avocarrot-style-guide/4.0/images/common/app-icons/e91e63.jpg)">E</span>
<span class="app-icon" style="background-image: url(https://s3.amazonaws.com/avocarrot-style-guide/4.0/images/common/app-icons/2196f3.jpg)">F</span>
<span class="app-icon" style="background-image: url(https://s3.amazonaws.com/avocarrot-style-guide/4.0/images/common/app-icons/00bcd4.jpg)">G</span>
<span class="app-icon" style="background-image: url(https://s3.amazonaws.com/avocarrot-style-guide/4.0/images/common/app-icons/607d8b.jpg)">H</span>
A
B
C
D
E
F
G
H

Stepper

Vertical non-clickable stepper with finished, current and future steps.

<ul class="stepper">
  <li class="step-finished">STEP 1</li>
  <li class="step-active">STEP 2</li>
  <li class="step">STEP 3</li>
</ul>
  • STEP 1
  • STEP 2
  • STEP 3

Label

You can place default, warning, alert or success labels with custom text.

Label text always defaults to UPPERCASE.

<span class="label">LABEL</span>
<span class="label alert">ISSUE</span>
<span class="label warning">WARNING</span>
<span class="label success">OK</span>
LABEL ISSUE WARNING OK

Tooltip

Use tooltips to show information on :hover events.

<span data-tooltip="Default tooltip that expands to mulitple lines">
  <span data-tooltip-pip></span>
</span>

You can show inline information using the inline-tooltip class.

<p class="inline-tooltip">
  Retain the acpect ratio and don’t significantly alter the image.
</p>

Retain the acpect ratio and don’t significantly alter the image.

As another option, you can render a tooltip with HTML inside. Note that you'll need to add and remove the active class.

<span class="data-tooltip-pip">
  <span class="data-tooltip active">
    <p>This tag may contain HTML</p>
    <ul>
      <li>Some Tooltips need this</li>
    </ul>
  </span>
</span>

This tag may contain HTML

  • Some Tooltips need this

Notification

Use notification UI elements to show page specific notifications.

<div class="notification">
  <i class="icon icon-right--spacing ui-3_alert"></i>
  Notification! Just to grab your attention.
</div>
Notification! Just to grab your attention.
<div class="notification">
  This notification is closeable.
  <button type="button"></button>
</div>
This notification is closeable.

Inline Notification

Use inline-notification to show messages inside another UI element.

<div class="inline-notification info">
  This is an info inline notification
</div>
<div class="inline-notification alert">
  This is an alert inline notification
</div>
<div class="inline-notification success">
  This is a success inline notification
</div>
This is an info inline notification
This is an alert inline notification
This is a success inline notification

Global Alert

Use global-alert UI elements to show global messages, ie success / failure messages.

These alerts are designed to stack up in the bottom-right corner of the application in which they are contained.

<div class="global-alert-wrapper">
  <!-- Success alert -->
    <div class="global-alert success">
      <i class="global-alert-icon icon ui-1_check"></i>
      Success message
    </div>
    <!-- Error alert -->
    <div class="global-alert alert">
      <i class="global-alert-icon icon ui-1_bell-53"></i>
      Error message
    </div>
    <!-- Error alert with close button -->
    <div class="global-alert alert">
      <i class="global-alert-icon icon ui-1_bell-53"></i>
      Error message with button
      <button type="button" class="global-alert-close-button">
        <i class="icon ui-1_circle-remove"></i>
      </button>
    </div>
</div>
Success message
Error message
Error message with button

Dropdown

This UI element consists of two blocks, the dropdown-trigger and the dropdown-pane.

Dropdown closed (default)

The label for each dropdown is enforced to CAPITALIZATION by default.

<div class="dropdown">
  <div class="dropdown-trigger">
    <label>DROPDOWN LABEL:</label>
    <button>SELECTION</button>
  </div>
  <div class="dropdown-pane">
    <!-- Insert content here. Hidden by default -->
  </div>
</div>

Dropdown opened

To force the open state for dropdowns include the .expanded class in the dropdown-trigger and dropdown-pane blocks.

<div class="dropdown">
  <div class="dropdown-trigger expanded">
    <label>DROPDOWN LABEL:</label>
    <button>SELECTION</button>
  </div>
  <div class="dropdown-pane expanded">
    <div class="dropdown-pane-section dropdown-pane-search">
      <!-- HEADER  -->
      <i class="icon ui-1_zoom"></i>
      <input type="text" class="dropdown-search" placeholder="Search..." />
    </div>
    <div class="dropdown-pane-section dropdown-pane-list">
      <!-- CONTENT  -->
      <div class="dropdown-option">
        FOO
      </div>
      <div class="dropdown-option active">
        BAR
      </div>
      <div class="dropdown-option">
        BAZ
      </div>
    </div>
    <div class="dropdown-pane-section">
      <button class="button-trigger primary"> DONE </button>
      <button class="button-trigger"> CANCEL </button>
    </div>
  </div>
</div>
Dropdown pane trigger with only label

To setup a dropdown trigger with onle the label text add the dropdown-trigger--label-only class to the dropdown-trigger element.

<div class="dropdown">
  <div class="dropdown-trigger dropdown-trigger--label-only">
    <label>DROPDOWN LABEL</label>
  </div>
  <div class="dropdown-pane expanded">
    <div class="dropdown-pane-section dropdown-pane-list">
      <div class="dropdown-option">FOO</div>
      <div class="dropdown-option">BAR</div>
      <div class="dropdown-option">BAZ</div>
    </div>
  </div>
</div>
Dropdown pane with checklist
<div class="dropdown">
  <div class="dropdown-trigger dropdown-trigger--label-only">
    <label>DROPDOWN LABEL</label>
  </div>
  <div class="dropdown-pane expanded">
    <div class="dropdown-pane-section dropdown-pane-list">
      <div class="dropdown-option checkbox">
        <input type="checkbox" id="dropdown-option-1">
        <label for="dropdown-option-1"> OPTION 1 </label>
      </div>
      <div class="dropdown-option checkbox">
        <input type="checkbox" id="dropdown-option-2">
        <label for="dropdown-option-2"> OPTION 2 </label>
      </div>
    </div>
    <div class="dropdown-pane-section">
      <button class="button-trigger primary"> DONE </button>
      <button class="button-trigger"> CANCEL </button>
    </div>
  </div>
</div>
Dropdown pane stacking

To stack the dropdown-pane pip to the right use the class .stack-right

<div class="dropdown">
  <div class="dropdown-trigger">
    <label>DROPDOWN LABEL:</label>
  </div>
  <div class="dropdown-pane expanded stack-right">
    <div class="dropdown-pane-section dropdown-pane-list">
      <div class="dropdown-option">FOO</div>
      <div class="dropdown-option">BAR</div>
      <div class="dropdown-option">BAZ</div>
    </div>
  </div>
</div>
Dropdown trigger with icon only

Dropdown triggers that only have icons should be defined with the dropdown-trigger--icon class.

<div class="dropdown">
  <div class="dropdown-trigger dropdown-trigger--icon">
    <button type="button">
     <i class="icon users_circle-08 x3"></i>
   </button>
  </div>
</div>
Dropdown triggers that are placed in leading components can be defined with the dropdown-trigger--lead class.

<div class="dropdown">
  <div class="dropdown-trigger dropdown-trigger--lead">
    <button type="button">
      <i class="icon ui-1_eye-17 x3 icon--right-spacing"></i> PREDEFINED VIEW
    </button>
  </div>
</div>

Switch box

Use switch box to handle on/off events.

Switch box off (default)

<div class="switch-box__wrapper">
  <div class="switch-box">
    <input type="checkbox" value="on" id="switch-box-default" name="switch-box-default" />
    <label for="switch-box-default"></label>
  </div>
  <span>DISABLED</span>
</div>
DISABLED

Switch box on

<div class="switch-box__wrapper">
  <div class="switch-box">
    <input type="checkbox" value="on" id="switch-box" name="switch-box" checked />
    <label for="switch-box"></label>
  </div>
  <span class="active">FOO</span>
</div>
FOO

Switch box disabled (off)

<div class="switch-box__wrapper">
  <div class="switch-box">
    <input type="checkbox" value="on" id="switch-box" name="switch-box" disabled/>
    <label for="switch-box"></label>
  </div>
  <span class="disabled">DISABLED OFF</span>
</div>
DISABLED OFF

Switch box disabled (on)

<div class="switch-box__wrapper">
  <div class="switch-box">
    <input type="checkbox" value="on" id="switch-box" name="switch-box" checked disabled/>
    <label for="switch-box"></label>
  </div>
  <span class="active disabled">DISABLED ON</span>
</div>
DISABLED ON

Color Picker

The picker has a dependency on jquery-minicolors, with the following configuration settings:

$('.color-picker-swatch').minicolors({
  inline: true,
  format: 'hex',
  control: 'saturation',
});

The color picker is built within the Dropdown ui element with the following setup:

<div class="dropdown color-picker-dropdown">
  <div class="color-picker-trigger">
    <span class="color-picker-title">Select color</span>
    <span class="color-picker-preview" style="background-color: #FF0000"></span>
  </div>
  <div class="dropdown-pane expanded vertical-offset-small">
    <div class="dropdown-pane-section">
      <div class="color-picker">
        <span class="color-picker-preview" style="background-color: #FF0000"></span>
        <input class="color-picker-value" placeholder="Select HEX color" value="#FF0000"/>
      </div>
    </div>
    <div class="dropdown-pane-section no-spacing">
      <input class="color-picker-swatch" value="#FF0000"/>
    </div>
    <div class="dropdown-pane-section">
      <button class="button-trigger primary"> DONE </button>
      <button class="button-trigger"> CANCEL </button>
    </div>
  </div>
</div>

When no color value is set for the dropdown trigger you can preview a transparent pattern using the .transparent-color class.

<div class="dropdown color-picker-dropdown">
  <div class="color-picker-trigger">
    <span class="color-picker-title">Select color</span>
    <span class="color-picker-preview transparent-color"></span>
  </div>
  <div class="dropdown-pane expanded">
    ...
  </div>
</div>

Searchable List

The Searchable List consists in a general element searchable-list wrapps two blocks: search-wrapper and item-wrapper.

<div class="searchable-list">
  <div class="searchable-list-search-wrapper">
    <div class="icon searchable-list-icon ui-1_zoom"></div>
    <input class="searchable-list-input" name="search-item-input" type="text" placeholder="Search items...">
  </div>
  <ul class="searchable-list-item-wrapper">
    <li class="searchable-list-item">
      <span>First option</span>
    </li>
    <li class="searchable-list-item searchable-list-item--selected">
      <span>First option</span>
    </li>
    <li class="searchable-list-item">
      <span>Third option</span>
    </li>
  </ul>
</div>
  • First option
  • Second option
  • Third option

Searchable List can be used in conjuction with app-icon-block items

<div class="searchable-list">
  <div class="searchable-list-search-wrapper">
    <div class="icon searchable-list-icon ui-1_zoom"></div>
    <input class="searchable-list-input" name="search-item-input" type="text" placeholder="Search items...">
  </div>
  <ul class="searchable-list-item-wrapper">
    <li class="searchable-list-item searchable-list-item">
      <div class="app-icon-block small">
        <div class="app-icon" style="background-image: url(https://s3.amazonaws.com/avocarrot-style-guide/4.0/images/common/app-icons/f44336.jpg)">F</div>
        <div class="app-icon-block-text-block">
          <div class="app-icon-block-name app-icon-block-truncate">First Item</div>
          <div class="app-icon-block-subtitle app-icon-block-truncate">Some details</div>
        </div>
      </div>
    </li>
    <li class="searchable-list-item searchable-list-item--selected">
      <div class="app-icon-block small">
        <div class="app-icon" style="background-image: url(https://s3.amazonaws.com/avocarrot-style-guide/4.0/images/common/app-icons/673ab7.jpg)">S</div>
        <div class="app-icon-block-text-block">
          <div class="app-icon-block-name app-icon-block-truncate">Second Item</div>
          <div class="app-icon-block-subtitle app-icon-block-truncate">Some details</div>
        </div>
      </div>
    </li>
    <li class="searchable-list-item">
      <div class="app-icon-block small" >
        <div class="app-icon" style="background-image: url(https://s3.amazonaws.com/avocarrot-style-guide/4.0/images/common/app-icons/009688.jpg)">T</div>
        <div class="app-icon-block-text-block">
          <div class="app-icon-block-name app-icon-block-truncate">Third item</div>
          <div class="app-icon-block-subtitle app-icon-block-truncate">Some details</div>
        </div>
      </div>
    </li>
  </ul>
</div>
  • F
    First Item
    Some details
  • S
    Second Item
    Some details
  • T
    Third item
    Some details

Card

This component will be used for containing Network and other card-like components.

<div class="card">
  <p class="card__title">A simple card</p>
  <p>
    Just a demo text. You can use any content inside.
    Keep in mind that columns should be handled by the
    children. Not this card element.
  </p>
</div>

A simple card

Just a demo text. You can use any content inside. Keep in mind that columns should be handled by the children. Not this card element.

Card Disabled

This component will be used for containing Network and other card-like components.

<div class="card card-disabled">
  <p class="card__title">A simple disabled card</p>
  <p>
    Just a demo text. You can use any content inside.
    Keep in mind that columns should be handled by the
    children. Not this card element.
  </p>
</div>

A simple disabled card

Just a demo text. You can use any content inside. Keep in mind that columns should be handled by the children. Not this card element.


App Icon Block (small)

The App Icon Block has a block wrapper `app-icon-block` with two inner blocks.

<div class="app-icon-block small">
  <span class="app-icon" style="background-image: url(https://s3.amazonaws.com/avocarrot-style-guide/4.0/images/common/app-icons/f44336.jpg)">A</span>
  <div class="app-icon-block-text-block">
    <div class="app-icon-block-name app-icon-block-truncate">App name</div>
    <div class="app-icon-block-subtitle app-icon-block-truncate">App details</div>
  </div>
</div>
A
App name
App details

App Icon Block

The App Icon Block has a block wrapper `app-icon-block` with two inner blocks.

<div class="app-icon-block">
  <span class="app-icon" style="background-image: url(https://s3.amazonaws.com/avocarrot-style-guide/4.0/images/common/app-icons/f44336.jpg)">A</span>
  <div class="app-icon-block-text-block">
    <div class="app-icon-block-name app-icon-block-truncate">App name</div>
    <div class="app-icon-block-subtitle app-icon-block-truncate">App details</div>
  </div>
</div>
A
App name
App details

Adunit Block

The Adunit Block consists of the a title and a subittle

<div class="adunit-block">
  <div class="adunit-block__title">Adunit name</div>
  <div class="adunit-block__subtitle">ADTYPE: CUSTOM</div>
</div>
Adunit name
ADTYPE: CUSTOM

Country flags

Country flags are based on top of https://github.com/lipis/flag-icon-css.

<span class="flag-icon flag-icon-global"></span>
<span class="flag-icon flag-icon-us"></span>
<span class="flag-icon flag-icon-au"></span>
<span class="flag-icon flag-icon-de"></span>

Copyable Input

This input can be used in conjuction with Clipboard.js

<div class="copyable-input">
  <button class="copyable-input__trigger" data-clipboard-text="6bc861cf-b64a-4281-8b0d-0da33ff56225">
    <i class="icon files_single-copy-04"></i>
  </button>
  <input class="copyable-input__value" type="text" value="6bc861cf-b64a-4281-8b0d-0da33ff56225">
</div>

When the trigger is clicked include .copyable-input__tooltip span

<div class="copyable-input">
  <span class="copyable-input__tooltip" data-text="Copied to clipboard"></span>
  <button class="copyable-input__trigger" data-clipboard-text="6bc861cf-b64a-4281-8b0d-0da33ff56225">
    <i class="icon files_single-copy-04"></i>
  </button>
  <input class="copyable-input__value" type="text" value="6bc861cf-b64a-4281-8b0d-0da33ff56225">
</div>

Date picker

The date picker is based on Pikaday. To stack the date picker on top of its parent component include the date-picker__container--stack-top class.

See Pikaday documentation


<div class="date-picker__container date-picker__container--stack-top">
  <input id="pikaday-input" type="hidden">
</div>
<script>
  var picker = new window.Pikaday({
    field: document.getElementById('pikaday-input')
  });
</script>

Metric Box

A .metric-box must contain a title and a value.

<div class="metric-box">
  <p class="metric-box__title">
    Adspend
  </p>
  <span class="metric-box__value">$7.522</span>
</div>

Adspend

$7.522

You can optionally include a tooltip.

<div class="metric-box">
  <p class="metric-box__title">
    CTR <span data-tooltip="Tooltip text"><span data-tooltip-pip></span></span>
  </p>
  <span class="metric-box__value">25.6%</span>
</div>

CTR

25.6%

Filter

A .filter must have a title and a button and can contain one more selections.

<div class="filter bottom-spacing-half-x">
  <span class="filter__title"> Title </span>
  <ul class="filter__options">
    <li>
      <div class="filter__option">
        <span class="filter__option__title">Country: USA, Greece</span> <span class="filter__option__dismiss"></span>
      </div>
    </li>
  </ul>
  <button class="filter__button">ADD A FILTER</button>
</div>
Title
    Title
    • Country: USA, Greece