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

### Experimentals#

The Experimentals include experimental elements and features, mostly are not yet ready for wide use. These elements and components are limited inside `spectre-exp.scss` before browsers fully support them. Sometimes, there are some specific browsers targeted components.

### Autocomplete#

Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.

Bruce Banner
Thor Odinson
Steve Rogers
Tony Stark
Natasha Romanoff
Bruce Banner Thor Odinson

- Steve Roger s
- Tony Stark

Add a container element with the `form-autocomplete` class. There are 2 parts of it, one is `form-autocomplete-input`, another is `menu` component. You may add the `is-focused` class to `form-autocomplete-input` to make it appear as focus state.

Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. The autocomplete HTML structure is exampled below.

Bruce Banner
Thor Odinson
Steve Rogers
Tony Stark
Natasha Romanoff

    <div class="form-autocomplete">
      <!-- autocomplete input container -->
      <div class="form-autocomplete-input form-input">

        <!-- autocomplete chips -->
        <div class="chip">
          <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson">
          Thor Odinson
          <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
        </div>

        <!-- autocomplete real input box -->
        <input class="form-input" type="text" placeholder="typing here">
      </div>

      <!-- autocomplete suggestion list -->
      <ul class="menu">
        <!-- menu list items -->
        <li class="menu-item">
          <a href="#">
            <div class="tile tile-centered">
              <div class="tile-icon">
                ...
              </div>
              <div class="tile-content">
                ...
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>

### Calendars#

Calendars are designed for date or date range picker and events display. It is made with flex layout.

March 2017
Sun
Mon
Tue
Wed
Thu
Fri
Sat

    <div class="calendar">
      <!-- calendar navbar -->
      <div class="calendar-nav navbar">
        <button class="btn btn-action btn-link btn-lg">
          <i class="icon icon-arrow-left"></i>
        </button>
        <div class="navbar-primary">March 2017</div>
        <button class="btn btn-action btn-link btn-lg">
          <i class="icon icon-arrow-right"></i>
        </button>
      </div>

      <div class="calendar-container">
        <div class="calendar-header">
          <div class="calendar-date">Sun</div>
          <div class="calendar-date">Mon</div>
          <div class="calendar-date">Tue</div>
          <div class="calendar-date">Wed</div>
          <div class="calendar-date">Thu</div>
          <div class="calendar-date">Fri</div>
          <div class="calendar-date">Sat</div>
        </div>

        <div class="calendar-body">
          <!-- calendar previous month -->
          <div class="calendar-date prev-month">
            <button class="date-item">26</button>
          </div>
          ...
          <div class="calendar-date prev-month">
            <button class="date-item">28</button>
          </div>

          <!-- calendar current month -->
          <div class="calendar-date">
            <button class="date-item">1</button>
          </div>
          <div class="calendar-date">
            <button class="date-item">2</button>
          </div>
          <div class="calendar-date">
            <button class="date-item">3</button>
          </div>
          <!-- calendar date: today -->
          <div class="calendar-date">
            <button class="date-item date-today">4</button>
          </div>
          <!-- calendar date: tooltip -->
          <div class="calendar-date tooltip" data-tooltip="You have appointments">
            <button class="date-item">5</button>
          </div>
          <!-- calendar date: not available -->
          <div class="calendar-date tooltip" data-tooltip="Not available">
            <button class="date-item" disabled="">6</button>
          </div>

          <!-- calendar range -->
          <div class="calendar-date calendar-range range-start">
            <button class="date-item">7</button>
          </div>
          <div class="calendar-date calendar-range">
            <button class="date-item">8</button>
          </div>
          <div class="calendar-date calendar-range range-end">
            <button class="date-item">9</button>
          </div>
          ...
          <div class="calendar-date">
            <button class="date-item">31</button>
          </div>

          <!-- calendar next month -->
          <div class="calendar-date next-month">
            <button class="date-item">1</button>
          </div>
        </div>
      </div>
    </div>

#### Calendars sizes#

March 2017
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Zhonghe Festival
Product launch event International Women's Day
Arbor Day
Spring Equinox
April Fools' Day

    <div class="calendar calendar-lg">
      <!-- calendar navbar structure -->

      <div class="calendar-container">
        <!-- calendar header structure -->

        <div class="calendar-body">
          <!-- calendar date with events -->
          <div class="calendar-date">
            <button class="date-item active">20</button>
            <div class="calendar-events">
              <a class="calendar-event bg-success text-light" href="#calendars">Spring Equinox</a>
            </div>
          </div>
        </div>
      </div>
    </div>

### Carousels#

Carousels are slideshows for cycling images. It is built in pure CSS.

1 2 3 4

    <div class="carousel">
      <!-- carousel locator -->
      <input class="carousel-locator" id="slide-1" type="radio" name="carousel-radio" hidden="" checked="">
      <input class="carousel-locator" id="slide-2" type="radio" name="carousel-radio" hidden="">
      <input class="carousel-locator" id="slide-3" type="radio" name="carousel-radio" hidden="">
      <input class="carousel-locator" id="slide-4" type="radio" name="carousel-radio" hidden="">

      <!-- carousel container -->
      <div class="carousel-container">
        <!-- carousel item -->
        <figure class="carousel-item">
          <label class="item-prev btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-left"></i></label>
          <label class="item-next btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper">
        </figure>
        <figure class="carousel-item">
          <label class="item-prev btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-left"></i></label>
          <label class="item-next btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper">
        </figure>
        <figure class="carousel-item">
          <label class="item-prev btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-left"></i></label>
          <label class="item-next btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-el-capitan.jpg" alt="macOS Yosemite Wallpaper">
        </figure>
        <figure class="carousel-item">
          <label class="item-prev btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-left"></i></label>
          <label class="item-next btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-el-capitan-2.jpg" alt="macOS Yosemite Wallpaper">
        </figure>
      </div>
      <!-- carousel navigation -->
      <div class="carousel-nav">
        <label class="nav-item text-hide c-hand" for="slide-1">1</label>
        <label class="nav-item text-hide c-hand" for="slide-2">2</label>
        <label class="nav-item text-hide c-hand" for="slide-3">3</label>
        <label class="nav-item text-hide c-hand" for="slide-4">4</label>
      </div>
    </div>

### Comparison sliders#

Comparison Sliders are sliders for comparing two images. It is built in pure CSS.

Before
After

    <div class="comparison-slider">
      <figure class="comparison-before">
        <!-- image (before) -->
        <div class="comparison-label">Before</div>
      </figure>

      <figure class="comparison-after">
        <!-- image (after) -->
        <div class="comparison-label">After</div>
        <textarea class="comparison-resizer" readonly></textarea>
      </figure>
    </div>

### Filters#

Filters are CSS only content filters.

All Action Roleplaying Shooter Sports
Fallout 4
Roleplaying
Halo 5
Shooter
Quantum Break
Action
Forza Horizon 3
Sports
Final Fantasy XV
Roleplaying
NBA 2K17
Sports
Battlefield 1
Shooter
GTA V
Action
FIFA 17
Sports
Overwatch
Shooter
Titanfall 2
Shooter
Gears of Wars 4
Shooter

Filters use `tag-1` to `tag-8` to flag different tags. `tag-0` is reserved for clearing filter (or showing all). You can overwrite `$filter-number` in `_filters.scss` to have more filters.

    <div class="filter">
      <input type="radio" id="tag-0" class="filter-tag" name="filter-radio" hidden checked>
      <input type="radio" id="tag-1" class="filter-tag" name="filter-radio" hidden>
      <input type="radio" id="tag-2" class="filter-tag" name="filter-radio" hidden>

      <div class="filter-nav">
        <label class="chip" for="tag-0">All</label>
        <label class="chip" for="tag-1">Action</label>
        <label class="chip" for="tag-2">Roleplaying</label>
      </div>

      <div class="filter-body">
        <div class="filter-item card" data-tag="tag-1">
          <!-- Filter item content -->
        </div>
        <div class="filter-item card" data-tag="tag-2">
          <!-- Filter item content -->
        </div>
        <!-- Filter items -->
      </div>
    </div>

### Meters#

Meters represent the value within the known range.

    <!-- Meter is green when low < value < high -->
    <meter class="meter" value="20" min="0" max="100"></meter>
    <meter class="meter" value="60" min="0" max="100" low="30" high="80"></meter>
    <!-- Meter is yellow when value < low  or high < value -->
    <meter class="meter" value="85" min="0" max="100" low="30" high="80"></meter>
    <!-- Meter is red when value < low < high < optimum or optimum < low < high < value -->
    <meter class="meter" value="20" optimum="90" min="0" max="100" low="30" high="80"></meter>

### Off-canvas#

The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS.

By default, the off-canvas menu is collapsed whenever the window width is. But you can add the `off-canvas-sidebar-show` class to the `off-canvas` to make the sidebar expanded when the window width is larger than or equal to 960px.

Sidebar

#### Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

You can open the sidebar by adding the class `active` to `off-canvas-sidebar`. And remove the `active` to close it.

    <div class="off-canvas">
      <!-- off-screen toggle button -->
      <a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-id">
        <i class="icon icon-menu"></i>
      </a>

      <div id="sidebar-id" class="off-canvas-sidebar">
        <!-- off-screen sidebar -->
      </div>

      <a class="off-canvas-overlay" href="#close"></a>

      <div class="off-canvas-content">
        <!-- off-screen content -->
      </div>
    </div>

### Parallax#

The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.

## tvOS parallax demo

    <div class="parallax">
      <div class="parallax-top-left" tabindex="1"></div>
      <div class="parallax-top-right" tabindex="2"></div>
      <div class="parallax-bottom-left" tabindex="3"></div>
      <div class="parallax-bottom-right" tabindex="4"></div>
      <div class="parallax-content">
        <div class="parallax-front">
          <h2>tvOS parallax demo</h2>
        </div>
        <div class="parallax-back">
          <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" ...>
        </div>
      </div>
    </div>

### Progress#

The Progress indicates the progress completion of a task.

    <progress class="progress" value="25" max="100"></progress>
    <progress class="progress" max="100"></progress>

### Sliders#

Sliders are for selecting values from ranges.

You can add the class `tooltip` to have tooltip labels. If no `data-tooltip` is set, the `value` will be used instead.

    <!-- Sliders -->
    <input class="slider" type="range" min="0" max="100" value="50">
    <!-- Sliders with tooltips -->
    <input class="slider tooltip" type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);">

### Timelines#

Timelines are ordered sequences of activities.

March 2016

Initial commit

February 2017

New Documents experience

Bars: represent the progress of a task

Steps: progress indicators of a sequence of task steps

Tiles: repeatable or embeddable information blocks

March 2017

Icons: single-element, responsive and pure CSS icons

Popovers: small overlay content containers

Calendars: date or date range picker and events display

Carousels: slideshows for cycling images

    <div class="timeline">
      <div class="timeline-item" id="timeline-example-1">
        <div class="timeline-left">
          <a class="timeline-icon" href="#timeline-example-1"></a>
        </div>
        <div class="timeline-content">
          <!-- tiles structure -->
        </div>
      </div>

      <div class="timeline-item" id="timeline-example-2">
        <div class="timeline-left">
          <a class="timeline-icon icon-lg" href="#timeline-example-2">
            <i class="icon icon-check"></i>
          </a>
        </div>
        <div class="timeline-content">
          <!-- tiles structure -->
        </div>
      </div>
      ...
    </div>

Documents · GitHub · Twitter · PayPal Donate · Version

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