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/src/experimentals/autocomplete.pug | 135 ++++++++++++++ docs/src/experimentals/calendars.pug | 314 ++++++++++++++++++++++++++++++++ docs/src/experimentals/carousels.pug | 94 ++++++++++ docs/src/experimentals/comparison.pug | 45 +++++ docs/src/experimentals/filters.pug | 123 +++++++++++++ docs/src/experimentals/meters.pug | 38 ++++ docs/src/experimentals/off-canvas.pug | 61 +++++++ docs/src/experimentals/parallax.pug | 50 +++++ docs/src/experimentals/progress.pug | 33 ++++ docs/src/experimentals/sliders.pug | 34 ++++ docs/src/experimentals/timelines.pug | 97 ++++++++++ 11 files changed, 1024 insertions(+) create mode 100644 docs/src/experimentals/autocomplete.pug create mode 100644 docs/src/experimentals/calendars.pug create mode 100644 docs/src/experimentals/carousels.pug create mode 100644 docs/src/experimentals/comparison.pug create mode 100644 docs/src/experimentals/filters.pug create mode 100644 docs/src/experimentals/meters.pug create mode 100644 docs/src/experimentals/off-canvas.pug create mode 100644 docs/src/experimentals/parallax.pug create mode 100644 docs/src/experimentals/progress.pug create mode 100644 docs/src/experimentals/sliders.pug create mode 100644 docs/src/experimentals/timelines.pug (limited to 'docs/src/experimentals') diff --git a/docs/src/experimentals/autocomplete.pug b/docs/src/experimentals/autocomplete.pug new file mode 100644 index 0000000..c112c46 --- /dev/null +++ b/docs/src/experimentals/autocomplete.pug @@ -0,0 +1,135 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'autocomplete' + - var parent = 'experimentals' + - var title = 'Autocomplete - Experimentals - Spectre.css CSS Framework' + - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + +block docs-content + +docs-heading('autocomplete', 'Autocomplete') + include ../_layout/_ad-g.pug + + p + | Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. + + .docs-demo.columns + .column.col-9.col-xs-12 + .form-group + .form-autocomplete + .form-autocomplete-input.form-input + span.chip + | Bruce Banner + .chip + img.avatar.avatar-sm(src="../img/avatar-1.png" alt="Avatar") + | Thor Odinson + .chip + img.avatar.avatar-sm(src="../img/avatar-4.png" alt="Avatar") + | Steve Rogers + .chip + figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;") + | Tony Stark + span.chip.active + | Natasha Romanoff + input.form-input(type="text" placeholder="") + .column.col-9.col-xs-12 + .form-group + .form-autocomplete + .form-autocomplete-input.form-input.is-focused + span.chip + | Bruce Banner + a.btn.btn-clear(href="#" aria-label="Close" role="button") + span.chip + img.avatar.avatar-sm(src="../img/avatar-1.png" alt="Thor Odinson") + | Thor Odinson + a.btn.btn-clear(href="#" aria-label="Close" role="button") + .has-icon-left + input.form-input(type="text" placeholder="" value="S") + i.form-icon.loading + ul.menu + li.menu-item + a(href="#autocomplete") + .tile.tile-centered + .tile-icon + img.avatar.avatar-sm(src="../img/avatar-4.png" alt="Steve Rogers") + .tile-content + mark S + | teve Roger + mark s + li.menu-item + a(href="#autocomplete") + .tile.tile-centered + .tile-icon + figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;") + .tile-content + | Tony + mark S + | tark + + p + | Add a container element with the #[code form-autocomplete] class. + | There are 2 parts of it, one is #[code form-autocomplete-input], another is #[code menu] component. + | You may add the #[code is-focused] class to #[code form-autocomplete-input] to make it appear as focus state. + p + | 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. + + .docs-demo.columns + .column.col-9.col-xs-12 + .form-group + .form-autocomplete.autocomplete-oneline + .form-autocomplete-input.form-input + span.chip + | Bruce Banner + .chip + img.avatar.avatar-sm(src="../img/avatar-1.png" alt="Avatar") + | Thor Odinson + .chip + img.avatar.avatar-sm(src="../img/avatar-4.png" alt="Avatar") + | Steve Rogers + .chip + figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;") + | Tony Stark + span.chip.active + | Natasha Romanoff + input.form-input(type="text" placeholder="") + + pre.code(data-lang='HTML') + code + :highlight(lang="html") +
+ +
+ + +
+ Thor Odinson + Thor Odinson + +
+ + + +
+ + + +
+ + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/experimentals/calendars.pug b/docs/src/experimentals/calendars.pug new file mode 100644 index 0000000..3c543d2 --- /dev/null +++ b/docs/src/experimentals/calendars.pug @@ -0,0 +1,314 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'calendars' + - var parent = 'experimentals' + - var title = 'Calendars - Experimentals - Spectre.css CSS Framework' + - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + +block docs-content + +docs-heading('calendars', 'Calendars') + include ../_layout/_ad-g.pug + + p + | Calendars are designed for date or date range picker and events display. It is made with flex layout. + + .docs-demo.columns + .column.col-4.col-md-12 + .calendar + .calendar-nav.navbar + button.btn.btn-action.btn-link.btn-lg + i.icon.icon-arrow-left + .navbar-primary March 2017 + button.btn.btn-action.btn-link.btn-lg + i.icon.icon-arrow-right + .calendar-container + .calendar-header + .calendar-date Sun + .calendar-date Mon + .calendar-date Tue + .calendar-date Wed + .calendar-date Thu + .calendar-date Fri + .calendar-date Sat + .calendar-body + .calendar-date.prev-month + button.date-item 26 + .calendar-date.prev-month + button.date-item 27 + .calendar-date.prev-month + button.date-item 28 + .calendar-date + button.date-item 1 + .calendar-date + button.date-item 2 + .calendar-date + button.date-item 3 + .calendar-date.tooltip(data-tooltip="Today") + button.date-item.date-today 4 + .calendar-date.tooltip(data-tooltip="Not available") + button.date-item(disabled="") 5 + .calendar-date + button.date-item 6 + .calendar-date + button.date-item 7 + .calendar-date.tooltip(data-tooltip="You have appointments") + button.date-item.badge 8 + .calendar-date + button.date-item 9 + .calendar-date + button.date-item 10 + .calendar-date + button.date-item 11 + .calendar-date + button.date-item 12 + .calendar-date + button.date-item 13 + .calendar-date + button.date-item 14 + .calendar-date + button.date-item 15 + .calendar-date.calendar-range.range-start + button.date-item 16 + .calendar-date.calendar-range + button.date-item 17 + .calendar-date.calendar-range + button.date-item 18 + .calendar-date.calendar-range + button.date-item 19 + .calendar-date.calendar-range.range-end + button.date-item 20 + .calendar-date + button.date-item 21 + .calendar-date + button.date-item 22 + .calendar-date + button.date-item 23 + .calendar-date + button.date-item 24 + .calendar-date + button.date-item 25 + .calendar-date + button.date-item 26 + .calendar-date + button.date-item 27 + .calendar-date + button.date-item 28 + .calendar-date + button.date-item 29 + .calendar-date + button.date-item 30 + .calendar-date + button.date-item 31 + .calendar-date.next-month + button.date-item 1 + + pre.code(data-lang='HTML') + code + :highlight(lang="html") +
+ +
+ +
March 2017
+ +
+ +
+
+
Sun
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
+ +
+ +
+ +
+ ... +
+ +
+ + +
+ +
+
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+ +
+
+ +
+
+ +
+ ... +
+ +
+ + +
+ +
+
+
+
+ + +docs-subheading('calendars-sizes', 'Calendars sizes') + + .docs-demo.columns + .column.col-12 + .calendar.calendar-lg + .calendar-nav.navbar + button.btn.btn-action.btn-link.btn-lg + i.icon.icon-arrow-left + .navbar-primary March 2017 + button.btn.btn-action.btn-link.btn-lg + i.icon.icon-arrow-right + .calendar-container + .calendar-header + .calendar-date Sun + .calendar-date Mon + .calendar-date Tue + .calendar-date Wed + .calendar-date Thu + .calendar-date Fri + .calendar-date Sat + .calendar-body + .calendar-date.prev-month + button.date-item 26 + .calendar-date.prev-month + button.date-item 27 + .calendar-events + a.calendar-event.bg-error.text-light(href="#calendars") Zhonghe Festival + .calendar-date.prev-month + button.date-item 28 + .calendar-date + button.date-item 1 + .calendar-date + button.date-item 2 + .calendar-date + button.date-item 3 + .calendar-date.tooltip(data-tooltip="Today") + button.date-item.date-today 4 + .calendar-date + button.date-item(disabled="") 5 + .calendar-date + button.date-item 6 + .calendar-date + button.date-item 7 + .calendar-date.tooltip(data-tooltip="You have appointments") + button.date-item.badge 8 + .calendar-events + a.calendar-event.bg-primary.text-light(href="#calendars") Product launch event + a.calendar-event.bg-error.text-light(href="#calendars") International Women's Day + .calendar-date + button.date-item 9 + .calendar-date + button.date-item 10 + .calendar-date + button.date-item 11 + .calendar-date + button.date-item 12 + .calendar-events + a.calendar-event.bg-error.text-light(href="#calendars") Arbor Day + .calendar-date + button.date-item 13 + .calendar-date + button.date-item 14 + .calendar-date + button.date-item 15 + .calendar-date.calendar-range.range-start + button.date-item 16 + .calendar-date.calendar-range + button.date-item 17 + .calendar-date.calendar-range + button.date-item 18 + .calendar-date.calendar-range + button.date-item 19 + .calendar-date.calendar-range.range-end + button.date-item 20 + .calendar-events + a.calendar-event.bg-success.text-light(href="#calendars") Spring Equinox + .calendar-date + button.date-item 21 + .calendar-date + button.date-item 22 + .calendar-date + button.date-item 23 + .calendar-date + button.date-item 24 + .calendar-date + button.date-item 25 + .calendar-date + button.date-item 26 + .calendar-date + button.date-item 27 + .calendar-date + button.date-item 28 + .calendar-date + button.date-item 29 + .calendar-date + button.date-item 30 + .calendar-date + button.date-item 31 + .calendar-date.next-month.disabled + button.date-item 1 + .calendar-events + a.calendar-event.bg-error.text-light(href="#calendars") April Fools' Day + + pre.code(data-lang='HTML') + code + :highlight(lang="html") +
+ + +
+ + +
+ +
+ +
+ Spring Equinox +
+
+
+
+
+ + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/experimentals/carousels.pug b/docs/src/experimentals/carousels.pug new file mode 100644 index 0000000..3ae34bb --- /dev/null +++ b/docs/src/experimentals/carousels.pug @@ -0,0 +1,94 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'carousels' + - var parent = 'experimentals' + - var title = 'Carousels - Experimentals - Spectre.css CSS Framework' + - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + +block docs-content + +docs-heading('carousels', 'Carousels') + include ../_layout/_ad-g.pug + + p Carousels are slideshows for cycling images. It is built in pure CSS. + + .docs-demo.columns + .column.col-12 + .carousel + input#slide-1.carousel-locator(type="radio" name="carousel-radio" hidden="" checked="") + input#slide-2.carousel-locator(type="radio" name="carousel-radio" hidden="") + input#slide-3.carousel-locator(type="radio" name="carousel-radio" hidden="") + input#slide-4.carousel-locator(type="radio" name="carousel-radio" hidden="") + .carousel-container + figure.carousel-item + label.item-prev.btn.btn-action.btn-lg(for="slide-4") + i.icon.icon-arrow-left + label.item-next.btn.btn-action.btn-lg(for="slide-2") + i.icon.icon-arrow-right + img.img-responsive.rounded(src="../img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper") + figure.carousel-item + label.item-prev.btn.btn-action.btn-lg(for="slide-1") + i.icon.icon-arrow-left + label.item-next.btn.btn-action.btn-lg(for="slide-3") + i.icon.icon-arrow-right + img.img-responsive.rounded(src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper") + figure.carousel-item + label.item-prev.btn.btn-action.btn-lg(for="slide-2") + i.icon.icon-arrow-left + label.item-next.btn.btn-action.btn-lg(for="slide-4") + i.icon.icon-arrow-right + img.img-responsive.rounded(src="../img/osx-el-capitan.jpg" alt="macOS Yosemite Wallpaper") + figure.carousel-item + label.item-prev.btn.btn-action.btn-lg(for="slide-3") + i.icon.icon-arrow-left + label.item-next.btn.btn-action.btn-lg(for="slide-1") + i.icon.icon-arrow-right + img.img-responsive.rounded(src="../img/osx-el-capitan-2.jpg" alt="macOS Yosemite Wallpaper") + .carousel-nav + label.nav-item.text-hide.c-hand(for="slide-1") 1 + label.nav-item.text-hide.c-hand(for="slide-2") 2 + label.nav-item.text-hide.c-hand(for="slide-3") 3 + label.nav-item.text-hide.c-hand(for="slide-4") 4 + + pre.code(data-lang='HTML') + code + :highlight(lang="html") +
+ + + + + + + +
+ +
+ + macOS Yosemite Wallpaper +
+
+ + macOS Yosemite Wallpaper +
+
+ + macOS Yosemite Wallpaper +
+
+ + macOS Yosemite Wallpaper +
+
+ +
+ + + + +
+
+ + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/experimentals/comparison.pug b/docs/src/experimentals/comparison.pug new file mode 100644 index 0000000..cdf135c --- /dev/null +++ b/docs/src/experimentals/comparison.pug @@ -0,0 +1,45 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'comparison' + - var parent = 'experimentals' + - var title = 'Comparison sliders - Experimentals - Spectre.css CSS Framework' + - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + +block docs-content + +docs-heading('comparison', 'Comparison sliders') + include ../_layout/_ad-g.pug + + p + | Comparison Sliders are sliders for comparing two images. It is built in pure CSS. + + .docs-demo.columns + .column.col-12 + .comparison-slider + figure.comparison-before + img.rounded(src="../img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper") + .comparison-label Before + figure.comparison-after + img.filter-grayscale.rounded(src="../img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper") + .comparison-label After + textarea.comparison-resizer(readonly="") + + pre.code(data-lang='HTML') + code + :highlight(lang="html") +
+
+ +
Before
+
+ +
+ +
After
+ +
+
+ + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/experimentals/filters.pug b/docs/src/experimentals/filters.pug new file mode 100644 index 0000000..d31c6f7 --- /dev/null +++ b/docs/src/experimentals/filters.pug @@ -0,0 +1,123 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'filters' + - var parent = 'experimentals' + - var title = 'Filters - Experimentals - Spectre.css CSS Framework' + - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + +block docs-content + +docs-heading('filters', 'Filters') + include ../_layout/_ad-g.pug + + p Filters are CSS only content filters. + + .docs-demo.columns + .column.col-12 + .filter + input#tag-0.filter-tag(type="radio" name="filter-radio" hidden="" checked="") + input#tag-1.filter-tag(type="radio" name="filter-radio" hidden="") + input#tag-2.filter-tag(type="radio" name="filter-radio" hidden="") + input#tag-3.filter-tag(type="radio" name="filter-radio" hidden="") + input#tag-4.filter-tag(type="radio" name="filter-radio" hidden="") + .filter-nav + label.chip(for="tag-0") All + label.chip(for="tag-1") Action + label.chip(for="tag-2") Roleplaying + label.chip(for="tag-3") Shooter + label.chip(for="tag-4") Sports + .filter-body.columns + .column.col-4.filter-item(data-tag="tag-2") + .card + .card-header + .card-title Fallout 4 + .card-subtitle Roleplaying + .column.col-4.filter-item(data-tag="tag-3") + .card + .card-header + .card-title Halo 5 + .card-subtitle Shooter + .column.col-4.filter-item(data-tag="tag-1") + .card + .card-header + .card-title Quantum Break + .card-subtitle Action + .column.col-4.filter-item(data-tag="tag-4") + .card + .card-header + .card-title Forza Horizon 3 + .card-subtitle Sports + .column.col-4.filter-item(data-tag="tag-2") + .card + .card-header + .card-title Final Fantasy XV + .card-subtitle Roleplaying + .column.col-4.filter-item(data-tag="tag-4") + .card + .card-header + .card-title NBA 2K17 + .card-subtitle Sports + .column.col-4.filter-item(data-tag="tag-3") + .card + .card-header + .card-title Battlefield 1 + .card-subtitle Shooter + .column.col-4.filter-item(data-tag="tag-1") + .card + .card-header + .card-title GTA V + .card-subtitle Action + .column.col-4.filter-item(data-tag="tag-4") + .card + .card-header + .card-title FIFA 17 + .card-subtitle Sports + .column.col-4.filter-item(data-tag="tag-3") + .card + .card-header + .card-title Overwatch + .card-subtitle Shooter + .column.col-4.filter-item(data-tag="tag-3") + .card + .card-header + .card-title Titanfall 2 + .card-subtitle Shooter + .column.col-4.filter-item(data-tag="tag-3") + .card + .card-header + .card-title Gears of Wars 4 + .card-subtitle Shooter + + p + | Filters use #[code tag-1] to #[code tag-8] to flag different tags. + | #[code tag-0] is reserved for clearing filter (or showing all). + | You can overwrite #[code $filter-number] in #[code _filters.scss] to have more filters. + + pre.code(data-lang='HTML') + code + :highlight(lang="html") +
+ + + + +
+ + + +
+ +
+
+ +
+
+ +
+ +
+
+ + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/experimentals/meters.pug b/docs/src/experimentals/meters.pug new file mode 100644 index 0000000..5ac11b5 --- /dev/null +++ b/docs/src/experimentals/meters.pug @@ -0,0 +1,38 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'meters' + - var parent = 'experimentals' + - var title = 'Meters - Experimentals - Spectre.css CSS Framework' + - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + +block docs-content + +docs-heading('meters', 'Meters') + include ../_layout/_ad-g.pug + + p Meters represent the value within the known range. + + .docs-demo.columns + .column.col-3.col-xs-12 + meter.meter(value="20" min="0" max="100") + .column.col-3.col-xs-12 + meter.meter(value="60" min="0" low="30" optimum="60" high="80" max="100") + .column.col-3.col-xs-12 + meter.meter(value="85" min="0" low="30" high="80" max="100") + .column.col-3.col-xs-12 + meter.meter(value="20" min="0" low="30" optimum="90" high="80" max="100") + + pre.code(data-lang='HTML') + code + :highlight(lang="html") + + + + + + + + + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/experimentals/off-canvas.pug b/docs/src/experimentals/off-canvas.pug new file mode 100644 index 0000000..51fe9d0 --- /dev/null +++ b/docs/src/experimentals/off-canvas.pug @@ -0,0 +1,61 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'off-canvas' + - var parent = 'experimentals' + - var title = 'Off-canvas - Experimentals - Spectre.css CSS Framework' + - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + +block docs-content + +docs-heading('off-canvas', 'Off-canvas') + include ../_layout/_ad-g.pug + + p + | The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS. + p + | By default, the off-canvas menu is collapsed whenever the window width is. + | But you can add the #[code off-canvas-sidebar-show] class to the #[code off-canvas] to make the sidebar expanded when the window width is larger than or equal to #[strong 960px]. + + .docs-demo.columns + .column + .off-canvas.off-canvas-sidebar-show + a.off-canvas-toggle.btn.btn-primary.btn-action(href="#sidebar-demo") + i.icon.icon-menu + #sidebar-demo.off-canvas-sidebar.flex-centered + span Sidebar + a.off-canvas-overlay(href="#close") + .off-canvas-content + .content + h4 Lorem ipsum + p + | 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. + p + | 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. + + p + | You can open the sidebar by adding the class #[code active] to #[code off-canvas-sidebar]. + | And remove the #[code active] to close it. + + pre.code(data-lang='HTML') + code + :highlight(lang="html") +
+ + + + + + + + + +
+ +
+
+ + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/experimentals/parallax.pug b/docs/src/experimentals/parallax.pug new file mode 100644 index 0000000..df84a5f --- /dev/null +++ b/docs/src/experimentals/parallax.pug @@ -0,0 +1,50 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'parallax' + - var parent = 'experimentals' + - var title = 'Parallax - Experimentals - Spectre.css CSS Framework' + - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + +block docs-content + +docs-heading('parallax', 'Parallax') + include ../_layout/_ad-g.pug + + p + | The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS. + + .docs-demo.columns + .column.col-sm-12.col-8.col-mx-auto + .parallax + .parallax-top-left(tabindex="1") + .parallax-top-right(tabindex="2") + .parallax-bottom-left(tabindex="3") + .parallax-bottom-right(tabindex="4") + .parallax-content + .parallax-front + h2 tvOS parallax demo + .parallax-back + img.img-responsive.rounded(src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper") + + pre.code(data-lang='HTML') + code + :highlight(lang="html") +
+
+
+
+
+
+
+

tvOS parallax demo

+
+
+ +
+
+
+ + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug + \ No newline at end of file diff --git a/docs/src/experimentals/progress.pug b/docs/src/experimentals/progress.pug new file mode 100644 index 0000000..585b731 --- /dev/null +++ b/docs/src/experimentals/progress.pug @@ -0,0 +1,33 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'progress' + - var parent = 'experimentals' + - var title = 'Progress - Experimentals - Spectre.css CSS Framework' + - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + +block docs-content + +docs-heading('progress', 'Progress') + include ../_layout/_ad-g.pug + + p The Progress indicates the progress completion of a task. + + .docs-demo.columns + .column.col-3.col-xs-12 + progress.progress(value="75" max="100") + .column.col-3.col-xs-12 + progress.progress(value="50" max="100") + .column.col-3.col-xs-12 + progress.progress(value="25" max="100") + .column.col-3.col-xs-12 + progress.progress(max="100") + + pre.code(data-lang='HTML') + code + :highlight(lang="html") + + + + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/experimentals/sliders.pug b/docs/src/experimentals/sliders.pug new file mode 100644 index 0000000..c15d270 --- /dev/null +++ b/docs/src/experimentals/sliders.pug @@ -0,0 +1,34 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'sliders' + - var parent = 'experimentals' + - var title = 'Sliders - Experimentals - Spectre.css CSS Framework' + - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + +block docs-content + +docs-heading('sliders', 'Sliders') + include ../_layout/_ad-g.pug + + p Sliders are for selecting values from ranges. + p + | You can add the class #[code tooltip] to have tooltip labels. + | If no #[code data-tooltip] is set, the #[code value] will be used instead. + + .docs-demo.columns + .column.col-6.col-xs-12 + input.slider.tooltip(type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);") + .column.col-6.col-xs-12 + input.slider(type="range" min="0" max="100" value="50" disabled="") + + pre.code(data-lang='HTML') + code + :highlight(lang="html") + + + + + + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/experimentals/timelines.pug b/docs/src/experimentals/timelines.pug new file mode 100644 index 0000000..1a9165e --- /dev/null +++ b/docs/src/experimentals/timelines.pug @@ -0,0 +1,97 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'timelines' + - var parent = 'experimentals' + - var title = 'Timelines - Experimentals - Spectre.css CSS Framework' + - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + +block docs-content + +docs-heading('timelines', 'Timelines') + include ../_layout/_ad-g.pug + + p Timelines are ordered sequences of activities. + + .docs-demo.columns + .column.col-9.col-sm-12 + .timeline + #timeline-example-1.timeline-item + .timeline-left + a.timeline-icon.tooltip(href="#timeline-example-1" data-tooltip="March 2016") + .timeline-content + .tile + .tile-content + p.tile-subtitle March 2016 + p.tile-title Initial commit + #timeline-example-2.timeline-item + .timeline-left + a.timeline-icon.icon-lg.tooltip(href="#timeline-example-2" data-tooltip="February 2017") + i.icon.icon-check + .timeline-content + .tile + .tile-content + p.tile-subtitle February 2017 + p.tile-title New Documents experience + p.tile-title + a(href="components.html#bars") Bars + | : represent the progress of a task + p.tile-title + a(href="components.html#steps") Steps + | : progress indicators of a sequence of task steps + p.tile-title + a(href="components.html#tiles") Tiles + | : repeatable or embeddable information blocks + .tile-action + button.btn View + #timeline-example-3.timeline-item + .timeline-left + a.timeline-icon.icon-lg.tooltip(href="#timeline-example-3" data-tooltip="March 2017") + i.icon.icon-check + .timeline-content + .tile + .tile-content + p.tile-subtitle March 2017 + p.tile-title + a(href="elements.html#icons") Icons + | : single-element, responsive and pure CSS icons + p.tile-title + a(href="components.html#popovers") Popovers + | : small overlay content containers + p.tile-title + a(href="experimentals.html#calendars") Calendars + | : date or date range picker and events display + p.tile-title + a(href="experimentals.html#carousels") Carousels + | : slideshows for cycling images + .tile-action + button.btn View + + pre.code(data-lang='HTML') + code + :highlight(lang="html") +
+
+
+ +
+
+ +
+
+ +
+
+ + + +
+
+ +
+
+ ... +
+ + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file -- cgit v1.3.1-23-gd82d