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">
<!-- 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.
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 when the window width is smaller 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
<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.
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.
<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>