Zirconium by Antares Programming Alpha

An opinionated CSS library of components. Offical CSS written by Francis Rubio for Antares Programming.

How to use

  1. Download the Github release

    You can download the .zip or .tar.gz file from Github.

  2. Add the HTML5 Doctype

    This tells browsers that we are using the latest web technologies.

    <!DOCTYPE html>
  3. Add the viewport meta tag

    This tells browsers that we want our page to be responsive.

    <meta name="viewport" content="width=device-width, initial-scale=1">
  4. Include the stylesheet

    Put this inside your <head> tag.

    <link rel="stylesheet" href="zirconium.min.css"/>
  5. Include the script

    Put this toward the end of your <body> tag.

    <script src="zirconium.js"></script>
  6. Include the Prism.js

    This is for syntax highlighting in code snippets. There's more information in the Code Snippets documentation.

    <script src="prism.js"></script>

Overview

Colors

The set of colors used in Zirconium.

Components

Badges

Badges indicate status, tags, or categories associated with a block of information

Banners

Zirconium uses banners to present a notice of information.

Breadcrumbs

Breadcrumbs show the user's current location in the website's hierarchy.

Buttons

Buttons trigger an event or an action.

Bylines

Bylines present the author of a document.

Cards

Cards present information in a digestible manner.

Dialog

Dialogs presents additional workflow or force an important decision right where the user currently is

Dropdown

Displays a list of actions, links, or options a user can choose between.

Figures

Whenever you want to add supplementary content, consider figures.

Progress Markers

Progress markers indicate the current progress against a projected goal.