IVORY

IVORY is a CSS framework, specially created for web applications and committed to improve the experience of users. It gives you all the basic integrants to build your pages faster and easier.

About The Journey

The First Step
The project IVORY was started in July 2012, as a side project by a Software Engineer named Lakshmikanth Vallampati. The initial idea of the project IVORY is to create the CSS library for forms.
v1
The first version of IVORY Forms released.
v2
The IVORY Forms enhanced by adding more components like grid-system(non-responsive), tooltips, tabs, accordion and toggle switch. IVORY Forms turned into IVORY Framework.
v3
The responsiveness added to v2. IVORY source code published in GitHub for the first time.
100,000 Downloads
IVORY reached new milestone.
v4
Satyasai Vallampati joined in IVORY core team. The IVORY Framework is revamped with new design system and advanced grid system. Version 4 released.

Get Started

Using NPM

Run the below command to install via npm

                
                  npm i ivoryui-ivory

Import the following files to your project

                
                  node_modules/ivoryui-ivory/ivory-icons.css 

                  node_modules/ivoryui-ivory/ivory.min.css

Using CDN

                
                  <link rel="stylesheet" href="https://unpkg.com/ivoryui-ivory/ivory.min.css" /> 

                  <link rel="stylesheet" href="https://unpkg.com/ivoryui-ivory/ivory-icons.css" />

Colors

IVORY color system is combination of 12 primary colors and a neutral color. Each color has a adequate purpose. The color system designed in a way to help create a theme that is harmonious, ensures accessible text, and distinguishes UI elements and surfaces from one another.

Color Model

Each color in IVORY's color system has 10 variants (both dark & light variants). Each variant can then be applied to your UI in different ways.

Red

#FFF1F5

#FFE8E8

#FFCCC9

#FFA8A8

#FF8787

#FF6B6B

#FA5252

#F03E3E

#E03131

#C82F2F

Pink

#FFF0F6

#FFDEEB

#FCC2D7

#FAA2C1

#F783AC

#F06595

#E64980

#D6336C

#C2255C

#A61E4D

Purple

#F8F0FC

#F3D9FA

#EEBEFA

#E599F7

#DA77F2

#CC5DE8

#BE4BDB

#AE3EC9

#9C36B5

#862E9C

Indigo

#EDF2FF

#DBE4FF

#BAC8FF

#91A7FF

#748FFC

#5C7CFA

#4C6EF5

#4263EB

#3B5BDB

#364FC7

Blue

#EAF5FF

#D7EAFC

#A6D2FF

#74B9FF

#5CACFC

#40A0FF

#2285F6

#0875E1

#005CB9

#004387

Cyan

#E3FAFC

#C5F6Fa

#99E9F2

#66D9E8

#3BC9DB

#22B8CF

#15AABF

#1098AD

#0C8599

#0B7285

Teal

#E6FCF5

#C3FAE8

#96F2D7

#63E6BE

#38D9A9

#20C997

#12B886

#0CA678

#099268

#087F5B

Green

#F6FFED

#E8FCCF

#D9F7BE

#B7EB8F

#95DE64

#84D750

#73D13D

#52C41A

#389E0D

#237804

Yellow

#FFFBE6

#FFF9D0

#FFF3BF

#FFEC99

#FFE066

#FFD43b

#FCC419

#FAB005

#F59F00

#F08C00

Orange

#FFF4E6

#FFE8CC

#FFD8A8

#FFC078

#FFA94D

#FF922B

#FD7E14

#F76707

#E8590C

#D9480F

Deep Orange

#FFF4E8

#FFEADB

#FFD8BF

#FFBB96

#FF9C6E

#FF7A45

#FA541C

#E84619

#D4380D

#BC3618

Silver

#F8F9FA

#F1F3F5

#E9ECEF

#DEE2E6

#CED4DA

#ADB5BD

#868E96

#495057

#343A40

#212529

Neutral Color Palette

Neutral color is widely used in the interface as surface color, background, borders, dividers, heading, text and etc. The neutral color palette is balanced with readability, aesthetics and usability. The neutral color palette of IVORY, as shown on the right:

#FFFFFF

#FAFAFA

#F2F2F2

#E8E8E8

#D9D9D9

#B7B7B7

#424242

#212121

#161616

#000000

Typography

Font Family

IVORY uses the Montserrat Font Family designed by Julieta Ulanovsky, to greatly enhance the user experience and elegance of the interface. IVORY use Montserrat as the base font and then also provides a set of fallback font libraries to maintain readability for screens on different platforms and browsers.

font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;

Font Weight

Montserrat font family has 10 differnt font-weights from 100 to 900. For good readability, IVORY prefers to use light(300), regular(400), medium(500), semi-bold(600), bold(700) font weights.

Montserrat 700 Montserrat 600 Montserrat 500 Montserrat 400 Montserrat 300

IVORY type system has 11 styles.

Style	Font Weight	Font Size	Line Height
Heading1	500	32px	44px
Heading2	500	28px	40px
Heading3	500	24px	36px
Heading4	500	20px	32px
Heading5	600	18px	30px
Heading6	500	16px	28px
Heading6 Bold	600	16px	28px
Body Text	400	14px	28px
P Bold	500	14px	20px
Small	500	12px	24px
Small Bold	600	12px	24px
Small Label	400	12px	24px

Text Links

Text Link

Icons

IVORY provides a consistent and unique icon set that were friendly and approachable.

To use IVORY icons, first make sure ivory-icons.css file loading in your page. Every icon listed below has unique name, add the same name to the class of the element with ivory-icon- prefix.

Note: Currently IVORY icon library has 71 icons and more will be added.

Directional Icons

angle-down

angle-left

angle-right

angle-up

angle-down-circle

angle-left-circle

angle-right-circle

angle-up-circle

arrow-down

arrow-left

arrow-right

arrow-up

Suggested Icons

attention

check

check-circle

help

info

minus-circle

plus-circle

times

times-circle

warning

Application Icons

attachment

bell

calendar

chat

clock

cloud

download

envelope

eye

eye-hide

file-copy

file-text

file

filter

fire

forward

home

hour-glass

inbox

key

launch

layers

leaf

link

location

map

minimize

paper-plane

reply

resize

search

settings

trash

upload

user

Commerce Icons

cart

wallet

Media Icons

audio

brightness

camera

headphone

printer

webcamera

wifi

Technology Icons

database

Social Icons

like

share

star

tag

Alerts

Basic

IVORY has success, info, warning and error alert types.

Success Text

Info Text

Warning Text

Error Text

                
                  <div class="ivory-alert success">

                    Success Text

                  <div>


                  <div class="ivory-alert info">

                    Info Text

                  </div>


                  <div class="ivory-alert warning">

                    Warning Text

                  </div>


                  <div class="ivory-alert error">

                    Error Text

                  </div>

Icons

A relevant icon will make information clearer and more friendly.

Success Text

Info Text

Warning Text

Error Text

                
                  <div class="ivory-icon-alert success">

                    <i class="alert-icon ivory-icon-check-circle"></i>

                    Success Text

                  <div>


                  <div class="ivory-alert info">

                    <i class="alert-icon ivory-icon-info"></i>

                    Info Text

                  </div>


                  <div class="ivory-alert warning">

                    <i class="alert-icon ivory-icon-warning"></i>

                    Warning Text

                  </div>


                  <div class="ivory-alert error">

                    <i class="alert-icon ivory-icon-attention"></i>

                    Error Text

                  </div>

Actions

Success Text

Info Text

Warning Text

Error Text

                
                  <div class="ivory-alert success">

                    <i class="alert-icon ivory-icon-check-circle"></i>

                    Success Text

                    <span class="alert-action">

                      <i class="ivory-icon-times"></i>

                    </span>

                  <div>


                  <div class="ivory-alert info">

                    <i class="alert-icon ivory-icon-info"></i>

                    Info Text

                    <span class="alert-action">

                      <i class="ivory-icon-times"></i>

                    </span>

                  </div>


                  <div class="ivory-alert warning">

                    <i class="alert-icon ivory-icon-warning"></i>

                    Warning Text

                    <span class="alert-action">

                      <i class="ivory-icon-times"></i>

                    </span>

                  </div>


                  <div class="ivory-alert error">

                    <i class="alert-icon ivory-icon-attention"></i>

                    Error Text

                    <span class="alert-action">

                      <i class="ivory-icon-times"></i>

                    </span>

                  </div>

Badges

Badge is a status descriptor for UI elements. Badge normally appears in proximity to notifications with eye-catching appeal.

Standalone Badge

5 5 5 5

                
                  <span class="ivory-badge">5</span>

                  <span class="ivory-badge success">5</span>

                  <span class="ivory-badge warning">5</span>

                  <span class="ivory-badge error">5</span>

Basic Badge

⁹ ⁹⁹ ⁹⁹⁹ ⁹⁹⁹⁺

                
                  <span class="ivory-badge-group">

                    <sup class="ivory-badge error">9</sup>

                  </span>

Dot Badge

link

                
                  <span class="ivory-badge-group">

                    ...

                    <sup class="ivory-badge red dot"></sup>

                  </span>

Buttons

Buttons are user interface elements which allows users to take actions throughout the project. It is important that they have ample click space and help communicate the importance of their actions.

IVORY provides 3 styles of buttons, in 2 sizes. Each style is explained below, detailing how and where to use these styles.

Solid Buttons
Outline Buttons
Flat Buttons

Note: IVORY also provides rounded buttons in solid & outline styles.

Default Buttons

In IVORY secondary style buttons are the default buttons. To incorporate these, use .ivory-btn class for solid button, .ivory-btn-o class for outline button, and .ivory-btn-f for flat button.

Rounded edge buttons are only available in solid & outline styles. To get the rounded edge buttons use .btn-ro class along with the above classes.

                    
                      <button class="ivory-btn">Default</button>

                      <button class="ivory-btn btn-ro>Default</button>

                      <button class="ivory-btn-o">Default</button>

                      <button class="ivory-btn-o btn-ro">Default</button>

                      <button class="ivory-btn-f">Default</button>

Primary Buttons

IVORY primary buttons are defined with blue color. Use .btn-primary class along with the button style class.

Solid Buttons

Solid buttons are used to highlight the most important actions. To avoid confusing users, don’t use more than one primary solid button within a section or view.

                
                  <button class="ivory-btn btn-primary">Confirm</button>

                  <button class="ivory-btn btn-primary btn-sm">Confirm</button>

                  <button class="ivory-btn btn-primary btn-ro">Confirm</button>

                  <button class="ivory-btn btn-primary btn-ro btn-sm">Confirm</button>

Outline Buttons

                
                  <button class="ivory-btn-o btn-primary">Confirm</button>

                  <button class="ivory-btn-o btn-primary btn-sm">Confirm</button>

                  <button class="ivory-btn-o btn-primary btn-ro">Confirm</button>

                  <button class="ivory-btn-o btn-primary btn-ro btn-sm">Confirm</button>

Flat Buttons

Flat buttons have significant purpose, don't get confused with hyperlink. Flat buttons can be used inline scenarios where user can identify this as a button.

                
                  <button class="ivory-btn-f btn-primary">Confirm</button>

                  <button class="ivory-btn-f btn-primary btn-sm">Confirm</button>

Disabled Buttons

IVORY provides 2 ways to disable the button. One is disabled attribute, other way is .disabled class.

Action-based color

Different colors may be used based on the severity/purpose of an action's result. For example, using a red button when "deleting" files indicates high severity. Same way, green button to indicates go-ahead.

                
                  <button class="ivory-btn btn-primary btn-danger">Delete</button>

                  <button class="ivory-btn-o btn-primary btn-danger">Delete</button>

                  <button class="ivory-btn btn-primary btn-success">Go Ahead</button>

                  <button class="ivory-btn-o btn-primary btn-success">Go Ahead</button>

Checkbox

Checked Checkbox

                
                  <div class="ivory-checkbox">

                    <input type="checkbox" id="check1" />

                    <label for="check1">Checkbox<label>

                  <div>

                  <div class="ivory-checkbox">

                    <input type="checkbox" id="check2" checked />

                    <label for="check2">Checked Checkbox</label>

                  </div>

Disabled

The checkbox can be disabled by disabled attribute on the checkbox input.

Disabled Checkbox

Checkbox disabled & checked

                
                  <div class="ivory-checkbox">

                    <input type="checkbox" id="check3" disabled />

                    <label for="check3">Disabled Checkbox<label>

                  <div>

                  <div class="ivory-checkbox">

                    <input type="checkbox" id="check4" disabled checked />

                    <label for="check4">Checkbox disabled & checked</label>

                  </div>

Form

Standard Form

In IVORY standard form, the label and the form element will be arranged one after one in a row manner.

Username

Password

Horizontally Aligned Form

In horizontal form, label & form element are aligned side-by-side.

Firstname

Lastname

Email

Password

Grid

IVORY provides a 12-column mobile first grid system built with flexbox and is fully responsive.

The below examples will give you an idea of how to build Flexbox grid structure using IVORY.

Basic Grid

One

Eleven

Two

Ten

Three

Nine

Four

Eight

Five

Seven

Six

                
                  <div class="row">

                    <div class="col-1">One</div>

                    <div class="col-11">Eleven</div>

                  </div>

                  <div class="row">

                    <div class="col-2">Two</div>

                    <div class="col-10">Ten</div>

                  </div>

                  <div class="row">

                    <div class="col-3">Three</div>

                    <div class="col-9">Nine</div>

                  </div>

                  <div class="row">

                    <div class="col-4">Four</div>

                    <div class="col-8">Eight</div>

                  </div>

                  <div class="row">

                    <div class="col-5">Five</div>

                    <div class="col-7">Seven</div>

                  </div>

                  <div class="row">

                    <div class="col-6">Six</div>

                    <div class="col-6">Six</div>

                  </div>

Gutter

IVORY grid has the gutter width of 30px i.e. 15px on each side of a column. IVORY also provides the gutter less grid system. To avail the gutter less grid layout, add .no-gutter class to the row container.

Twelve

Six

Four

Three

Equal Width Columns

You no need do much, to create the equal width columns. It's became more simpler with IVORY. In a row just create the divs with .col class. How many divs you create, those number of equal width columns will be created.

one

Two

Three

Four

Five

                
                  <div class="row">

                    <div class="col">One</div>

                    <div class="col">Two</div>

                    <div class="col">Three</div>

                    <div class="col">Four</div>

                    <div class="col">Five</div>

                  </div>

Responsive

The breakpoints of responsive grid as below:

Extra small devices (portrait phones, less than 576px)
No media query since this is the default

Small devices (landscape phones, 576px and up)

@media (min-width: 576px) { ... }

Medium devices (tablets, 768px and up)

@media (min-width: 768px) { ... }

Large devices (large desktops, 1200px and up)

@media (min-width: 1200px) { ... }

Input

IVORY follows the native input element for the input field, which should be having the class .ivory-input

List

IVORY provides 2 types of lists; native HTML lists & styled lists.

The HTML suuports 3 types of lists by default: Unordered, Ordered and Description list. Just add .ivory-list to your <ul> or <ol> or <dl>.

Native HTML Lists

Unordered List

For Unordered List you can use the addon classes like: .disc, .circle, .square to display the respective list styles. Here is an example:

Amsterdam
Manali
Monaco
Milano
Auckland
Florance

                  
                    <ul class="ivory-list disc">

                      <li>Amsterdam</li>

                      <li>Manali</li>

                      <li>Monaco</li>

                      <li>Milano</li>

                      <li>Auckland</li>

                      <li>Florance</li>

                    </ul>

Ordered List

For Ordered List you can use the addon classes like: .decimal, .lower-alpha, .upper-roman to display the respective list styles. Here is an example:

One
Two
Three
Four
Five

                  
                    <ol class="ivory-list decimal">

                      <li>One</li>

                      <li>Two</li>

                      <li>Three</li>

                      <li>Four</li>

                      <li>Five</li>

                    </ol>

Description List

Here is an example for description list:

Coffee: Black Coffee; Cappuccino; Espresso; Flat White; Macchiato
Tea: Green Tea; Lemon Tea; Fermented Tea; Herbal Tea

                  
                    <dl class="ivory-list">

                      <dt>Coffee</dt>

                      <dd>Black Coffee</dd>

                      <dd>Cappuccino</dd>

                      <dd>Espresso</dd>

                      <dd>Flat White</dd>

                      <dd>Macchiato</dd>

                      <dt>Tea</dt>

                      <dd>Green Tea</dd>

                      <dd>Lemon Tea</dd>

                      <dd>Fermented Tea</dd>

                      <dd>Herbal Tea</dd>

                    </dl>

Styled Lists:

Styled lists will be used for various documentation purposes.

Styled list 1

Head
Shoulders
Knees
Toes

Styled list 2

Lorem dolor amet sit
Lorem ipsum dolor sit amet consecutor adipiscingLorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet consecutor adipiscingLorem ipsum dolor sit amet

Progress

To incorporate the IVORY progress bar use .ivory-progress class on top of the HTML native progress element. IVORY provides the progress bar in two variants.

Regular variant

30%

                  
                    <progress class="ivory-progress" value="30" max="100"> 30% </progress>

Small variant

30%

                  
                    <progress class="ivory-progress progress-sm" value="30" max="100"> 30% </progress>

Radio

Radio Option 1

Radio Option 2

                
                  <div class="ivory-radio">

                    <input type="radio" id="radio1" name="myradio1" />

                    <label for="radio1">Radio Option 1<label>

                  <div>

                  <div class="ivory-radio">

                    <input type="radio" id="radio2" name="myradio1" checked />

                    <label for="radio2">Radio Option 2</label>

                  </div>

Disabled

The radio can be disabled by the disabled attribute on the radio input

Radio Option 1

Radio Option 2

                
                  <div class="ivory-radio">

                    <input type="radio" id="radio3" name="myradio2" disabled />

                    <label for="radio3">Radio Option 1<label>

                  <div>

                  <div class="ivory-radio">

                    <input type="radio" id="radio4" name="myradio2" disabled />

                    <label for="radio4">Radio Option 2</label>

                  </div>

Tabler Radio

Tabler radio buttons are useful in various scenarios, especially in e-commerce applications.

Example:

Select Size

S

M

L

XL

Select Color

Black

White

Blue

                
                  <div class="ivory-tabler">

                    <div class="tabler-item">

                      <input type="radio" class="tabler-input" id="t1" name="my-tabler" value="Black" />

                      <label class="tabler-button" for="t1">Black</label>

                    </div>

                    ...

                  </div>

Select

A select box gives the provision to select one item from the list items.

Here is an example for sample dropdown

                
                  <div class="ivory-select">

                    <select placeholder="Select">

                      <option value="1">Maryland</option>

                      <option value="2">Chicago</option>

                      <option value="3">Hamilton</option>

                    </select>

                  </div>

Spinner

A loading spinner is used for indicating a loading state of a page or section. It can be colored according to the applied colors on the current page.

IVORY provides the spinner in 5 sizes:

                
                  <div class="ivory-spinner-16"></div>

                  <div class="ivory-spinner-24"></div>

                  <div class="ivory-spinner-32"></div>

                  <div class="ivory-spinner-40"></div>

                  <div class="ivory-spinner-48"></div>

More

'More' button is very helpful is in expand/collapse and lazy loading use cases.

Example:

                
                  <div class="ivory-more">

                    <button class="ivory-btn-f btn-sm">

                      More

                      <i class="ivory-icon-angle-up"></i>

                    </button>

                  </div>

Table

A table is used to display the collection of structured data in row column manner.

Firstname	Lastname	Age	City
John	Doe	32	Barcelona
Jane	Doe	28	Milan
Joe	Doe	8	Monaco
Jim	Doe	6	Florance
Jene	Doe	3	Rotterdam

                
                  <table class="ivory-table">

                    <thead>

                      <tr>

                        <th>Firstname</th>

                        <th>Lastname</th>

                        <th>Age</th>

                        <th>City</th>

                      </tr>

                    </thead>

                    <tbody>

                      <tr>

                        <td>John</td>

                        <td>Doe</td>

                        <td>32</td>

                        <td>Barcelona</td>

                      </tr>

                      ...

                    </tbody>

                  </table>

Textarea

Textarea is used to enter long text input.

Just to add the class ivory-textarea to native textarea.

Toggle Switch

Toggle Switch is an on/off control, built on top of the checkbox. It can be toggled by clicking.

Here is a sample toggle

                
                  <div class="ivory-toggle-switch">

                    <input type="checkbox" name="phone" value="phone" id="phone">

                    <label for="phone"></label>

                  </div>

Tooltip

A tooltip provides a short details about a specific text or element on the UI in a pop-over. The tip is shown on mouse enter, and is hidden on mouse leave. The Tooltip doesn't support complex text or operations.

Tooltip Directions:

IVORY tooltip supports 8 directions, defined by using one of the following classes with the .tooltip-content class:
.top
.right
.bottom
.left
.top-left
.top-right
.bottom-right
.bottom-left

Tooltip Size:

The size of the tooltip content box can be changed. IVORY provides 3 different sizes, with the following classes:
.tooltip-xs
.tooltip-md
.tooltip-lg

Example:

Here is an example for top tooltip. Hover me A tooltip provides a short description of a UI element. to preview.

Here is an example for bottom tooltip. Hover me A tooltip provides a short description of a UI element. to preview.

Here is an example for left tooltip. Hover me A tooltip provides a short description of a UI element. to preview.

Here is an example for right tooltip. Hover me A tooltip provides a short description of a UI element. to preview.

Here is an example for top-left tooltip. Hover me A tooltip provides a short description of a UI element. to preview.

Here is an example for top-right tooltip. Hover me A tooltip provides a short description of a UI element. to preview.

Here is an example for bottom-right tooltip. Hover me A tooltip provides a short description of a UI element. to preview.

Here is an example for bottom-left tooltip. Hover me A tooltip provides a short description of a UI element. to preview.

                
                  <p> 

                    <a class="ivory-tooltip">Hover me

                      <span class="tooltip-content tooltip-xs top">Tooltip text</span>

                    </a>

                  </p>

About The Journey

Get Started

Using NPM

Using CDN

Colors

Color Model

Red

Pink

Purple

Indigo

Blue

Cyan

Teal

Green

Yellow

Orange

Deep Orange

Silver

Neutral Color Palette

Typography

Font Family

Font Weight

Heading1

Heading2

Heading3

Heading4

Heading5

Heading6

Text Links

Icons

Directional Icons

Suggested Icons

Application Icons

Commerce Icons

Media Icons

Technology Icons

Social Icons

Alerts

Basic

Icons

Actions

Badges

Standalone Badge

Basic Badge

Dot Badge

Buttons

Default Buttons

Primary Buttons

Solid Buttons

Outline Buttons

Flat Buttons

Disabled Buttons

Action-based color

Checkbox

Disabled

Form

Standard Form

Horizontally Aligned Form

Grid

Basic Grid

Gutter

Equal Width Columns

Responsive

Input

List

Native HTML Lists

Unordered List

Ordered List

Description List

Styled Lists:

Styled list 1

Styled list 2

Progress

Radio

Disabled

Tabler Radio

Example:

Select

Spinner

More