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.
Install via package manager
Run the below command to install IVORY UI package via npm.
npm i ivoryui-ivory
Include via CDN
You can include IVORY minified CSS file from CDNs jsDelivr or unpkg.
Using UNPKG CDN
<link rel="stylesheet" href="https://unpkg.com/ivoryui-ivory/ivory.min.css" />
Using JSDelivr CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ivoryui-ivory@6.0.0/ivory.min.css" />
Colors
IVORY provides an out-of-the-box color palette, 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.
Use our global :root variables, var(--iv-colorName) syntax to use the colors from the below color palette.
Gray
Red
Pink
Purple
Indigo
Blue
Cyan
Teal
Green
Yellow
Orange
Typography
Type System
| Style | Usage | Font Size / Line Height |
|---|---|---|
Heading1 |
<h1>...</h1> | 2.25rem / 2.75rem |
Heading2 |
<h2>...</h2> | 2rem / 2.5rem |
Heading3 |
<h3>...</h3> | 1.75rem / 2.25rem |
Heading4 |
<h4>...</h4> | 1.5rem / 2rem |
Heading5 |
<h5>...</h5> | 1.25rem / 2rem |
Heading6 |
<h6>...</h6> | 1.125rem / 1.75rem |
P |
<p>....</p> | 0.875rem / 1.5rem |
.text-16 |
class=".text-16" | 1rem / 1.75rem |
.text-12 |
class=".text-12" | 0.75rem / 1.25rem |
Font Family & Font Weight
IVORY gives you the flexibility to have your preferred font family in your web page.
IVORY doesn't apply any font-weight in the typography. But provides the below CSS utility classes for font-weight.
| Class | Font Weight |
|---|---|
| text-100 | 100 |
| text-200 | 200 |
| text-300 | 300 |
| text-400 | 400 |
| text-500 | 500 |
| text-600 | 600 |
| text-700 | 700 |
| text-800 | 800 |
| text-900 | 900 |
Text Links
Alerts
Standard Alerts
IVORY has success, info, warning and error alert types.
Tip: You can enhance the ivory alerts with your choice of icons for alert type representation and action button.
<div class="iv-alert iv-alert-success">Success Text<div>
<div class="iv-alert iv-alert-info">Info Text</div>
<div class="iv-alert iv-alert-warning">Warning Text</div>
<div class="iv-alert iv-alert-error">Error Text</div>
Alert Banner
These are application level alerts showed as a banner at top of page.
<div class="iv-alert-banner iv-banner-error">
<div class="content">
Your trial period is about to expire in 1 day.
</div>
</div>
<div class="iv-alert-banner iv-banner-warning">
<div class="content">
Service Notice: There is a schduled maintainance on coming Sunday, from 6:00AM to 6:00PM.
</div>
</div>
<div class="iv-alert-banner iv-banner-info">
<div class="content">
A new version is available for this product. Restart the application if you want to upgrade.
</div>
</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="iv-badge">5</span>
<span class="iv-badge iv-badge-success">5</span>
<span class="iv-badge iv-badge-warning">5</span>
<span class="iv-badge iv-badge-error">5</span>
Basic Badge
<span class="iv-badge-group">
<sup class="iv-badge iv-badge-error">Text</sup>
</span>
Dot Badge
<span class="iv-badge-group">
...
<sup class="iv-badge iv-badge-error iv-badge-dot"></sup>
</span>
Card
IVORY cards are built with as little markup and styles as possible, but provides a lot of customization. IVORY cards can be used in many ways, the below examples will give you some idea.
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="iv-card">
<div class="iv-card-header">
<h4 class="text-600 mb-0">Card Title</h4>
</div>
<div class="iv-card-content">
<p class="text-16 text-300 mb-0">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
Checkbox
<div class="iv-checkbox">
<input type="checkbox" id="check1" />
<label for="check1">Checkbox<label>
<div>
<div class="iv-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.
<div class="iv-checkbox">
<input type="checkbox" id="check3" disabled />
<label for="check3">Disabled Checkbox<label>
<div>
<div class="iv-checkbox">
<input type="checkbox" id="check4" disabled checked />
<label for="check4">Checkbox disabled & checked</label>
</div>
Input File
The file input uses the native HTML File Input.
<div class="iv-file">
<label tabindex="0" for="upload1" class="iv-file-select" role="button">Browse to upload</label>
<input id="upload1" type="file" accept />
</div>
Form
Standard Form
In IVORY standard form, the label and the form element will be arranged one after one in a row manner.
<div class="iv-form">
<div class="iv-field">
<label class="iv-label">Username</label>
<input class="iv-input" type="text" />
</div>
<div class="iv-field">
<label class="iv-label">Password</label>
<input class="iv-input" type="password" />
</div>
<button class="iv-btn btn-primary">Signin</button>
</div>
Horizontally Aligned Form
In horizontal form, label & form element are aligned side-by-side.
<div class="iv-form iv-form-horizontal">
<div class="iv-field">
<label class="iv-label">Firstname</label>
<input class="iv-input" type="text" />
</div>
<div class="iv-field">
<label class="iv-label">Lastname</label>
<input class="iv-input" type="text" />
</div>
<div class="iv-field">
<label class="iv-label">Email</label>
<input class="iv-input" type="text" />
</div>
<div class="iv-field">
<label class="iv-label">Password</label>
<input class="iv-input" type="password" />
</div>
<button class="iv-btn btn-primary">Register</button>
</div>
Grid
Simplest grid system
Add the as many col elements as you want, to a row container. No matter how many you've added, IVORY just create the equal width columns in the row.
Basic Grid
IVORY provides a 12-column mobile first grid system. The below example will give you an idea of how to build Flexbox grid structure using IVORY.
<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>
Don't want the 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.
<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>
Breakpoints
As IVORY focuses mobile first, it provides you the standard and universally followed 6 breakpoints for responsive grid:
// 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 (desktops, 992px and up)
@media (min-width: 992px) { ... }
// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }
Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Use the following class infix to avail the responsive column for the targeted device size.
| Breakpoint | IVORY Class infix |
|---|---|
|
<576px |
None |
|
≥576px |
sm |
|
≥768px |
md |
|
≥992px |
lg |
|
≥1200px |
xl |
|
≥1400px |
xxl |
<div class="col-xxl-1 col-xl-2 col-lg-3 col-md-4 col-sm-6 col">
...
</div>
Input
IVORY follows the native input element for the input field, which should be having the class .iv-input
<input class="iv-input" type="text" placeholder="Enter Text Here" value="" />
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 .iv-list to your <ul> or <ol> or <dl>.
Native HTML Lists
Unordered List
For Unordered List you can use the addon classes like: .iv-list-disc, .iv-list-circle, .iv-list-square to display the respective list styles. Here is an example:
- Amsterdam
- Manali
- Monaco
- Milano
- Auckland
- Florance
<ul class="iv-list iv-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: .iv-list-decimal, .iv-list-lower-alpha, .iv-list-upper-roman to display the respective list styles. Here is an example:
- One
- Two
- Three
- Four
- Five
<ol class="iv-list iv-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="iv-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
- Head
- Shoulders
- Knees
- Toes
<ul class="iv-styled-list">
<li>Head</li>
<li>Shoulders</li>
<li>Knees</li>
<li>Toes</li>
</ul>
Progress
To incorporate the IVORY progress bar use .iv-progress class on top of the HTML native progress element. IVORY provides the progress bar in two variants.
Regular variant
<progress class="iv-progress" value="30" max="100"> 30% </progress>
Small variant
<progress class="iv-progress progress-sm" value="30" max="100"> 30% </progress>
Radio
<div class="iv-radio">
<input type="radio" id="radio1" name="myradio1" />
<label for="radio1">Radio Option 1<label>
<div>
<div class="iv-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
<div class="iv-radio">
<input type="radio" id="radio3" name="myradio2" disabled />
<label for="radio3">Radio Option 1<label>
<div>
<div class="iv-radio">
<input type="radio" id="radio4" name="myradio2" disabled />
<label for="radio4">Radio Option 2</label>
</div>
Radio Tabler
Tabler radio buttons are useful in various scenarios, especially in e-commerce applications.
Example:
Select Size
Select Color
<div class="iv-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="iv-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="iv-spinner-16"></div>
<div class="iv-spinner-24"></div>
<div class="iv-spinner-32"></div>
<div class="iv-spinner-40"></div>
<div class="iv-spinner-48"></div>
More
'More' button is very helpful is in expand/collapse and lazy loading use cases.
Example:
<div class="iv-more">
<button class="iv-btn-f btn-sm">
More
</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="iv-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 iv-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="iv-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:
With IVORY you can show a tooltip in 8 different directions.
Example:
I'm using .tooltip-top class. Hover me A tooltip provides a short description of a
UI element. to preview.
I'm using .tooltip-bottom class. Hover me A tooltip provides a short description of a
UI element. to preview.
I'm using .tooltip-left class. Hover me A tooltip provides a short description of a
UI element. to preview.
I'm using .tooltip-right class. Hover me A tooltip provides a short description of a
UI element. to preview.
I'm using .tooltip-top-left class. Hover me A tooltip provides a short description of a
UI element. to preview.
I'm using .tooltip-top-right class. Hover me A tooltip provides a short description of a
UI element. to preview.
I'm using .tooltip-bottom-right class. Hover me A tooltip provides a short description of a
UI element. to preview.
I'm using .tooltip-bottom-left class. Hover me A tooltip provides a short description of a
UI element. to preview.
<p>
<a class="iv-tooltip">Hover me
<span class="tooltip-content tooltip-xs top">Tooltip text</span>
</a>
</p>
Tooltip Size:
IVORY provides tooltips in 4 different sizes, with the following classes:
| Class | Size |
|---|---|
|
|
10rem |
|
|
15rem |
|
|
20rem |
|
|
25rem |