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.

Accordions

Accordions are used to toggle sections of content.

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

Calendars large

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

Carousels

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

macOS Yosemite Wallpaper
macOS Yosemite Wallpaper
macOS Yosemite Wallpaper
macOS Yosemite Wallpaper

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"></div>
    <!-- image (before) -->
    <div class="comparison-label">Before</div>
  </figure>

  <figure class="comparison-after"></div>
    <!-- image (after) -->
    <div class="comparison-label">After</div>
    <textarea class="comparison-resizer" readonly cols="0" rows="0"></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

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>

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"></div>
  <div class="parallax-top-right"></div>
  <div class="parallax-bottom-left"></div>
  <div class="parallax-bottom-right"></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" alt="macOS El Capitan Wallpaper" />
    </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.

<input class="slider" type="range" min="0" max="100" value="50" />

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>