GitHub

## SPECTRE

Getting started

- Introduction
- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

### Color utilities#

Color utilities are used for changing colors for text, link and background.

#### Text colors#

primary color

secondary color

dark color

gray color

light color

success color

warning color

error color

    <span class="text-primary">primary color</span>
    <span class="text-secondary">secondary color</span>
    <span class="text-dark">dark color</span>
    <span class="text-gray">gray color</span>
    <span class="text-light">light color</span>
    <span class="text-success">success color</span>
    <span class="text-warning">warning color</span>
    <span class="text-error">error color</span>

primary link

secondary link

dark link

gray link

light link

success link

warning link

error link

    <a class="text-primary" href="#">primary color</a>
    <a class="text-secondary" href="#">secondary color</a>
    <a class="text-dark" href="#">dark color</a>
    <a class="text-gray" href="#">gray color</a>
    <a class="text-light" href="#">light color</a>
    <a class="text-success" href="#">success color</a>
    <a class="text-warning" href="#">warning color</a>
    <a class="text-error" href="#">error color</a>

#### Background colors#

primary bg

secondary bg

dark bg

gray bg

success bg

warning bg

error bg

    <div class="bg-primary">primary bg</div>
    <div class="bg-secondary">secondary bg</div>
    <div class="bg-dark">dark bg</div>
    <div class="bg-gray">gray bg</div>
    <div class="bg-success">success bg</div>
    <div class="bg-warning">warning bg</div>
    <div class="bg-error">error bg</div>

### Cursor utilities#

Cursor utilities specify which mouse cursor to display when mouseover.

c-hand
c-move
c-zoom-in
c-zoom-out
c-not-allowed
c-auto

    <!-- cursor: hand; -->
    <div class="c-hand"></div>
    <!-- cursor: move; -->
    <div class="c-move"></div>
    <!-- cursor: zoom-in; -->
    <div class="c-zoom-in"></div>
    <!-- cursor: zoom-out; -->
    <div class="c-zoom-out"></div>
    <!-- cursor: not-allowed; -->
    <div class="c-not-allowed"></div>
    <!-- cursor: auto; -->
    <div class="c-auto"></div>

### Display utilities#

Display utilities are used for display and hidden things.

    <!-- display: block; -->
    <div class="d-block"></div>
    <!-- display: inline; -->
    <div class="d-inline"></div>
    <!-- display: inline-block; -->
    <div class="d-inline-block"></div>
    <!-- display: flex; -->
    <div class="d-flex"></div>
    <!-- display: inline-flex; -->
    <div class="d-inline-flex"></div>
    <!-- display: none; -->
    <div class="d-none"></div>
    <div class="d-hide"></div>
    <!-- visibility: visible; -->
    <div class="d-visible"></div>
    <!-- visibility: hidden; -->
    <div class="d-invisible"></div>
    <!-- hide text contents -->
    <div class="text-hide"></div>
    <!-- assistive text for screen reader -->
    <div class="text-assistive"></div>

### Divider#

A Divider is used for separating elements.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
Email
Password
Remember me
Email

    <!-- divider element -->
    <div class="divider"></div>
    <!-- divider element with text -->
    <div class="divider text-center" data-content="OR"></div>

    <!-- vertical divider element with text -->
    <div class="columns">
      <div class="column">
        <!-- column content -->
      </div>
      <div class="divider-vert" data-content="OR"></div>
      <div class="column">
        <!-- column content -->
      </div>
    </div>

### Loading#

Loading indicator is used for loading or updating. You can add the `loading` class to a container for loading status.

Add the `loading-lg` class for large size.

    <!-- loading element -->
    <div class="loading"></div>
    <div class="loading loading-lg"></div>

### Position utilities#

Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.

    <!-- clear float -->
    <div class="clearfix"></div>
    <!-- float: left and right -->
    <div class="float-left"></div>
    <div class="float-right"></div>
    <!-- position: relative, absolute and fixed -->
    <div class="relative"></div>
    <div class="absolute"></div>
    <div class="fixed"></div>
    <!-- centered block -->
    <div class="centered"></div>

    <!-- m-1 {margin: 4px;} m-2 {margin: 8px;} -->
    <div class="m-1"></div>
    <div class="m-2"></div>
    <!-- margin in 4 directions. mt-1 {margin-top: 4px;} mt-2 {margin-top: 8px;} -->
    <div class="mt-1"></div>
    <div class="mt-2"></div>
    <!-- mx-1 {margin-left: 4px; margin-right: 4px;} -->
    <div class="mx-1"></div>
    <div class="mx-2"></div>
    <div class="my-1"></div>
    <div class="my-2"></div>
    <!-- p-1 {padding: 4px;} p-2 {padding: 8px;} -->
    <div class="p-1"></div>
    <div class="p-2"></div>
    <!-- padding in 4 directions. pt-1 {padding-top: 4px;} pt-2 {padding-top: 8px;} -->
    <div class="pt-1"></div>
    <div class="pt-2"></div>
    <!-- px-1 {padding-left: 4px; padding-right: 4px;} -->
    <div class="px-1"></div>
    <div class="px-2"></div>
    <div class="py-1"></div>
    <div class="py-2"></div>

### Shape utilities#

Shape utilities are used for change element shapes.

s-rounded
s-circle

    <!-- rounded element -->
    <div class="s-rounded"></div>
    <!-- circle element -->
    <div class="s-circle"></div>

### Text utilities#

Text utilities are used for text alignment, styles and overflow things.

    <!-- left-aligned text -->
    <div class="text-left"></div>
    <!-- center-aligned text -->
    <div class="text-center"></div>
    <!-- right-aligned text -->
    <div class="text-right"></div>
    <!-- justified text -->
    <div class="text-justify"></div>

    <!-- Lowercased text -->
    <div class="text-lowercase"></div>
    <!-- Uppercased text -->
    <div class="text-uppercase"></div>
    <!-- Capitalized text -->
    <div class="text-capitalize"></div>

    <!-- Normal weight text -->
    <div class="text-normal"></div>
    <!-- Bold text -->
    <div class="text-bold"></div>
    <!-- Italicized text -->
    <div class="text-italic"></div>
    <!-- Larger text (120%) -->
    <div class="text-large"></div>

    <!-- Overflow behavior: display an ellipsis to represent clipped text -->
    <div class="text-ellipsis"></div>
    <!-- Overflow behavior: truncate the text -->
    <div class="text-clip"></div>
    <!-- Text may be broken at arbitrary points -->
    <div class="text-break"></div>

Documents · GitHub · Twitter · PayPal Donate · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.