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.
Cupcake ipsum
Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.
De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.
Candy ipsum
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.
Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.
<div class="off-canvas">
<input type="checkbox" class="off-canvas-checkbox" id="sidebar-checkbox" name="sidebar-checkbox" hidden>
<!-- off-screen toggle button and close mask -->
<label class="off-canvas-toggle btn btn-primary btn-lg" for="sidebar-checkbox">
<i class="icon icon-menu"></i>
</label>
<div class="off-canvas-sidebar">
<!-- off-screen sidebar -->
</div>
<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.
<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>