From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 6 Nov 2018 18:52:37 +0800 Subject: Update the Docs completely --- docs/experimentals/autocomplete.html | 327 ++++++++++++++++++++ docs/experimentals/calendars.html | 585 +++++++++++++++++++++++++++++++++++ docs/experimentals/carousels.html | 294 ++++++++++++++++++ docs/experimentals/comparison.html | 250 +++++++++++++++ docs/experimentals/filters.html | 366 ++++++++++++++++++++++ docs/experimentals/meters.html | 246 +++++++++++++++ docs/experimentals/off-canvas.html | 262 ++++++++++++++++ docs/experimentals/parallax.html | 255 +++++++++++++++ docs/experimentals/progress.html | 241 +++++++++++++++ docs/experimentals/sliders.html | 240 ++++++++++++++ docs/experimentals/timelines.html | 298 ++++++++++++++++++ 11 files changed, 3364 insertions(+) create mode 100644 docs/experimentals/autocomplete.html create mode 100644 docs/experimentals/calendars.html create mode 100644 docs/experimentals/carousels.html create mode 100644 docs/experimentals/comparison.html create mode 100644 docs/experimentals/filters.html create mode 100644 docs/experimentals/meters.html create mode 100644 docs/experimentals/off-canvas.html create mode 100644 docs/experimentals/parallax.html create mode 100644 docs/experimentals/progress.html create mode 100644 docs/experimentals/sliders.html create mode 100644 docs/experimentals/timelines.html (limited to 'docs/experimentals') diff --git a/docs/experimentals/autocomplete.html b/docs/experimentals/autocomplete.html new file mode 100644 index 0000000..72a0f30 --- /dev/null +++ b/docs/experimentals/autocomplete.html @@ -0,0 +1,327 @@ + + + + Autocomplete - Experimentals - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

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>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/experimentals/calendars.html b/docs/experimentals/calendars.html new file mode 100644 index 0000000..7f42eb8 --- /dev/null +++ b/docs/experimentals/calendars.html @@ -0,0 +1,585 @@ + + + + Calendars - Experimentals - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Calendars

+
+
+ + + +
+
+ + +
+
+

Calendars are designed for date or date range picker and events display. It is made with flex layout.

+
+
+
+
+ +
March 2017
+ +
+
+
+
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

+
+
+
+
+ +
March 2017
+ +
+
+
+
Sun
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
+
+
+ +
+
+ +
Zhonghe Festival
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
Product launch eventInternational Women's Day
+
+
+ +
+
+ +
+
+ +
+
+ +
Arbor Day
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
Spring Equinox
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
April Fools' Day
+
+
+
+
+
+
+ 
<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>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/experimentals/carousels.html b/docs/experimentals/carousels.html new file mode 100644 index 0000000..0c7293e --- /dev/null +++ b/docs/experimentals/carousels.html @@ -0,0 +1,294 @@ + + + + Carousels - Experimentals - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Carousels

+
+
+ + + +
+
+ + +
+
+

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

+
+
+
+ + + + +
+
+ + macOS Yosemite Wallpaper +
+
+ + macOS Yosemite Wallpaper +
+
+ + macOS Yosemite Wallpaper +
+
+ + macOS Yosemite Wallpaper +
+
+
+ + + + +
+
+
+
+ 
<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>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/experimentals/comparison.html b/docs/experimentals/comparison.html new file mode 100644 index 0000000..a12db02 --- /dev/null +++ b/docs/experimentals/comparison.html @@ -0,0 +1,250 @@ + + + + Comparison sliders - Experimentals - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

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>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/experimentals/filters.html b/docs/experimentals/filters.html new file mode 100644 index 0000000..b1f5179 --- /dev/null +++ b/docs/experimentals/filters.html @@ -0,0 +1,366 @@ + + + + Filters - Experimentals - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

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>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/experimentals/meters.html b/docs/experimentals/meters.html new file mode 100644 index 0000000..4bb9286 --- /dev/null +++ b/docs/experimentals/meters.html @@ -0,0 +1,246 @@ + + + + Meters - Experimentals - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

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>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/experimentals/off-canvas.html b/docs/experimentals/off-canvas.html new file mode 100644 index 0000000..e9f3f9d --- /dev/null +++ b/docs/experimentals/off-canvas.html @@ -0,0 +1,262 @@ + + + + Off-canvas - Experimentals - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

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>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/experimentals/parallax.html b/docs/experimentals/parallax.html new file mode 100644 index 0000000..f1ef81c --- /dev/null +++ b/docs/experimentals/parallax.html @@ -0,0 +1,255 @@ + + + + Parallax - Experimentals - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

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>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/experimentals/progress.html b/docs/experimentals/progress.html new file mode 100644 index 0000000..a71b6bb --- /dev/null +++ b/docs/experimentals/progress.html @@ -0,0 +1,241 @@ + + + + Progress - Experimentals - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Progress

+
+
+ + + +
+
+ + +
+
+

The Progress indicates the progress completion of a task.

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ 
<progress class="progress" value="25" max="100"></progress>
+<progress class="progress" max="100"></progress>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/experimentals/sliders.html b/docs/experimentals/sliders.html new file mode 100644 index 0000000..ee79844 --- /dev/null +++ b/docs/experimentals/sliders.html @@ -0,0 +1,240 @@ + + + + Sliders - Experimentals - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

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);">
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/experimentals/timelines.html b/docs/experimentals/timelines.html new file mode 100644 index 0000000..929c9a2 --- /dev/null +++ b/docs/experimentals/timelines.html @@ -0,0 +1,298 @@ + + + + Timelines - Experimentals - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

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>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file -- cgit v1.3.1-26-gb76a