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 large

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Product launch event Lunch International Women's Day

Spring Equinox

Carousels

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

1 2 3 4

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.

<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">
    <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS El Capitan Wallpaper" />
  </div>
</div>

Progress

The Progress indicates the progress completion of a task.

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

Sliders

Sliders are for selecting values from ranges.

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

Getting started

Layout