GitHub

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.less before browsers fully support them. Sometimes, there are some specific browsers targeted components.

Calendars

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

Sun
Mon
Tue
Wed
Thu
Fri
Sat

Calendars sizes

Sun
Mon
Tue
Wed
Thu
Fri
Sat

Carousels

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

Comparison Sliders

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

macOS Sierra Wallpaper
Before
macOS Sierra Wallpaper
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.

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.

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

macOS Yosemite Wallpaper
<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>