ABC Supply Style Guide

Color

All colors have 2 darker shades and 5 lighter shades. Just append a '-d{number}' or '-l{number}' to the sass variable name. When assigning colors in scss always use the sass variable.

Primary Colors

$color-sapphire-d2

$color-sapphire-d1

$color-sapphire

$color-sapphire-l1

$color-sapphire-l2

$color-sapphire-l3

$color-sapphire-l4

$color-sapphire-l5

$color-apple-d2

$color-apple-d1

$color-apple

$color-apple-l1

$color-apple-l2

$color-apple-l3

$color-apple-l4

$color-apple-l5

$color-gunmetal-d2

$color-gunmetal-d1

$color-gunmetal

$color-gunmetal-l1

$color-gunmetal-l2

$color-gunmetal-l3

$color-gunmetal-l4

$color-gunmetal-l5

$color-platinum-d2

$color-platinum-d1

$color-platinum

$color-platinum-l1

$color-platinum-l2

$color-platinum-l3

$color-platinum-l4

$color-platinum-l5

Secondary Colors

$color-green-d2

$color-green-d1

$color-green

$color-green-l1

$color-green-l2

$color-green-l3

$color-green-l4

$color-green-l5

$color-yellow-d2

$color-yellow-d1

$color-yellow

$color-yellow-l1

$color-yellow-l2

$color-yellow-l3

$color-yellow-l4

$color-yellow-l5

$color-red-d2

$color-red-d1

$color-red

$color-red-l1

$color-red-l2

$color-red-l3

$color-red-l4

$color-red-l5

$color-teal-d2

$color-teal-d1

$color-teal

$color-teal-l1

$color-teal-l2

$color-teal-l3

$color-teal-l4

$color-teal-l5

$color-blue-d2

$color-blue-d1

$color-blue

$color-blue-l1

$color-blue-l2

$color-blue-l3

$color-blue-l4

$color-blue-l5

$color-orange-d2

$color-orange-d1

$color-orange

$color-orange-l1

$color-orange-l2

$color-orange-l3

$color-orange-l4

$color-orange-l5

$color-purple-d2

$color-purple-d1

$color-purple

$color-purple-l1

$color-purple-l2

$color-purple-l3

$color-purple-l4

$color-purple-l5

Typography

Headings

        The quick brown fox jumps over the lazy dog
        The quick brown fox jumps over the lazy dog
        The quick brown fox jumps over the lazy dog
        The quick brown fox jumps over the lazy dog
        The quick brown fox jumps over the lazy dog
        The quick brown fox jumps over the lazy dog
    

Paragraphs

Nihil molestiae consequatur, vel illum qui dolorem eum. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam. Lorem ipsum dolor sit amet, consectetur adipisicing elit.Corrupti quos dolores et quas molestias excepturi sint occaecati. Totam rem aperiam. Fugiat quo voluptas nulla pariatur? Esse cillum dolore eu fugiat nulla pariatur. Eaque ipsa quae ab illo inventore veritatis et quasi.

Type Sizes

Type Size Base

Type Size 1

Type Size 2

Type Size 3 - Default Size

Type Size 4

Type Size 5

Type Size 6

Type Size 7

Type Size 8

Grid

Based on the 12 column Flexbox Grid.

Accordion

Based on the collapse Bootstrap component.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Alert

Based on the alerts Bootstrap component. When copying alert code be sure to replace the svg code with the code in the commented i tag instead, the svg code is placed dynamically through javascript.

Something happened, but who cares.

Something happened, and it's fantastic!

Something happened, and it's somewhat troubling...

Something happened, and we're all going to die!

Something happened, here's what you should know.

Fixed Alert

Notifications

Alerts that are merely used to notify the user more passively can be put into a notification alert. Based on their usage they can be placed in different places on the page vertically (.alert--top) and horizontally (.alert--right)

Badge

Based on the badges Bootstrap component.

Badge Types

Default

Success

Danger

Warning

Info

Neutral

Badge Sizes

Small

Default

Large

Breadcrumb

Based on the breadcrumb Bootstrap component.

Button

Button Types

Button Sizes

Card

Standard Card

Nihil molestiae consequatur, vel illum qui dolorem eum. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti quos dolores et quas molestias excepturi sint occaecati.

Card with Sidebar

Nihil molestiae consequatur, vel illum qui dolorem eum. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti quos dolores et quas molestias excepturi sint occaecati.

Card Depths

Nihil molestiae consequatur, vel illum qui dolorem eum.

Data Table

Default table not using any frameworks.

Column 1	Column 2	Column 3
Column 1 Row 1	Column 2 Row 1	Column 3 Row 1
Column 1 Row 2	Column 2 Row 2	Column 3 Row 2
Column 1 Row 3	Column 2 Row 3	Column 3 Row 3
Column 1 Row 4	Column 2 Row 4	Column 3 Row 4
Column 1 Row 5	Column 2 Row 5	Column 3 Row 5

Dropdown

Based on the dropdowns Bootstrap component.

Form

Input Fields

Text

Ghost Input

Email Address

Password

Invalid

Disabled

Add-On Element

Select

Multiple Select

Text Area

Input Sizes

Extra Small

Small

Default

Large

Extra Large

Checkboxes

Checkbox

Disabled Checkbox

Radios

Radio 1

Radio 2

Disabled Radio

Toggle Switch

Do you like toggles?

Are you sure?

One more chance, do you like them?

I am disabled. :(

Grid List

An adaptable responsive list view to accommodate large table style data sets. In order to work properly in all browsers and configurations, grid columns/rows and cell positions must be explicitly defined in the css. The number of columns and rows will be different depending on the data set. You can use media queries to reconfigure the cell positions, sizes, etc.

Data Column 1
Data Column 2
Data Column 3
Data Column 4
Data Column 5
Data Column 1
Data Column 2
Data Column 3
Data Column 4
Data Column 5
Data Column 1
Data Column 2
Data Column 3
Data Column 4
Data Column 5
Data Column 1
Data Column 2
Data Column 3
Data Column 4
Data Column 5

Icon

Icons are output using SVG with Javascript by Font Awesome. Although this uses the SVG with JS function from Font Awesome, the icons themselves are custom. Click any icon to copy the proper code to your clipboard.

Default Icons

Search

Bars

Bell

Calendar

Caret Down

Caret Left

Caret Right

Caret Up

Check

Chevron Down

Chevron Left

Chevron Right

Chevron Up

Clock

Cog

Comment

Ellipsis H.

Ellipsis V.

Map Marker

Plus

Minus

Pencil

Redo

Sync

Times

Trash

User

Undo

Envelope

Fax

Arrow Left

Arrow Right

Close

Desktop

Document

Truck

Question

Exclamation

Info

Denied

Favorite

Globe

Phone

Drag

Filter

Clipboard

Dollar Sign

Lock

Lock - Open

Express

Dollar

Paperclip

Icon Sizes

Size 1

Size 2

Size 3

Size 4

Size 5

Size 6

Size 7

Size 8

Size 9

Size 10

Icons with Backgrounds

Circle

Square

Layered Icons

Icons can be layered to create more complex icons.

Invoice

Infobox

An infobox is to be used as helper text for accompanying content. This element is not to be confused with an alert element. Alerts are reactive while infoboxes are static.

                
                    Note: This is some information you should know about this content that may be helpful to the task at hand.

                
                    Note: This is some information you should know about this content that may be helpful to the task at hand.

                
                    Note: This is some information you should know about this content that may be helpful to the task at hand.

                
                    Note: This is some information you should know about this content that may be helpful to the task at hand.

                
                    Note: This is some information you should know about this content that may be helpful to the task at hand.

                
                    Note: This is some information you should know about this content that may be helpful to the task at hand.

Loader

Default Dot Loader

Light Dot Loader

Default Spinning Loader

Small Spinning Loader

Large Spinning Loader

Light Spinning Loader

Button Loader

Modal

Based on the modal Bootstrap component. Width can be changed with modifiers (.modal--extra-small, etc.)

Pagination

First Prev 1 2 3 4 Next Last

Panel

Modification of the modal Bootstrap component. Width can be changed with modifiers (.panel--extra-small, etc.)

Popover

Based on the popovers Bootstrap component. Popovers need to be initialized by javascript (View the source, Luke).

Progress

Based on the progress Bootstrap component.

20%

Segment

Default

Expanded

Tab

Based on the tabs behavior of the navs Bootstrap component.

Tab Content One

Nihil molestiae consequatur, vel illum qui dolorem eum. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam. Lorem ipsum dolor sit amet, consectetur adipisicing elit.Corrupti quos dolores et quas molestias excepturi sint occaecati.

Tab Content Two

Nihil molestiae consequatur, vel illum qui dolorem eum. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam. Lorem ipsum dolor sit amet, consectetur adipisicing elit.Corrupti quos dolores et quas molestias excepturi sint occaecati.

Tab Content Three

Nihil molestiae consequatur, vel illum qui dolorem eum. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam. Lorem ipsum dolor sit amet, consectetur adipisicing elit.Corrupti quos dolores et quas molestias excepturi sint occaecati.

Tool Tip

Based on the tooltips Bootstrap component. Tool tips need to be initialized by javascript (View the source, Luke).

Introduction

Get Started

Color

Primary Colors

Secondary Colors

Typography

Headings

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Paragraphs

Type Sizes

Grid

Accordion

Accordion Item #1

Accordion Item #2

Accordion Item #3

Alert

Fixed Alert

Notifications

Badge

Badge Types

Badge Sizes

Breadcrumb

Button

Button Types

Button Sizes

Card

Standard Card

Card Default

Card with Sidebar

Sidebar Content

Card with Sidebar

Card Depths

Depth 0

Depth 1

Depth 2

Depth 3

Depth 4

Depth 5

Data Table

Dropdown

Form

Input Fields

Input Sizes

Checkboxes

Radios

Toggle Switch

Grid List

Icon

Default Icons

Icon Sizes

Icons with Backgrounds

Layered Icons

Infobox

Loader

Default Dot Loader

Light Dot Loader

Default Spinning Loader

Small Spinning Loader

Large Spinning Loader

Light Spinning Loader

Button Loader

Modal

Pagination

Panel

Popover

Progress

Segment

Default

Expanded

Tab

Tab Content One

Tab Content Two

Tab Content Three

Tool Tip