Welcome to JupiterUI

Simply the quickest way to start any web project. Serving as a for-production boilerplate, it'll get your project running in no-time.

Accordion

A highly flexible way to compress content. Accordions are so flexible, in fact, that they can be included in the sidebar! See the commented line in index.html

Example:

They hold their own state!

Avatar

A pre-defined box for avatars. You can customize the size using Jupiter's [sm, md, lg] directive.

Example:

Button

Ahh, push it!

Ghost Button:

Click 'em!

Color buttons

Card

See the rest on the html/cards.html page.

This is a card title.

This is some card content that can be expanded.

Form

Example:

I'm a label

Icons

<i data-icon="icon_name" class="j-icon"><i>

Uses the standard sizing convention.

Example:

Loading

Example:

Notifications

Skeleton

Example:

Card example:

Tabs

Example:

I'm tab one!

I'm tab two!

I'm tab three!

With .round:

I'm tab one!

I'm tab two!

I'm tab three!

Tags

Example:

Tag Primary
red
magenta
purple
blue
cyan
teal
green
cool-gray
gray
warm-gray
Tag .rounded