JupiterUI

Versatile, friendly, simple: Jupiter bridges the gaps that other CSS design systems don't.

License: MIT

|

Version: 4.1.0

JupiterUI is a comprehensive compilation of CSS rules that make-up an entire atomic design system.

Jupiter is essentially a CSS design system. It provides an extensive list of classes that make designing and developing for the front-end hassle-free. It's a plug-and-play toolkit for modern front-end development.

It sets itself apart by having built-in components by default. Things like modals, cards, and so on are effortless to implement.

View the components
Features

Versatile—a design system for any platform.

Jupiter is written with plain CSS and JavaScript. Although the JavaScript is required for certain components, you can use the CSS in any web project. If you're using React, there's the JupiterUI React Components library to help.

View repository

Responsive interface

JupiterUI is lightweight, minimal, and responsive. It makes your site feel alive. It features a consistent, performant interface with lots of customization options.

Easy to use, easy to extend

Jupiter is a mere two files, the CSS file and the JavaScript file. While it's easy to implement, it's also easy to modify to your standards, compiling with basic SCSS.

Jupiter's Components

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

Morph Example:

Ghost Button:

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:

Loader

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
orange
magenta
purple
blue
cyan
teal
green
cool-gray
gray
warm-gray
Tag .rounded

Tile

The Tile is essentially just a customizeable wrapper for content.

Example:

Default.

Darker.

Clickable.

Selectable tiles are very versatile. View the Changelog to see what classes are available.

Selectable tiles.

Jupiter v3.8.0 introduced JavaScript support for selectable tiles. Start clicking around to give them a try!

Selectable accent

Magenta

Purple

Cyan

Selectable Tiles inside of .j-tiles behave like radio buttons.

Selectable. You may only choose one!

Selectable. You may only choose one!

Selectable. You may only choose one!

Copyright 2021 athena
Made with JupiterUI