First, we apply a base layer.

Goals of this project:

  • Provide iVantage styled elements with zero dependecies. No CSS frameworks. No JavaScript (period). Just HTML and vanilla CSS.
  • Avoid extra markup to accomodate style. No wrappers, or helpers. Just a single (standard) element and its classname(s) whenever possible.
  • Export theme variables as a plain JavaScript object to be leveraged by React styles, CSS in JS, styled components, PostCSS custom properties, templating engines, etc.

Headings

Say it kinda loud.

h1. iVantage Heading

h2. iVantage Heading

h3. iVantage Heading

h4. iVantage Heading

h5. iVantage Heading
h6. iVantage Heading

Body Copy

Say it kinda normal.

Standard Copy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at elit ut augue feugiat rhoncus vitae non neque. Fusce aliquet cursus congue. Donec malesuada cursus mollis. Vestibulum imperdiet pharetra diam vel auctor. Sed porttitor, est non hendrerit mattis, augue nisl ultricies ligula, et tristique nunc lacus nec quam. Donec eu lectus et metus tristique egestas ut vel metus. Nunc vitae volutpat metus. Integer fringilla dui ex, eu semper metus dapibus non. Aliquam varius pretium diam, in egestas diam volutpat ut. Vivamus suscipit tortor vitae massa ultricies rhoncus.

iVantage Voice

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at elit ut augue feugiat rhoncus vitae non neque. Fusce aliquet cursus congue. Donec malesuada cursus mollis. Vestibulum imperdiet pharetra diam vel auctor. Sed porttitor, est non hendrerit mattis, augue nisl ultricies ligula, et tristique nunc lacus nec quam. Donec eu lectus et metus tristique egestas ut vel metus. Nunc vitae volutpat metus. Integer fringilla dui ex, eu semper metus dapibus non. Aliquam varius pretium diam, in egestas diam volutpat ut. Vivamus suscipit tortor vitae massa ultricies rhoncus.

Semantic Class Names

  • Muted
  • Info
  • Primary
  • Success
  • Warning
  • Danger
  • Heavy Muted
  • Heavy Info
  • Heavy Primary
  • Heavy Success
  • Heavy Warning
  • Heavy Danger

Text Formatting

Currency

  • 5
  • 50
  • 500

Percentages

  • 5
  • 50
  • 500

Targets

  • 5
  • 50
  • 500
  • 5
  • 50
  • 500

Buttons

Such clicky. Wow.

FYI... The action buttons here are for display only, actual dropdown fuctionality should be implemented externally.

Enabled

Disabled

Small

Small and Disabled

Dropdowns

Area

Obligatory Semantic Flavors



Link Style





This is just a link ;)

Inputs

Question...

Heads up! Checkboxes and radio buttons revert to browser defaults in non-webkit browsers. I.e. Chrome and Safari get fancy toggles, Firefox and Edge get browser defaults.

Checkboxes





Radio Buttons



Text

Text Areas

Try harder

Date Picker

Falls back on text input in boring browsers.

Alerts

Look out!

× Is it still going? I think maybe it froze.

× Guess what?

× FYI...

× Huzzah!

× Tread carefully...

× Oh snap!

Alerts go flat when inside an element with height (so no nested shadows). This includes cards, modals, things with shadows, or even other alerts. You can also ask for a flat alert explicitly.

Cards

Because wells were awful.

Basic Card with white top border

Card Header Text

This card can be used in cases where we don't want a top border. Making it white keeps the component pixels consistent.Read More ›

Card Header Text

Cards with an h1 get special treatment (see below), they can also optionally have a special header shelf for labels and icons.

Just FYI

Card Header Text

Card text description. Read More ›

The most prime

Card Header Text

Card text description. Read More ›

Such Win

Card Header Text

Card text description. Read More ›

Tread carefully...

Card Header Text

Card text description. Read More ›

Welcome to the town of frowns

Card Header Text

Card text description. Read More ›

Lists

These area few of my favorite things.

FYI... This demo uses real checkboxes but does not update list item class names to match selected states.

Selectable Lists

Slim Fit

Regular

Relaxed Fit

Tables

For tabular data only!

A Default Table

tr, td, etc.

A header A header A header
A footer A footer A footer
Unstyled Percentage Currency
Unstyled Percentage Currency
Unstyled Percentage Currency

A Releaxed Fit Table

tr, td, etc.

A header A header A header
A footer A footer A footer
Unstyled Percentage Currency
Unstyled Percentage Currency
Unstyled Percentage Currency
Unstyled Percentage Currency

A Slim Fit Table

tr, td, etc.

A header A header A header
A footer A footer A footer
Unstyled Percentage Currency
Unstyled Percentage Currency
Unstyled Percentage Currency

A Striped Table

tr, td, etc.

A header A header A header
Unstyled Percentage Currency
Unstyled Percentage Currency
Unstyled Percentage Currency

A Borderless Striped Table

tr, td, etc.

A header A header A header
Unstyled Percentage Currency
Unstyled Percentage Currency
Unstyled Percentage Currency

A Grid

Just a bunch of divs, spans, or lis.

The generic grid requires you to specify your own column layout. Your layout should minimally support named grid lines start and end to facilitate cells spanning the entire grid width, as in the divider row demonstrated below.

A Header A Header A Header Unstyled Percentage Currency Divider Unstyled Percentage Currency A Totals Row A Footer A Footer

Pills and Labels

Little chicklety things.

FYI... a and button labels and pills get special treatment. Other element types will not get hover effects.

Inactive

Active

Navigation

You're here Not here

Badges

A mark of honor.

FYI... Badges require their containing element to have non-static positioning. Use the au-with-badge classname to apply relative positioning to your badgified element for symantic wins.

Must Check Notifications...

Semantic Flavors

On Other Elements

You don't say... on an alert! 9

  • First
  • Second
  • Third
7

Markers

Connecting text and viz.

FYI... The companion JavaScript file contains variables for all marker colors to be used in data visualizations.

Viz Colors

  • Marked
  • Marked
  • Marked
  • Marked
  • Marked
  • Marked
  • Marked
  • Marked
  • Marked
  • Marked

Obligatory Semantic Flavors

  • Muted
  • Info
  • Primary
  • Success
  • Warning
  • Danger

The Placeholder Marker

Use the placeholder marker to align non-marked text with marked text.

  • This text is marked.
  • The text has a placeholder marker
  • This has no marker, see how it doesn't like up?
  • Marked again.

Scrollbars

X & Y

Heads up! Scrollbars will revert to browser defaults in non-webkit browsers.

Accordions

Vertical

About Us
Rub whiskers on bare skin act innocent plays league of legends scratch the box or then cats take over the world pounce on unsuspecting person flee in terror at cucumber discovered on floor for you call this cat food. Mrow purrrrrr. Loves cheeseburgers jump off balcony, onto stranger's head yet small kitty warm kitty little balls of fur, all of a sudden cat goes crazy, for make meme, make cute face. Scratch at the door then walk away chase dog then run away but nap all day, so stick butt in face, but climb a tree, wait for a fireman jump to fireman then scratch his face so when in doubt, wash licks your face. Kitty kitty intrigued by the shower.
Services
Rub whiskers on bare skin act innocent plays league of legends scratch the box or then cats take over the world pounce on unsuspecting person flee in terror at cucumber discovered on floor for you call this cat food. Mrow purrrrrr. Loves cheeseburgers jump off balcony, onto stranger's head yet small kitty warm kitty little balls of fur, all of a sudden cat goes crazy, for make meme, make cute face. Scratch at the door then walk away chase dog then run away but nap all day, so stick butt in face, but climb a tree, wait for a fireman jump to fireman then scratch his face so when in doubt, wash licks your face. Kitty kitty intrigued by the shower.
Active panel
Rub whiskers on bare skin act innocent plays league of legends scratch the box or then cats take over the world pounce on unsuspecting person flee in terror at cucumber discovered on floor for you call this cat food. Mrow purrrrrr. Loves cheeseburgers jump off balcony, onto stranger's head yet small kitty warm kitty little balls of fur, all of a sudden cat goes crazy, for make meme, make cute face. Scratch at the door then walk away chase dog then run away but nap all day, so stick butt in face, but climb a tree, wait for a fireman jump to fireman then scratch his face so when in doubt, wash licks your face. Kitty kitty intrigued by the shower.
Contact
Rub whiskers on bare skin act innocent plays league of legends scratch the box or then cats take over the world pounce on unsuspecting person flee in terror at cucumber discovered on floor for you call this cat food. Mrow purrrrrr. Loves cheeseburgers jump off balcony, onto stranger's head yet small kitty warm kitty little balls of fur, all of a sudden cat goes crazy, for make meme, make cute face. Scratch at the door then walk away chase dog then run away but nap all day, so stick butt in face, but climb a tree, wait for a fireman jump to fireman then scratch his face so when in doubt, wash licks your face. Kitty kitty intrigued by the shower.

Shadows

Tall, dark, and handsome.

short
medium
tall

Placeholders

For progressive content.

Placeholder Circle Thing

Placeholder Headers

Placeholder Copy

Placeholder Buttons

Loading Masks

You can't see me!

Hey! Why don't you grab me a coffee too?
HALP!

It's Not Really Loading!!!

This is all a lie to keep you from knowing something is broken!

A small flavor

Loading text and spinner are borth optional.

Also, you can use as many dots as you like!

Mini-Tail

For displaying a small tail pointing upwards from drop-down

Short shadow

  • Foo
  • Bar
  • Barus

Medium shadow

  • Foo
  • Bar
  • Barus

Tall shadow

  • Foo
  • Bar
  • Barus

Tab

For delineating content through the use of tabs

  • Tab 1
  • Tab 2
  • Tab 3
  • Active Tab

Tab Contents

Here's some tab contents.

Modals

Dialogs for notifications or the like. Kyle's favorite!

The examples below are static modals which have had their position and size overriden. Normally, modals should be nested inside of a au-modal-backdrop, which provides a gray backdrop over the page and allows the modal to position itself in the center of the page.

× Check me out!
No, seriously. Check me out!
× The most interesting modal in the world
This one has no footer, and that's just fine. You do you! Did you know that modals will expand up to a certain width? They also have a minimum width so don't worry that they'll shrink in the wash.
× Good on ya, mate!
You deserve a cookie.
× Are you sure you wanna do that?
Why do I bother? You won't listen to me anyway.
× You shouldn't have done that
Now we're really in trouble.