Components

There are many styles available for default styling of tables, buttons, and forms that you can use in your applications.

3.1 _config.scss Back To Top

Esri Brand Color Pallete

An extensive set of color variables are set up inside of config. Color names are generally semantic and simple, making them very easy to remember. Color variables are references like any other sass variable:

.element-to-style{
  color: $gray;
}

Greens

lightest-green

lighter-green

light-green

green

dark-green

Brights

orange

yellow

red

caution

caution-light

Purples

lightest-purple

lighter-purple

light-purple

purple

dark-purple

Blues

lightest-blue

lighter-blue

light-blue

blue

dark-blue

darker-blue

Earth Tones

light-tan

tan

dark-tan

lighter-brown

light-brown

brown

dark-brown

Neutrals

white

off-white

lightest-gray

lighter-gray

light-gray

gray

dark-gray

darker-gray

darkest-gray

off-black

black

3.1.2 _config.scss Back To Top

Calcite Colors

A preliminary set of colors from the new Calcite theme.

Grays

gray1

gray2

gray3

gray4

gray5

gray6

gray7

gray8

gray9

gray10

gray11

gray12

UI Colors

calcite-ui-blue-1

calcite-ui-blue-2

calcite-esri-blue-light

calcite-esri-blue

calcite-esri-blue-dark

calcite-green

calcite-red

Ribbons

ribbon-orange

ribbon-orange-light

ribbon-green

ribbon-green-light

ribbon-red

ribbon-red-light

ribbon-purple

ribbon-purple-light

ribbon-brown

ribbon-brown-light

Icons

icon-blue

icon-blue-light

icon-blue-lighter

icon-blue-lightest

icon-yellow

icon-yellow-light

icon-yellow-lighter

icon-yellow-lightest

icon-orange

icon-orange-light

icon-orange-lighter

icon-orange-lightest

icon-green

icon-green-light

icon-green-lighter

icon-green-lightest

icon-red

icon-red-light

icon-red-lighter

icon-red-lightest

icon-purple

icon-purple-light

icon-purple-lighter

icon-purple-lightest

icon-brown

icon-brown-light

icon-brown-lighter

icon-brown-lightest

3.2 _icon.scss Back To Top

Icons

Icons are created with an icon font. Giving an html element of icon-example will put the "example" icon in a pseudo element before the html element. A simple example might look something like:

<h3 class="icon-globe"> Around the World </h3>

.icon-green - Makes the icon green
.icon-blue - Makes the icon blue
.icon-purple - Makes the icon purple
.icon-orange - Makes the icon orange
.icon-gray - Makes the icon gray

default

icon-green

.icon-green

icon-blue

.icon-blue

icon-purple

.icon-purple

icon-orange

.icon-orange

icon-gray

.icon-gray

<h3 class="icon-globe"> </h3>

3.2.1 _icon.scss Back To Top

Available Icons

Use the icon class of the particular icon you'd like to show with it's specific class. You can also add one of the color helper classes outlined above in conjunction with the icon like this:

 <h3 class="icon-globe icon-green"> Green Globe </h3>

This will create a green globe icon.

All available icon classes are outlined below:

.icon-gauge - Gauge Icon
.icon-announcement - Announcement Icon
.icon-caution-cone - Caution cone Icon
.icon-light-bulb - Light-bulb Icon
.icon-lightbulb - Lightbulb with fill
.icon-comment - Comment Icon
.icon-battery - Battery Icon
.icon-laptop - Laptop Icon
.icon-globe - Globe Icon
.icon-graph-bar - Graph bar Icon
.icon-window-alert - Window alert Icon
.icon-search - Search Icon
.icon-tags - Tags Icon
.icon-refresh - Refresh Icon
.icon-window-lines - Window lines Icon
.icon-book - Book Icon
.icon-open-book - Open Book
.icon-refresh-2 - Refresh Icon
.icon-search-2 - Search Icon
.icon-bookmark - Bookmark Icon
.icon-phone - Phone Icon
.icon-tag - Tag Icon
.icon-support - Support Icon
.icon-settings-2 - Settings Icon
.icon-rss - Rss Icon
.icon-email - Email Icon
.icon-pin-user - Pin user Icon
.icon-pin-geonote - Pin geonote Icon
.icon-star - Star Icon
.icon-delete - Delete Icon
.icon-data - Data Icon
.icon-data-alt - Data Icon (alt)
.icon-unlocked - Unlocked Icon
.icon-locked - Locked Icon
.icon-code - Code Icon
.icon-find - Find Icon
.icon-building - Building Icon
.icon-bug - Bug Icon
.icon-grid - Grid Icon
.icon-grid-alt - Grid Icon (alt)
.icon-help - Help Icon
.icon-gear - Gear Icon
.icon-gears - Gears Icon
.icon-map-pin - Map-pin Icon
.icon-window-cursor - Window-cursor Icon
.icon-list-2 - List Icon
.icon-window-close - Window-close Icon
.icon-alert - Alert Icon
.icon-compass - Compass Icon
.icon-edit - Edit Icon
.icon-share - Share Icon
.icon-camera - Camera Icon
.icon-exit - Exit Icon
.icon-clock - Clock Icon
.icon-locate-2 - Locate Icon
.icon-graph-pie - Graph-pie Icon
.icon-analytics - Analytics Icon
.icon-eye-open - Eye-open Icon
.icon-list - List Icon
.icon-map-trail - Map-trail Icon
.icon-airplane - Airplane Icon
.icon-star-2 - Star Icon
.icon-window-console - Window-console Icon
.icon-iphone - iPhone Icon
.icon-heart - Heart Icon
.icon-user - User Icon
.icon-community - Community Icon
.icon-home - Home Icon
.icon-google-plus - Google Plus Icon
.icon-linked-in - Linked-in Icon
.icon-play - Play Icon
.icon-twitter - Twitter Icon
.icon-check - Check Icon
.icon-apple - Apple Icon
.icon-locate - Locate Icon
.icon-tag-2 - Tag Icon
.icon-plus - Plus Icon
.icon-cancel - Cancel Icon
.icon-close - Close Icon
.icon-minus - Minus Icon
.icon-github - GitHub Icon
.icon-android - Android Icon
.icon-facebook - Facebook Icon
.icon-polyline - Polyline Icon
.icon-polygon - Polygon Icon
.icon-pin-add - Pin-add Icon
.icon-pin-user-add - Pin-user-add Icon
.icon-pin-geonote-add - Pin-geonote-add Icon
.icon-pin - Pin Icon
.icon-windows-8 - Windows-8 Icon
.icon-windows-classic - Windows-classic Icon
.icon-stack-exchange - Stack-exchange Icon
.icon-java - Java Icon
.icon-flex - Flex Icon
.icon-list-view - List-view Icon
.icon-storage - Storage Icon
.icon-cloud - Cloud Icon
.icon-geotrigger - Geotrigger Icon
.icon-directions - Directions Icon
.icon-geo - Geo Icon
.icon-select-toggle - Select-toggle Icon
.icon-javascript - Javascript Icon
.icon-location-context - Location-context Icon
.icon-rest - REST Icon
.icon-left-arrow - Left-arrow Icon
.icon-right-arrow - Right-arrow Icon
.icon-loading - Loading Icon
.icon-jquery - jQuery Icon
.icon-external-link - External Link Icon
.icon-html5 - HTML5 Icon
.icon-html5-alt - HTML5 Icon (alt)
.icon-map - Simple Map Outline
.icon-video - Video Camera Icon
.icon-stopwatch - Stopwatch Icon
.icon-link - Link Icon
.icon-stack - Layers Icon
.icon-paint-format - Format Icon
.icon-arrow-down - Down-arrow Icon
.icon-arrow-up - Up-arrow Icon
.icon-push-right - Push-right Icon
.icon-push-left - Push-left Icon
.icon-checked - Checked-box Icon
.icon-unchecked - Unchecked-box Icon
.icon-table - Table Icon
.icon-sort-down-2 - Sort-Down Icon
.icon-sort-up-2 - Sort-Up Icon
.icon-notebook - Notebook Icon
.icon-legacy - Legacy Icon
.icon-key - Key
.icon-beaker - Lab Beaker
.icon-more - Ellipsis Icon
.icon-filter - Filter Icon
.icon-navigation - Navigation Icon
.icon-la-point - LA Point Icon
.icon-fork - GitHub Fork or Branch
.icon-heart-outline - Heart Icon (just stroke)
.icon-download - Download Icon
.icon-browser - Browser Icon
.icon-copy - Copy to Clipboard Icon
.icon-cart - Cart Icon
.icon-info - Info Icon

default

icon-gauge

.icon-gauge

icon-announcement

.icon-announcement

icon-caution-cone

.icon-caution-cone

icon-light-bulb

.icon-light-bulb

icon-lightbulb

.icon-lightbulb

icon-comment

.icon-comment

icon-battery

.icon-battery

icon-laptop

.icon-laptop

icon-globe

.icon-globe

icon-graph-bar

.icon-graph-bar

icon-window-alert

.icon-window-alert

icon-search

.icon-search

icon-tags

.icon-tags

icon-refresh

.icon-refresh

icon-window-lines

.icon-window-lines

icon-book

.icon-book

icon-open-book

.icon-open-book

icon-refresh-2

.icon-refresh-2

icon-search-2

.icon-search-2

icon-bookmark

.icon-bookmark

icon-phone

.icon-phone

icon-tag

.icon-tag

icon-support

.icon-support

icon-settings-2

.icon-settings-2

icon-rss

.icon-rss

icon-email

.icon-email

icon-pin-user

.icon-pin-user

icon-pin-geonote

.icon-pin-geonote

icon-star

.icon-star

icon-delete

.icon-delete

icon-data

.icon-data

icon-data-alt

.icon-data-alt

icon-unlocked

.icon-unlocked

icon-locked

.icon-locked

icon-code

.icon-code

icon-find

.icon-find

icon-building

.icon-building

icon-bug

.icon-bug

icon-grid

.icon-grid

icon-grid-alt

.icon-grid-alt

icon-help

.icon-help

icon-gear

.icon-gear

icon-gears

.icon-gears

icon-map-pin

.icon-map-pin

icon-window-cursor

.icon-window-cursor

icon-list-2

.icon-list-2

icon-window-close

.icon-window-close

icon-alert

.icon-alert

icon-compass

.icon-compass

icon-edit

.icon-edit

.icon-share

icon-camera

.icon-camera

icon-exit

.icon-exit

icon-clock

.icon-clock

icon-locate-2

.icon-locate-2

icon-graph-pie

.icon-graph-pie

icon-analytics

.icon-analytics

icon-eye-open

.icon-eye-open

icon-list

.icon-list

icon-map-trail

.icon-map-trail

icon-airplane

.icon-airplane

icon-star-2

.icon-star-2

icon-window-console

.icon-window-console

icon-iphone

.icon-iphone

icon-heart

.icon-heart

icon-user

.icon-user

icon-community

.icon-community

icon-home

.icon-home

icon-google-plus

.icon-google-plus

icon-linked-in

.icon-linked-in

icon-play

.icon-play

icon-twitter

.icon-twitter

icon-check

.icon-check

icon-apple

.icon-apple

icon-locate

.icon-locate

icon-tag-2

.icon-tag-2

icon-plus

.icon-plus

icon-cancel

.icon-cancel

icon-close

.icon-close

icon-minus

.icon-minus

icon-github

.icon-github

icon-android

.icon-android

icon-facebook

.icon-facebook

icon-polyline

.icon-polyline

icon-polygon

.icon-polygon

icon-pin-add

.icon-pin-add

icon-pin-user-add

.icon-pin-user-add

icon-pin-geonote-add

.icon-pin-geonote-add

icon-pin

.icon-pin

icon-windows-8

.icon-windows-8

icon-windows-classic

.icon-windows-classic

icon-stack-exchange

.icon-stack-exchange

icon-java

.icon-java

icon-flex

.icon-flex

icon-list-view

.icon-list-view

icon-storage

.icon-storage

icon-cloud

.icon-cloud

icon-geotrigger

.icon-geotrigger

icon-directions

.icon-directions

icon-geo

.icon-geo

icon-select-toggle

.icon-select-toggle

icon-javascript

.icon-javascript

icon-location-context

.icon-location-context

icon-rest

.icon-rest

icon-left-arrow

.icon-left-arrow

icon-right-arrow

.icon-right-arrow

icon-loading

.icon-loading

icon-jquery

.icon-jquery

icon-external-link

.icon-external-link

icon-html5

.icon-html5

icon-html5-alt

.icon-html5-alt

icon-map

.icon-map

icon-video

.icon-video

icon-stopwatch

.icon-stopwatch

icon-link

.icon-link

icon-stack

.icon-stack

icon-paint-format

.icon-paint-format

icon-arrow-down

.icon-arrow-down

icon-arrow-up

.icon-arrow-up

icon-push-right

.icon-push-right

icon-push-left

.icon-push-left

icon-checked

.icon-checked

icon-unchecked

.icon-unchecked

icon-table

.icon-table

icon-sort-down-2

.icon-sort-down-2

icon-sort-up-2

.icon-sort-up-2

icon-notebook

.icon-notebook

icon-legacy

.icon-legacy

icon-key

.icon-key

icon-beaker

.icon-beaker

icon-more

.icon-more

icon-filter

.icon-filter

.icon-navigation

icon-la-point

.icon-la-point

icon-fork

.icon-fork

icon-heart-outline

.icon-heart-outline

icon-download

.icon-download

icon-browser

.icon-browser

icon-copy

.icon-copy

icon-cart

.icon-cart

icon-info

.icon-info

<h3> </h3>

3.3 _button.scss Back To Top

Buttons

Buttons are created by adding a class of .btn to either a <button> or <a> element.

<a href="#" class="btn"> This is a Button </a>

or:

<button class="btn"> This is a Button </button>

For more information on setting up defaults, see 13 (Default Configuration)

Modifiers

:disabled - Lightens the button to make it look disabled
.orange - Applies the orange color (set in config)
.green - Applies the green color (set in config)
.red - Applies the red color (set in config)
.gray - Applies the gray color (set in config)
.transparent - Makes button background transparent
.btn-clear - Creates a clear button with blue border
.btn-clear.white - Creates a clear button with a white border
.btn-clear.gray - Creates a clear button with gray border
.small - Smaller Size
.large - Larger Size
.fill - Expands button to fill 100% of parent container
.success - Uses Calcite UI Green, adds success icon
.cancel - Uses Caution Light, adds cancel icon
.delete - Uses Calcite UI Red adds delete icon
.loading - Adds a loading spinner to the button

default

:disabled

.orange

.green

.red

.gray

.transparent

.btn-clear

.btn-clear.white

.btn-clear.gray

.small

.large

.fill

.success

.cancel

.delete

.loading

<button href="#" class="btn">Button</button>

3.4 _button-group.scss Back To Top

Button Group

Buttons are created by adding a class of .btn to either a <button> or <a> element.

.blue - makes the button group blue

Button 1 Button 2 Button 3

default

Button 1 Button 2 Button 3

.blue

<div class="btn-group column-24">
  <a href="#" class="active column-8">Button 1</a>
  <a href="#" class="column-8">Button 2</a>
  <a href="#" class="column-8">Button 3</a>
</div>

3.5 _tooltip.scss Back To Top

Tooltips

Use the tooltip class for pure CSS tooltips. No javascript needed. The following markup will produce an icon which when hovered over shows a tooltip:

<div class="tooltip">
  <span class="icon-help"></span>
  <div class="tooltip-wrapper">
    <p class="tooltip-content">Text to appear in the tooltip.</p>
  </div>
</div>

Tooltips will show on hover. If you'd like to show a tooltip by default, just use the show-tooltip class. Tooltips appear below their items be default.

.above - places the tooltip above the icon
.before - places tooltip to the left
.after - places tooltip to the right
.animate - animates the tooltip into place

default

.above

.before

.after

.animate

<div class="tooltip">
  <span class="icon-help"></span>
  <div class="tooltip-wrapper">
    <p class="tooltip-content">Text to appear in the tooltip.</p>
  </div>
</div>

3.6 _dropdown.scss Back To Top

Dropdowns

The framework provides a dropdown style. The dropdown happens on hover and requires no javascript.

.right-align - align the dropdown from the right of the button

default

.right-align

<div class="dropdown-navigation dropdown-wrapper">
  <a href="#" class="dropdown"> Button Text </a>
  <div class="dropdown-content">
    <div class="dropdown-menu">
      <ul>
        <li><a href="#">Option 1 this is a long title</a></li>
        <li><a href="#">Option 2</a></li>
        <li><a href="#">Option 3</a></li>
      </ul>
      <hr>
      <ul>
        <li><a href="#">Group 2 Option 1</a></li>
      </ul>
    </div>
  </div>
</div>

3.7 _alert.scss Back To Top

Alerts

Alerts can be used to notify users about events on a page or in a web applicaiton. They automatically fill their parent containers and support the .icon-* classes for adding icons to messages.

.success - Success
.error - Error
.info - Info
.success.icon-check - Success w/ Icon
.error.icon-alert - Error w/ Icon
.info.icon-lightbulb - Info w/ Icon

Something Happened Link

default

Something Happened Link

.success

Something Happened Link

.error

Something Happened Link

.info

Something Happened Link

.success.icon-check

Something Happened Link

.error.icon-alert

Something Happened Link

.info.icon-lightbulb

<div class="alert">
  Something Happened <a>Link</a>
  <a href="" class="icon-close"></a>
</div>

3.8 _breadcrumb.scss Back To Top

Breadcrumbs

A very simple default has been provided for styling breadcrumbs. Just add a class of "breadcrumbs" to a ul, and css does the rest.

.full-width - makes the breadcrumbs full-width and gives a border bottom. Use below a `navigation-bar`.

default

.full-width

<ul class="breadcrumbs">
  <li><a href="#">Level One</a></li>
  <li><a href="#">Level 2</a></li>
  <li><a href="#">Current Level</a></li>
</ul>

3.9 _pagination.scss Back To Top

Pagination

Ordered lists for pagination.

.center - centers pagination componenent within parent element

default

.center

<ol class="pagination">
  <a class="pagination-previous" href="#">
    <span class="icon-left-arrow"></span>
  </a>
  <li class='pagination-page'>
    <a href="#">1</a>
  </li>
  <li class='pagination-page'>
    <a href="#">2</a>
  </li>
  <li class='pagination-page active'>
    <a href="#">3</a>
  </li>
  <li class='pagination-page'>
    <a href="#">4</a>
  </li>
  <li class="pagination-page">
    <a href="#">5</a>
  </li>
  <a class="pagination-next" href="#">
    <span class="icon-right-arrow"></span>
  </a>
</ol>

3.10 _loader.scss Back To Top

Loader

Tailcoat has a built in animated pure-css loader for providing feedback in web apps. It is forked from ui-spinner.

default

<div class="loader">
  <span class="side side-left"><span class="fill"></span></span>
  <span class="side side-right"><span class="fill"></span></span>
  <p class="loading-word">Loading...</p>
</div>

3.11 _panel.scss Back To Top

Panels

Panels are used to call attention to copy, or create clear separation of content.

<div class="panel">
  <h4>Lorem Ipsum</h4>
  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</p>
</div>