GitHub

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.scss before browsers fully support them. Sometimes, there are some specific browsers targeted components.

Autocomplete

Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.

Bruce Banner
AvatarThor Odinson
AvatarSteve Rogers
Tony Stark
Natasha Romanoff
Bruce BannerThor OdinsonThor Odinson

Add a container element with the form-autocomplete class. There are 2 parts of it, one is form-autocomplete-input, another is menu component. You may add the is-focused class to form-autocomplete-input to make it appear as focus state.

Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. The autocomplete HTML structure is exampled below.

Bruce Banner
AvatarThor Odinson
AvatarSteve Rogers
Tony Stark
Natasha Romanoff
<div class="form-autocomplete">
  <!-- autocomplete input container -->
  <div class="form-autocomplete-input form-input">

    <!-- autocomplete chips -->
    <div class="chip">
      <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson">
      Thor Odinson
      <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
    </div>

    <!-- autocomplete real input box -->
    <input class="form-input" type="text" placeholder="typing here">
  </div>

  <!-- autocomplete suggestion list -->
  <ul class="menu">
    <!-- menu list items -->
    <li class="menu-item">
      <a href="#">
        <div class="tile tile-centered">
          <div class="tile-icon">
            ...
          </div>
          <div class="tile-content">
            ...
          </div>
        </div>
      </a>
    </li>
  </ul>
</div>

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
<div class="calendar">
  <!-- calendar navbar -->
  <div class="calendar-nav navbar">
    <button class="btn btn-action btn-link btn-lg">
      <i class="icon icon-arrow-left"></i>
    </button>
    <div class="navbar-primary">March 2017</div>
    <button class="btn btn-action btn-link btn-lg">
      <i class="icon icon-arrow-right"></i>
    </button>
  </div>

  <div class="calendar-container">
    <div class="calendar-header">
      <div class="calendar-date">Sun</div>
      <div class="calendar-date">Mon</div>
      <div class="calendar-date">Tue</div>
      <div class="calendar-date">Wed</div>
      <div class="calendar-date">Thu</div>
      <div class="calendar-date">Fri</div>
      <div class="calendar-date">Sat</div>
    </div>

    <div class="calendar-body">
      <!-- calendar previous month -->
      <div class="calendar-date prev-month">
        <button class="date-item">26</button>
      </div>
      ...
      <div class="calendar-date prev-month">
        <button class="date-item">28</button>
      </div>

      <!-- calendar current month -->
      <div class="calendar-date">
        <button class="date-item">1</button>
      </div>
      <div class="calendar-date">
        <button class="date-item">2</button>
      </div>
      <div class="calendar-date">
        <button class="date-item">3</button>
      </div>
      <!-- calendar date: today -->
      <div class="calendar-date">
        <button class="date-item date-today">4</button>
      </div>
      <!-- calendar date: tooltip -->
      <div class="calendar-date tooltip" data-tooltip="You have appointments">
        <button class="date-item">5</button>
      </div>
      <!-- calendar date: not available -->
      <div class="calendar-date tooltip" data-tooltip="Not available">
        <button class="date-item" disabled="">6</button>
      </div>

      <!-- calendar range -->
      <div class="calendar-date calendar-range range-start">
        <button class="date-item">7</button>
      </div>
      <div class="calendar-date calendar-range">
        <button class="date-item">8</button>
      </div>
      <div class="calendar-date calendar-range range-end">
        <button class="date-item">9</button>
      </div>
      ...
      <div class="calendar-date">
        <button class="date-item">31</button>
      </div>

      <!-- calendar next month -->
      <div class="calendar-date next-month">
        <button class="date-item">1</button>
      </div>
    </div>
  </div>
</div>

Calendars sizes

Sun
Mon
Tue
Wed
Thu
Fri
Sat
<div class="calendar calendar-lg">
  <!-- calendar navbar structure -->

  <div class="calendar-container">
    <!-- calendar header structure -->

    <div class="calendar-body">
      <!-- calendar date with events -->
      <div class="calendar-date">
        <button class="date-item active">20</button>
        <div class="calendar-events">
          <a class="calendar-event bg-success text-light" href="#calendars">Spring Equinox</a>
        </div>
      </div>
    </div>
  </div>
</div>

Carousels

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

<div class="carousel">
  <!-- carousel locator -->
  <input class="carousel-locator" id="slide-1" type="radio" name="carousel-radio" hidden="" checked="">
  <input class="carousel-locator" id="slide-2" type="radio" name="carousel-radio" hidden="">
  <input class="carousel-locator" id="slide-3" type="radio" name="carousel-radio" hidden="">
  <input class="carousel-locator" id="slide-4" type="radio" name="carousel-radio" hidden="">
  
  <!-- carousel container -->
  <div class="carousel-container">
    <!-- carousel item -->
    <figure class="carousel-item">
      <label class="item-prev btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-left"></i></label>
      <label class="item-next btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper">
    </figure>
    <figure class="carousel-item">
      <label class="item-prev btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-left"></i></label>
      <label class="item-next btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper">
    </figure>
    <figure class="carousel-item">
      <label class="item-prev btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-left"></i></label>
      <label class="item-next btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-el-capitan.jpg" alt="macOS Yosemite Wallpaper">
    </figure>
    <figure class="carousel-item">
      <label class="item-prev btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-left"></i></label>
      <label class="item-next btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-el-capitan-2.jpg" alt="macOS Yosemite Wallpaper">
    </figure>
  </div>
  <!-- carousel navigation -->
  <div class="carousel-nav">
    <label class="nav-item text-hide c-hand" for="slide-1">1</label>
    <label class="nav-item text-hide c-hand" for="slide-2">2</label>
    <label class="nav-item text-hide c-hand" for="slide-3">3</label>
    <label class="nav-item text-hide c-hand" for="slide-4">4</label>
  </div>
</div>

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">
    <!-- 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.

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

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 whenever the window width is. But you can add the off-canvas-sidebar-show class to the off-canvas to make the sidebar expanded when the window width is larger 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

macOS Yosemite Wallpaper
<div class="parallax">
  <div class="parallax-top-left" tabindex="1"></div>
  <div class="parallax-top-right" tabindex="2"></div>
  <div class="parallax-bottom-left" tabindex="3"></div>
  <div class="parallax-bottom-right" tabindex="4"></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.

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>