Quick Start

Either link in HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/any3cubed/anycubed-styles@main/anycubed-styles.min.css"/>

or import in CSS:

@import url("https://cdn.jsdelivr.net/gh/any3cubed/anycubed-styles@main/anycubed-styles.min.css");

or download from the repo.

Customization

All colors, spacing, and typography are controlled by CSS variables. You can override them in your own CSS file or <style> block. See the documentation for a full list of variables and their default values.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph text. The quick brown fox jumps over the lazy dog. Inter is the default font alongside your system's default monospace font. By default paragraphs are limited to 90 characters per line.

A second paragraph to demonstrate p + p spacing. Adjacent paragraphs have a top margin.

Small tag — uses --fs-xs and muted color.

Here is inline code, a Keyboard Shortcut, and below is a code block:

// Pre-formatted code block
function greet(name) {
  return `Hello, ${name}!`;
}

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development. It is typically a corrupted version of De finibus bonorum et malorum, a 1st-century BC text by the Roman statesman and philosopher Cicero, with words altered, added, and removed to make it nonsensical and improper Latin.

— Wikipedia
small tag used here.

Lists

Unordered

First item
Second item
Third item

Ordered

First step
Second step
Third step

Definition list

Term one: Description for the first term.
Term two: Description for the second term, which is longer and wraps across lines to show the spacing.

Panels

Apply the .panel class to a container to give it a distinct background and border. This section is a panel.

Nested Panel

This is a nested panel.

Media

Placeholder image — Photo by Milad Fakurian on Unsplash. This text is using a `figure` element.

Tables

Name	Role	Status
Alice	Engineer	Active
Bob	Designer	Active
Carol	Manager	Inactive

Forms

Text input

Number input

Select

Textarea

Invalid input

Disabled input

Checkbox Option A Option B

Radio group Choice 1 Choice 2

Fieldset legend Nested input

Special Inputs

See special inputs in the documentation for usage and examples.

Multi Number Input

The multi number input element starts with a .m-num container, which should contain multiple number inputs.

Day Hour Min Sec

Toggle Switches

Toggle switches are checkbox inputs with the .toggle class.

Toggle me! Disabled Disabled checked

Buttons

Links can also be buttons with the .btn class. Add the outline class for an outline style.

Utility Classes

`.border`

Adds var(--border) to any element.

This text has the .border class. Note that padding is added here for visibility; .border does not add padding by default.

`.muted`

Designed to be used with elements in a disabled/muted state. Note that .muted does not affect interactivity.

Muted link

Muted text

`.disabled`

Removes interactivity from an element.

Disabled muted link

Disabled muted text

any³-styles