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.
Calendars sizes
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.
<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></textarea>
</figure>
</div>
Filters
Filters are CSS only content filters.
<div class="filter">
<input type="radio" id="tag-all" class="filter-tag" name="filter-radio" hidden checked>
<input type="radio" id="tag-action" class="filter-tag" name="filter-radio" hidden>
<input type="radio" id="tag-roleplaying" class="filter-tag" name="filter-radio" hidden>
<div class="filter-nav">
<label class="chip" for="tag-all">All</label>
<label class="chip" for="tag-action">Action</label>
<label class="chip" for="tag-roleplaying">Roleplaying</label>
</div>
<div class="filter-body">
<div class="filter-item card" data-tag="tag-action">
<!-- Filter item content -->
</div>
<div class="filter-item card" data-tag="tag-roleplaying">
<!-- 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>
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"></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" ...>
</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.
<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>