diff options
Update old docs to new Pug templates
43 files changed, 2809 insertions, 2 deletions
diff --git a/docs/src/_docs-layout.pug b/docs/src/_docs-layout.pug index ae2da02..864e458 100644 --- a/docs/src/_docs-layout.pug +++ b/docs/src/_docs-layout.pug @@ -53,9 +53,9 @@ block content {url: '#cards', name: 'Cards'}, {url: '#chips', name: 'Chips'}, {url: '#empty', name: 'Empty states'}, - {url: '#menus', name: 'Menus'}, + {url: '#menu', name: 'Menu'}, {url: '#modals', name: 'Modals'}, - {url: '#navs', name: 'Navs'}, + {url: '#nav', name: 'Nav'}, {url: '#pagination', name: 'Pagination'}, {url: '#panels', name: 'Panels'}, {url: '#popovers', name: 'Popovers'}, diff --git a/docs/src/components.pug b/docs/src/components.pug new file mode 100644 index 0000000..87e39ca --- /dev/null +++ b/docs/src/components.pug @@ -0,0 +1,83 @@ +extends _docs-layout.pug + +block variables + - var title = 'Components - Spectre.css CSS Framework' + - var description = '' + - var current = 'components' + +block docs-content + //- Accordions + +docs-heading('accordions', 'Accordions') + include contents/accordions.pug + + //- Avatars + +docs-heading('avatars', 'Avatars') + include contents/avatars.pug + + //- Badges + +docs-heading('badges', 'Badges') + include contents/badges.pug + + //- Bars + +docs-heading('bars', 'Bars') + include contents/bars.pug + + //- Breadcrumbs + +docs-heading('breadcrumbs', 'Breadcrumbs') + include contents/breadcrumbs.pug + + //- Cards + +docs-heading('cards', 'Cards') + include contents/cards.pug + + //- Chips + +docs-heading('chips', 'Chips') + include contents/chips.pug + + //- Empty states + +docs-heading('empty', 'Empty states') + include contents/empty.pug + + //- Menu + +docs-heading('menu', 'Menu') + include contents/menu.pug + + //- Modals + +docs-heading('modals', 'Modals') + include contents/modals.pug + + //- Nav + +docs-heading('nav', 'Nav') + include contents/nav.pug + + //- Pagination + +docs-heading('pagination', 'Pagination') + include contents/pagination.pug + + //- Panels + +docs-heading('panels', 'Panels') + include contents/panels.pug + + //- Popovers + +docs-heading('popovers', 'Popovers') + include contents/popovers.pug + + //- Steps + +docs-heading('steps', 'Steps') + include contents/steps.pug + + //- Tabs + +docs-heading('tabs', 'Tabs') + include contents/tabs.pug + + //- Tiles + +docs-heading('tiles', 'Tiles') + include contents/tiles.pug + + //- Toasts + +docs-heading('toasts', 'Toasts') + include contents/toasts.pug + + //- Tooltips + +docs-heading('tooltips', 'Tooltips') + include contents/tooltips.pug
\ No newline at end of file diff --git a/docs/src/contents/accordions.pug b/docs/src/contents/accordions.pug new file mode 100644 index 0000000..8914516 --- /dev/null +++ b/docs/src/contents/accordions.pug @@ -0,0 +1,113 @@ +p Accordions are used to toggle sections of content. + +.columns + .column.col-6.col-md-12 + .accordion + input#accordion-1(type="radio" name="accordion-radio" hidden="" checked="") + label.accordion-header.c-hand(for="accordion-1") + i.icon.icon-arrow-right.mr-1 + | Elements + .accordion-body + ul.menu.menu-nav + li.menu-item + a(href="#accordions") Element 1 + li.menu-item + a(href="#accordions") Element 2 + .accordion + input#accordion-2(type="radio" name="accordion-radio" hidden="") + label.accordion-header.c-hand(for="accordion-2") + i.icon.icon-arrow-right.mr-1 + | Layout + .accordion-body + ul.menu.menu-nav + li.menu-item + a(href="#accordions") Layout 1 + li.menu-item + a(href="#accordions") Layout 2 + .accordion + input#accordion-3(type="radio" name="accordion-radio" hidden="") + label.accordion-header.c-hand(for="accordion-3") + i.icon.icon-arrow-right.mr-1 + | Components + .accordion-body + ul.menu.menu-nav + li.menu-item + a(href="#accordions") Component 1 + li.menu-item + a(href="#accordions") Component 2 + .column.col-6.col-md-12 + .accordion + input#accordion-4(type="checkbox" name="accordion-checkbox" hidden="" checked="") + label.accordion-header.c-hand(for="accordion-4") + | Elements + .accordion-body + ul.menu.menu-nav + li.menu-item + a(href="#accordions") Element 1 + li.menu-item + a(href="#accordions") Element 2 + .accordion + input#accordion-5(type="checkbox" name="accordion-checkbox" hidden="") + label.accordion-header.c-hand(for="accordion-5") + | Layout + .accordion-body + ul.menu.menu-nav + li.menu-item + a(href="#accordions") Layout 1 + li.menu-item + a(href="#accordions") Layout 2 + .accordion + input#accordion-6(type="checkbox" name="accordion-checkbox" hidden="") + label.accordion-header.c-hand(for="accordion-6") + | Components + .accordion-body + ul.menu.menu-nav + li.menu-item + a(href="#accordions") Component 1 + li.menu-item + a(href="#accordions") Component 2 + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- standard Accordions example --> + <div class="accordion"> + <input type="checkbox" id="accordion-1" name="accordion-checkbox" hidden> + <label class="accordion-header"> + <i class="icon icon-arrow-right mr-1"></i> + Title + </label> + <div class="accordion-body"> + <!-- Accordions content --> + </div> + </div> + + <!-- mutually exclusive Accordions example (with same input names) --> + <div class="accordion"> + <input type="radio" id="accordion-1" name="accordion-radio" hidden> + <label class="accordion-header"> + Title + </label> + <div class="accordion-body"> + <!-- Accordions content --> + </div> + </div> + +p + | Alternatively, you can use #[code details] and #[code summary] instead of #[code input] radio or checkbox trick. + | Add the #[code open] attribute to #[code details] to expand it. + | Microsoft Edge support is #[a(href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/" target="_blank") under consideration]. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- details and summary Accordions example --> + <details class="accordion" open> + <summary class="accordion-header"> + <i class="icon icon-arrow-right mr-1"></i> + Title + </summary> + <div class="accordion-body"> + <!-- Accordions content --> + </div> + </details>
\ No newline at end of file diff --git a/docs/src/contents/autocomplete.pug b/docs/src/contents/autocomplete.pug new file mode 100644 index 0000000..ca93c8a --- /dev/null +++ b/docs/src/contents/autocomplete.pug @@ -0,0 +1,119 @@ +p + | Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. + +.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. + +.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") + <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 chips --> + <li class="menu-item"> + <a href="#"> + <div class="tile tile-centered"> + <div class="tile-icon"> + <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers"> + </div> + <div class="tile-content"> + Steve Rogers + </div> + </div> + </a> + </li> + </ul> + </div>
\ No newline at end of file diff --git a/docs/src/contents/avatars.pug b/docs/src/contents/avatars.pug new file mode 100644 index 0000000..ff8f6c6 --- /dev/null +++ b/docs/src/contents/avatars.pug @@ -0,0 +1,93 @@ +p Avatars are user profile pictures. + +.columns + .column.col-6.col-xs-12 + figure.avatar.avatar-xl + img(src="img/avatar-1.png" alt="Avatar XL") + figure.avatar.avatar-lg + img(src="img/avatar-2.png" alt="Avatar LG") + figure.avatar + img(src="img/avatar-3.png" alt="Avatar") + figure.avatar.avatar-sm + img(src="img/avatar-4.png" alt="Avatar SM") + figure.avatar.avatar-xs + img(src="img/avatar-5.png" alt="Avatar XS") + .column.col-6.col-xs-12 + figure.avatar.avatar-xl(data-initial="YZ") + figure.avatar.avatar-lg(data-initial="YZ") + figure.avatar(data-initial="YZ") + figure.avatar.avatar-sm(data-initial="YZ") + figure.avatar.avatar-xs(data-initial="YZ") + +p + | Add the #[code avatar] class to #{'<img>'} element. + | There are 4 additional sizes available, including #[code avatar-xl](64px), #[code avatar-lg](48px), #[code avatar-sm](24px), and #[code avatar-xs](16px). + | By default, the avatar size is 32px. +p + | For users who don't have profile pictures, you may use their initials for avatars. + | Add the #[code avatar] class and avatar size class to #{'<div>'} element. + | The #[code data-initial] attribute is the name appear inside the avatar. + +.columns + .column.col-6.col-xs-12 + figure.avatar.avatar-xl + img(src="img/avatar-1.png" alt="Avatar") + img.avatar-icon(src="img/avatar-2.png" alt="Avatar") + figure.avatar.avatar-lg + img(src="img/avatar-2.png" alt="Avatar") + img.avatar-icon(src="img/avatar-3.png" alt="Avatar") + figure.avatar + img(src="img/avatar-3.png" alt="Avatar") + img.avatar-icon(src="img/avatar-4.png" alt="Avatar") + figure.avatar.avatar-sm + img(src="img/avatar-4.png" alt="Avatar") + img.avatar-icon(src="img/avatar-5.png" alt="Avatar") + figure.avatar.avatar-xs + img(src="img/avatar-5.png" alt="Avatar") + img.avatar-icon(src="img/avatar-1.png" alt="Avatar") + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- Basic avatar examples --> + <figure class="avatar avatar-xl"> + <img src="img/avatar-1.png" alt="..."> + </figure> + + <figure class="avatar avatar-xl"> + <img src="img/avatar-1.png" alt="..."> + <img src="img/avatar-5.png" class="avatar-icon" alt="..."> + </figure> + + <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"></figure> + + <!-- Show initals when avatar image is unavailable or not fully loaded --> + <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"> + <img src="img/avatar-1.png" alt="..."> + </figure> + +.columns + .column.col-6.col-xs-12 + figure.avatar.avatar-xl(data-initial="YZ") + i.avatar-presence.online + figure.avatar.avatar-lg(data-initial="YZ") + i.avatar-presence.busy + figure.avatar(data-initial="YZ") + i.avatar-presence.away + figure.avatar.avatar-sm(data-initial="YZ") + i.avatar-presence.offline + figure.avatar.avatar-xs(data-initial="YZ") + i.avatar-presence.online + +p + | Avatars support presence indicators. + | You can add an #{'<i>'} element with the #[code avatar-presence] class, and add #[code online], #[code busy] or #[code away] class for different status colors. + | The default is gray which means offline. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <figure class="avatar avatar-xl"> + <img src="img/avatar-1.png" alt="..."> + <i class="avatar-presence online"></i> + </figure>
\ No newline at end of file diff --git a/docs/src/contents/badges.pug b/docs/src/contents/badges.pug new file mode 100644 index 0000000..250fb39 --- /dev/null +++ b/docs/src/contents/badges.pug @@ -0,0 +1,59 @@ +p Badges are often used as unread number indicators. + +.columns + .column.col-3.col-xs-6 + span.badge(data-badge="") + | Notifications + .column.col-3.col-xs-6 + span.badge(data-badge="8") + | Notifications + .column.col-3.col-xs-6 + span.badge(data-badge="88") + | Notifications + .column.col-3.col-xs-6 + span.badge(data-badge="888") + | Notifications + +p + | Add the #[code badge] class to non self closing elements. + | And add the #[code data-badge] attribute to define the content of a badge. + | The badge will appear in the top-right direction of the element. +p + | If there is no #[code data-badge] or the attribute is not specified, the badge will appear as a dot. + +.columns + .column.col-sm-12 + button.btn.badge(data-badge="") Button + button.btn.badge(data-badge="8") Button + .column.col-sm-12 + button.btn.btn-primary.badge(data-badge="") Button + button.btn.btn-primary.badge(data-badge="8") Button + .column.col-sm-12 + figure.avatar.avatar-xl.badge(data-badge="8" data-initial="YZ") + img(src="img/avatar-1.png" alt="YZ") + figure.avatar.avatar-lg.badge(data-badge="8" data-initial="YZ") + img(src="img/avatar-2.png" alt="YZ") + figure.avatar.badge(data-badge="8" data-initial="YZ") + img(src="img/avatar-3.png" alt="YZ") + +p + | Badges support #[code button] and #[code avatars] elements as well. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <span class="badge"> + Notifications + </span> + + <span class="badge" data-badge="8"> + Notifications + </span> + + <button class="btn badge" data-badge="8"> + Button + </button> + + <figure class="avatar badge" data-badge="8" data-initial="YZ"> + <img src="img/avatar-3.png" alt="YZ"> + </figure>
\ No newline at end of file diff --git a/docs/src/contents/bars.pug b/docs/src/contents/bars.pug new file mode 100644 index 0000000..58d7f3c --- /dev/null +++ b/docs/src/contents/bars.pug @@ -0,0 +1,84 @@ +p + | Bars represent the progress of a task or the value within the known range. + | Bars are custom components for displaying HTML5 #{'<progress>'}, #{'<meter>'} and input range elements. + +.columns + .column.col-8.col-xs-12 + .bar.bar-sm + .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100") +.columns + .column.col-8.col-xs-12 + .bar + .bar-item.tooltip(data-tooltip="50%" role="progressbar" style="width:50%;") +.columns + .column.col-8.col-xs-12 + .bar + .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;") 25% + .bar-item.tooltip(data-tooltip="15%" role="progressbar" style="width:15%;background:#817fe3;") 15% + .bar-item.tooltip(data-tooltip="10%" role="progressbar" style="width:10%;background:#aaa9eb;") 10% + .bar-item.tooltip(data-tooltip="15%" role="progressbar" style="width:15%;") 15% + +p + | Add a container element with the #[code bar] class. + | And add child elements with the #[code bar-item] class. + | The width percentage value is needed for every #[code bar-item]. + +p + | There is the #[code bar-sm] class for thinner Bars. + | Also, you could use #[a(href="#tooltips") Tooltips] for any #[code bar-item]. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <div class="bar bar-sm"> + <div class="bar-item" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> + </div> + + <!-- multi-bars --> + <div class="bar"> + <div class="bar-item tooltip" data-tooltip="25%" style="width:25%;">25%</div> + <div class="bar-item" style="width:15%;background:#818bd5;">15%</div> + </div> + ++docs-subheading('bars-slider', 'Slider bars') + +.columns + .column.col-8.col-xs-12 + .bar.bar-slider + .bar-item(role="progressbar" style="width:50%;") + button.bar-slider-btn.btn.tooltip(data-tooltip="50%" role="slider") +.columns + .column.col-8.col-xs-12 + .bar.bar-slider + .bar-item(role="progressbar" style="width:15%;") + button.bar-slider-btn.btn.tooltip(data-tooltip="25%" role="slider") + .bar-item(role="progressbar" style="width:65%;") + button.bar-slider-btn.btn.tooltip(data-tooltip="65%" role="slider") + +p + | You can add the #[code bar-slider] class to the Bars container. + | And add child elements with the #[code bar-item] class and #[code bar-slider-btn] inside bar-item. + | You need to set the #[code bar-item] width manually to have the slider point. + +p + | If there are two #[code bar-item] divs in one bar-slider, you will have a range slider. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- slider --> + <div class="bar bar-slider"> + <div class="bar-item" role="progressbar" style="width:25%;"> + <button class="bar-slider-btn btn" role="slider"></button> + </div> + </div> + + <!-- range slider --> + <div class="bar bar-slider"> + <div class="bar-item" role="progressbar" style="width:15%;"> + <button class="bar-slider-btn btn" role="slider"></button> + </div> + <div class="bar-item" role="progressbar" style="width:65%;"> + <button class="bar-slider-btn btn" role="slider"></button> + </div> + </div>
\ No newline at end of file diff --git a/docs/src/contents/breadcrumbs.pug b/docs/src/contents/breadcrumbs.pug new file mode 100644 index 0000000..b1b66c5 --- /dev/null +++ b/docs/src/contents/breadcrumbs.pug @@ -0,0 +1,45 @@ +p Breadcrumbs are used as navigational hierarchies to indicate current location. + +.columns + .column.col-12 + ul.breadcrumb + li.breadcrumb-item + a.tooltip(href="#breadcrumbs" data-tooltip="Home") Home + li.breadcrumb-item + a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings + .column.col-12 + ul.breadcrumb + li.breadcrumb-item + a.tooltip(href="#breadcrumbs" data-tooltip="Home") Home + li.breadcrumb-item + a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings + li.breadcrumb-item + a.tooltip(href="#breadcrumbs" data-tooltip="Change avatar") Change avatar + .column.col-12 + ul.breadcrumb + li.breadcrumb-item + a.tooltip(href="#breadcrumbs" data-tooltip="Home") Home + li.breadcrumb-item + a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings + li.breadcrumb-item + | Search result: + a.tooltip(href="#breadcrumbs" data-tooltip="Search result: Spectre") Spectre + +p + | Add a container element with the #[code breadcrumb] class. + | And add child elements with the #[code breadcrumb-item] class. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <ul class="breadcrumb"> + <li class="breadcrumb-item"> + <a href="#">Home</a> + </li> + <li class="breadcrumb-item"> + <a href="#">Settings</a> + </li> + <li class="breadcrumb-item"> + <a href="#">Change avatar</a> + </li> + </ul>
\ No newline at end of file diff --git a/docs/src/contents/calendars.pug b/docs/src/contents/calendars.pug new file mode 100644 index 0000000..0806844 --- /dev/null +++ b/docs/src/contents/calendars.pug @@ -0,0 +1,195 @@ +p + | Calendars are designed for date or date range picker and events display. It is made with flex layout. + +.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.disabled + button.date-item 26 + .calendar-date.prev-month.disabled + button.date-item 27 + .calendar-date.prev-month.disabled + button.date-item 28 + .calendar-date.current-month + button.date-item 1 + .calendar-date.current-month + button.date-item 2 + .calendar-date.current-month + button.date-item 3 + .calendar-date.current-month.tooltip(data-tooltip="Today") + button.date-item.date-today 4 + .calendar-date.current-month.tooltip(data-tooltip="Not available") + button.date-item(disabled="") 5 + .calendar-date.current-month + button.date-item 6 + .calendar-date.current-month + button.date-item 7 + .calendar-date.current-month.tooltip(data-tooltip="You have appointments") + button.date-item.badge 8 + .calendar-date.current-month + button.date-item 9 + .calendar-date.current-month + button.date-item 10 + .calendar-date.current-month + button.date-item 11 + .calendar-date.current-month + button.date-item 12 + .calendar-date.current-month + button.date-item 13 + .calendar-date.current-month + button.date-item 14 + .calendar-date.current-month + button.date-item 15 + .calendar-date.current-month.calendar-range.range-start + button.date-item.active 16 + .calendar-date.current-month.calendar-range + button.date-item 17 + .calendar-date.current-month.calendar-range + button.date-item 18 + .calendar-date.current-month.calendar-range + button.date-item 19 + .calendar-date.current-month.calendar-range.range-end + button.date-item.active 20 + .calendar-date.current-month + button.date-item 21 + .calendar-date.current-month + button.date-item 22 + .calendar-date.current-month + button.date-item 23 + .calendar-date.current-month + button.date-item 24 + .calendar-date.current-month + button.date-item 25 + .calendar-date.current-month + button.date-item 26 + .calendar-date.current-month + button.date-item 27 + .calendar-date.current-month + button.date-item 28 + .calendar-date.current-month + button.date-item 29 + .calendar-date.current-month + button.date-item 30 + .calendar-date.current-month + button.date-item 31 + .calendar-date.next-month.disabled + button.date-item 1 + ++docs-subheading('calendars-sizes', 'Calendars sizes') + +.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.disabled + button.date-item 26 + .calendar-date.prev-month.disabled + button.date-item 27 + .calendar-events + a.calendar-event.bg-error.text-light(href="#calendars") Zhonghe Festival + .calendar-date.prev-month.disabled + button.date-item 28 + .calendar-date.current-month + button.date-item 1 + .calendar-date.current-month + button.date-item 2 + .calendar-date.current-month + button.date-item 3 + .calendar-date.current-month.tooltip(data-tooltip="Today") + button.date-item.date-today 4 + .calendar-date.current-month + button.date-item(disabled="") 5 + .calendar-date.current-month + button.date-item 6 + .calendar-date.current-month + button.date-item 7 + .calendar-date.current-month.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.current-month + button.date-item 9 + .calendar-date.current-month + button.date-item 10 + .calendar-date.current-month + button.date-item 11 + .calendar-date.current-month + button.date-item 12 + .calendar-events + a.calendar-event.bg-error.text-light(href="#calendars") Arbor Day + .calendar-date.current-month + button.date-item 13 + .calendar-date.current-month + button.date-item 14 + .calendar-date.current-month + button.date-item 15 + .calendar-date.current-month.calendar-range.range-start + button.date-item.active 16 + .calendar-date.current-month.calendar-range + button.date-item 17 + .calendar-date.current-month.calendar-range + button.date-item 18 + .calendar-date.current-month.calendar-range + button.date-item 19 + .calendar-date.current-month.calendar-range.range-end + button.date-item.active 20 + .calendar-events + a.calendar-event.bg-success.text-light(href="#calendars") Spring Equinox + .calendar-date.current-month + button.date-item 21 + .calendar-date.current-month + button.date-item 22 + .calendar-date.current-month + button.date-item 23 + .calendar-date.current-month + button.date-item 24 + .calendar-date.current-month + button.date-item 25 + .calendar-date.current-month + button.date-item 26 + .calendar-date.current-month + button.date-item 27 + .calendar-date.current-month + button.date-item 28 + .calendar-date.current-month + button.date-item 29 + .calendar-date.current-month + button.date-item 30 + .calendar-date.current-month + 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
\ No newline at end of file diff --git a/docs/src/contents/cards.pug b/docs/src/contents/cards.pug new file mode 100644 index 0000000..4fb3671 --- /dev/null +++ b/docs/src/contents/cards.pug @@ -0,0 +1,94 @@ +p Cards are flexible content containers. + +.columns + .column.col-6.col-xs-12 + .card + .card-image + img.img-responsive(src="img/osx-el-capitan.jpg" alt="OS X El Capitan") + .card-header + .card-title.h5 Microsoft + .card-subtitle.text-gray Software and hardware + .card-body + | Empower every person and every organization on the planet to achieve more. + .card-footer + a.btn.btn-primary(href="#cards") Do + .column.col-6.col-xs-12 + .card + .card-header + .card-title.h5 Apple + .card-subtitle.text-gray Hardware and software + .card-image + img.img-responsive(src="img/osx-yosemite.jpg" alt="OS X Yosemite") + .card-body + | To make a contribution to the world by making tools for the mind that advance humankind. + .card-footer + .btn-group.btn-group-block + button.btn.btn-primary Buy + button.btn Buy + button.btn Buy + .column.col-6.col-xs-12 + .card + .card-image + img.img-responsive(src="img/macos-sierra-2.jpg" alt="macOS Sierra") + .card-header + button.btn.btn-primary.float-right + i.icon.icon-plus + .card-title.h5 Google I/O + .card-subtitle.text-gray Software and hardware + .card-body + | An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond. + .column.col-6.col-xs-12 + .card + .card-image + img.img-responsive(src="img/osx-el-capitan-2.jpg" alt="OS X El Capitan") + .card-footer + a.btn.btn-primary(href="#cards") Buy + a.btn.btn-link(href="#cards") Share + .card-body + strong Surface Studio + | . Turn your desk into a Studio. Surface Studio is designed for the creative process. + .column.col-6.col-xs-12 + .card + .card-header + .card-title.h5 Apple + .card-subtitle.text-gray Hardware and software + .card-body + | To make a contribution to the world by making tools for the mind that advance humankind. + .card-image + img.img-responsive(src="img/macos-sierra.jpg" alt="macOS Sierra") + .column.col-6.col-xs-12 + .card + .card-header + .card-title.h5 Google + .card-subtitle.text-gray Software and hardware + .card-body + | Organize the world’s information and make it universally accessible and useful. + .card-image + img.img-responsive(src="img/osx-yosemite-2.jpg" alt="OS X Yosemite") + .card-footer + a.btn.btn-primary(href="#cards") Search + a.btn.btn-link(href="#cards") Share + +p + | Add a container element with the #[code card] class. + | And add child elements with the #[code card-image], #[code card-header], #[code card-body] and/or #[code card-footer] classes. + | The #[code card-image] can be placed in any position. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <div class="card"> + <div class="card-image"> + <img src="img/osx-el-capitan.jpg" class="img-responsive"> + </div> + <div class="card-header"> + <div class="card-title h5">Microsoft</div> + <div class="card-subtitle text-gray">Software and hardware</div> + </div> + <div class="card-body"> + Empower every person and every organization on the planet to achieve more. + </div> + <div class="card-footer"> + <button class="btn btn-primary">Do</button> + </div> + </div>
\ No newline at end of file diff --git a/docs/src/contents/carousels.pug b/docs/src/contents/carousels.pug new file mode 100644 index 0000000..5ce41fa --- /dev/null +++ b/docs/src/contents/carousels.pug @@ -0,0 +1,39 @@ +p Carousels are slideshows for cycling images. It is built in pure CSS. + +.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
\ No newline at end of file diff --git a/docs/src/contents/chips.pug b/docs/src/contents/chips.pug new file mode 100644 index 0000000..ff02780 --- /dev/null +++ b/docs/src/contents/chips.pug @@ -0,0 +1,44 @@ +p Chips are complex entities in small blocks. + +.columns + .column.col-12 + span.chip + | Crime + span.chip + | Drama + span.chip + | Biography + a.btn.btn-clear(href="#" aria-label="Close" role="button") + span.chip + | Mystery + a.btn.btn-clear(href="#" aria-label="Close" role="button") + .column.col-12 + .chip + figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;") + | Tony Stark + .chip + img.avatar.avatar-sm(src="img/avatar-1.png" alt="Thor Odinson") + | Thor Odinson + .chip + img.avatar.avatar-sm(src="img/avatar-4.png" alt="Steve Rogers") + | Steve Rogers + +p + | Add a container element with the #[code chip] class. + | And add child text element, buttons or avatars with the #[code avatar] class. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <span class="chip">Crime</span> + + <span class="chip"> + Biography + <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> + </span> + + <div class="chip"> + <img src="img/avatar-1.png" class="avatar avatar-sm"> + Yan Zhu + <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> + </div>
\ No newline at end of file diff --git a/docs/src/contents/colors.pug b/docs/src/contents/colors.pug new file mode 100644 index 0000000..84a86be --- /dev/null +++ b/docs/src/contents/colors.pug @@ -0,0 +1,89 @@ +p Color utilities are used for changing colors for text, link and background. + ++docs-subheading('colors-text', 'Text colors') + +.columns + .column.col-12 + p + span.text-primary primary color + p + span.text-secondary secondary color + p + span.text-gray gray color + p + span.text-light.bg-dark.p-1.rounded light color + p + span.text-success success color + p + span.text-warning warning color + p + span.text-error error color + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <span class="text-primary">primary color</span> + <span class="text-secondary">secondary color</span> + <span class="text-gray">gray color</span> + <span class="text-light">light color</span> + <span class="text-success">success color</span> + <span class="text-warning">warning color</span> + <span class="text-error">error color</span> + +.columns + .column.col-12 + p + a.text-primary.p-1(href="#colors") primary link + p + a.text-secondary.p-1(href="#colors") secondary link + p + a.text-gray.p-1(href="#colors") gray link + p + a.text-light.bg-dark.p-1.rounded(href="#colors") light link + p + a.text-success.p-1(href="#colors") success link + p + a.text-warning.p-1(href="#colors") warning link + p + a.text-error.p-1(href="#colors") error link + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <a class="text-primary" href="#">primary color</a> + <a class="text-secondary" href="#">secondary color</a> + <a class="text-gray" href="#">gray color</a> + <a class="text-light" href="#">light color</a> + <a class="text-success" href="#">success color</a> + <a class="text-warning" href="#">warning color</a> + <a class="text-error" href="#">error color</a> + ++docs-subheading('colors-background', 'Background colors') + +.columns + .column.col-12 + p + span.bg-primary.p-1.rounded primary bg + p + span.bg-secondary.text-primary.p-1.rounded secondary bg + p + span.bg-dark.p-1.rounded dark bg + p + span.bg-gray.p-1.rounded gray bg + p + span.bg-success.p-1.rounded success bg + p + span.bg-warning.p-1.rounded warning bg + p + span.bg-error.p-1.rounded error bg + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <div class="bg-primary">primary bg</div> + <div class="bg-secondary">secondary bg</div> + <div class="bg-dark">dark bg</div> + <div class="bg-gray">gray bg</div> + <div class="bg-success">success bg</div> + <div class="bg-warning">warning bg</div> + <div class="bg-error">error bg</div>
\ No newline at end of file diff --git a/docs/src/contents/comparison.pug b/docs/src/contents/comparison.pug new file mode 100644 index 0000000..5f6ce38 --- /dev/null +++ b/docs/src/contents/comparison.pug @@ -0,0 +1,29 @@ +p + | Comparison Sliders are sliders for comparing two images. It is built in pure CSS. + +.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") + <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/src/contents/cursor.pug b/docs/src/contents/cursor.pug new file mode 100644 index 0000000..df92600 --- /dev/null +++ b/docs/src/contents/cursor.pug @@ -0,0 +1,31 @@ +p Cursor utilities specify which mouse cursor to display when mouseover. + +.columns + .column.col-4 + .bg-gray.docs-block.c-hand c-hand + .column.col-4 + .bg-gray.docs-block.c-move c-move + .column.col-4 + .bg-gray.docs-block.c-zoom-in c-zoom-in + .column.col-4 + .bg-gray.docs-block.c-zoom-out c-zoom-out + .column.col-4 + .bg-gray.docs-block.c-not-allowed c-not-allowed + .column.col-4 + .bg-gray.docs-block.c-auto c-auto + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- cursor: hand; --> + <div class="c-hand"></div> + <!-- cursor: move; --> + <div class="c-move"></div> + <!-- cursor: zoom-in; --> + <div class="c-zoom-in"></div> + <!-- cursor: zoom-out; --> + <div class="c-zoom-out"></div> + <!-- cursor: not-allowed; --> + <div class="c-not-allowed"></div> + <!-- cursor: auto; --> + <div class="c-auto"></div>
\ No newline at end of file diff --git a/docs/src/contents/display.pug b/docs/src/contents/display.pug new file mode 100644 index 0000000..bb3a0a3 --- /dev/null +++ b/docs/src/contents/display.pug @@ -0,0 +1,26 @@ +p Display utilities are used for display and hidden things. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- display: block; --> + <div class="d-block"></div> + <!-- display: inline; --> + <div class="d-inline"></div> + <!-- display: inline-block; --> + <div class="d-inline-block"></div> + <!-- display: flex; --> + <div class="d-flex"></div> + <!-- display: inline-flex; --> + <div class="d-inline-flex"></div> + <!-- display: none; --> + <div class="d-none"></div> + <div class="d-hide"></div> + <!-- visibility: visible; --> + <div class="d-visible"></div> + <!-- visibility: hidden; --> + <div class="d-invisible"></div> + <!-- hide text contents --> + <div class="text-hide"></div> + <!-- assistive text for screen reader --> + <div class="text-assistive"></div>
\ No newline at end of file diff --git a/docs/src/contents/divider.pug b/docs/src/contents/divider.pug new file mode 100644 index 0000000..e84ff11 --- /dev/null +++ b/docs/src/contents/divider.pug @@ -0,0 +1,54 @@ +p A Divider is used for separating elements. + +.columns + .column + .divider +.columns + .column + | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. + .divider.text-center(data-content="OR") + | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. +.columns + .column + form + .form-group + label.form-label(for="input-example-1") Email + input#input-example-1.form-input(type="text" placeholder="Email") + .form-group + label.form-label(for="input-example-2") Password + input#input-example-2.form-input(type="password" placeholder="Password") + .form-group + label.form-checkbox + input(type="checkbox") + i.form-icon + | Remember me + .form-group + button.btn.btn-primary Sign in + .divider-vert(data-content="OR") + .column + form + .form-group + label.form-label(for="input-example-3") Email + input#input-example-3.form-input(type="text" placeholder="Email") + .form-group + button.btn.btn-primary.btn-block Sign up + button.btn.btn-link.btn-block Learn more + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- divider element --> + <div class="divider"></div> + <!-- divider element with text --> + <div class="divider text-center" data-content="OR"></div> + + <!-- vertical divider element with text --> + <div class="columns"> + <div class="column"> + <!-- column content --> + </div> + <div class="divider-vert" data-content="OR"></div> + <div class="column"> + <!-- column content --> + </div> + </div>
\ No newline at end of file diff --git a/docs/src/contents/empty.pug b/docs/src/contents/empty.pug new file mode 100644 index 0000000..0ac70dc --- /dev/null +++ b/docs/src/contents/empty.pug @@ -0,0 +1,50 @@ +p + | Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens. + +.columns + .column.col-12 + .empty + .empty-icon + i.icon.icon-3x.icon-mail + p.empty-title.h5 You have no new messages + p.empty-subtitle Click the button to start a conversation + .empty-action + button.btn.btn-primary Send a message + .column.col-12 + .empty + .empty-icon + i.icon.icon-3x.icon-mail + p.empty-title.h5 You've successfully signed up + p.empty-subtitle Click the button to invite your friends + .empty-action + button.btn.btn-primary Invite your friends + .empty-action + button.btn.btn-link Skip + .column.col-12 + .empty + .empty-icon + i.icon.icon-3x.icon-people + p.empty-title.h5 You are not following anyone + p.empty-subtitle Start to meet new friends + .empty-action.input-group.input-inline + input.form-input(type="text" placeholder="") + button.btn.btn-primary.input-group-btn Search + +p + | An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. + | Add #[code empty-icon], #[code empty-title], #[code empty-subtitle] or #[code empty-action] to the elements. + | HTML structure is exampled below. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <div class="empty"> + <div class="empty-icon"> + <i class="icon icon-people"></i> + </div> + <p class="empty-title h5">You have no new messages</p> + <p class="empty-subtitle">Click the button to start a conversation.</p> + <div class="empty-action"> + <button class="btn btn-primary">Send a message</button> + </div> + </div>
\ No newline at end of file diff --git a/docs/src/contents/experimentals.pug b/docs/src/contents/experimentals.pug new file mode 100644 index 0000000..cec5b41 --- /dev/null +++ b/docs/src/contents/experimentals.pug @@ -0,0 +1,4 @@ +p + | The Experimentals include experimental elements and features, mostly are not yet ready for wide use. + | These elements and components are limited inside #[code spectre-exp.scss] before browsers fully support them. + | Sometimes, there are some specific browsers targeted components.
\ No newline at end of file diff --git a/docs/src/contents/filters.pug b/docs/src/contents/filters.pug new file mode 100644 index 0000000..0c61640 --- /dev/null +++ b/docs/src/contents/filters.pug @@ -0,0 +1,107 @@ +p Filters are CSS only content filters. + +.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") + <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/src/contents/loading.pug b/docs/src/contents/loading.pug new file mode 100644 index 0000000..c7643b2 --- /dev/null +++ b/docs/src/contents/loading.pug @@ -0,0 +1,21 @@ +p + | Loading indicator is used for loading or updating. + | You can add the #[code loading] class to a container for loading status. + +.columns + .column.col-12.text-center + .loading + +p + | Add the #[code loading-lg] class for large size. + +.columns + .column.col-12.text-center + .loading.loading-lg + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- loading element --> + <div class="loading"></div> + <div class="loading loading-lg"></div>
\ No newline at end of file diff --git a/docs/src/contents/menu.pug b/docs/src/contents/menu.pug new file mode 100644 index 0000000..fe7825b --- /dev/null +++ b/docs/src/contents/menu.pug @@ -0,0 +1,184 @@ +p Menus are vertical list of links or buttons for actions and navigation. + +.columns + .column.col-4.col-xs-12 + ul.menu + li.menu-item + .tile.tile-centered + .tile-icon + img.avatar(src="img/avatar-4.png" alt="Avatar") + .tile-content + | Steve Rogers + li.divider + li.menu-item + .menu-badge + label.label.label-primary 2 + a.active(href="#menus") + | My profile + li.menu-item + a(href="#menus") + | Settings + li.menu-item + a(href="#menus") + | Logout + .column.col-4.col-xs-12 + ul.menu + li.divider(data-content="LINKS") + li.menu-item + a(href="#menus") Slack + li.menu-item + a(href="#menus") Hipchat + li.menu-item + a(href="#menus") Skype + .column.col-4.col-xs-12 + ul.menu + li.menu-item + label.form-checkbox + input(type="checkbox" checked="") + i.form-icon + | form-checkbox + li.menu-item + label.form-radio + input(type="radio" checked="") + i.form-icon + | form-radio + li.menu-item + label.form-switch + input(type="checkbox" checked="") + i.form-icon + | form-switch + +p + | Add a container element with the #[code menu] class. + | And add child elements with the #[code menu-item] class. + | You can separate menu items with a #[code divider]. + | Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus. +p + | Menus also have #[a(href="elements.html#forms" target="_blank") Form controls] (checkbox, radio and checkbox) support. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <ul class="menu"> + <!-- menu header text --> + <li class="divider" data-content="LINKS"> + </li> + <!-- menu item standard --> + <li class="menu-item"> + <a href="#"> + <i class="icon icon-link"></i> Slack + </a> + </li> + <!-- menu item with form control --> + <li class="menu-item"> + <label class="form-checkbox"> + <input type="checkbox"> + <i class="form-icon"></i> form-checkbox + </label> + </li> + <!-- menu divider --> + <li class="divider"></li> + <!-- menu item with badge --> + <li class="menu-item"> + <div class="menu-badge"> + <label class="label label-primary">2</label> + </div> + <a href="#"> + <i class="icon icon-link"></i> Settings + </a> + </li> + </ul> + ++docs-subheading('menu-dropdown', 'Dropdown menu') + +p The dropdown is a combination of buttons and menus. + +.columns + .column.col-xs-12 + .dropdown + .btn-group + a.btn.btn-primary dropdown button + a.btn.btn-primary.dropdown-toggle(tabindex="0") + i.icon.icon-caret + ul.menu + li.menu-item + a(href="#dropdowns") + | Slack + li.menu-item + a(href="#dropdowns") + | Hipchat + li.menu-item + a(href="#dropdowns") + | Skype + .column.col-xs-12 + .dropdown + a.btn.btn-link.dropdown-toggle(tabindex="0") + | dropdown button + i.icon.icon-caret + ul.menu + li.menu-item + a(href="#dropdowns") + | Slack + li.menu-item + a(href="#dropdowns") + | Hipchat + li.menu-item + a(href="#dropdowns") + | Skype + +p + | Dropdown menus component is built entirely in CSS. It is triggered by #[code :focus] event. +p + | Add a container element with the #[code dropdown] class. + | And add a focusable element with the #[code dropdown-toggle] class for the button and a #[code menu] component right next to it. + | You also need to add #[code tabindex] to make the buttons focusable. +p + | If the dropdown is close to the right edge of the browser, you can add the #[code dropdown-right] class to the container to prevent it appearing off screen. + +.columns + .column.col-xs-12.text-right + .dropdown.dropdown-right + a.btn.btn-primary.dropdown-toggle(tabindex="0") + | dropdown button + i.icon.icon-caret + ul.menu.text-left + li.menu-item + a(href="#dropdowns") Slack + li.menu-item + a(href="#dropdowns") Hipchat + li.menu-item + a(href="#dropdowns") Skype + +p + | Also, you can implement your JS to interact with the dropdown menus by adding the #[code active] class to the #[code dropdown] container. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- basic dropdown button --> + <div class="dropdown"> + <a href="#" class="btn btn-link dropdown-toggle" tabindex="0"> + dropdown menu <i class="icon icon-caret"></i> + </a> + <!-- menu component --> + <ul class="menu"> + ... + </ul> + </div> + + <!-- dropdown button group --> + <div class="dropdown"> + <div class="btn-group"> + <a href="#" class="btn"> + dropdown button + </a> + <a href="#" class="btn dropdown-toggle" tabindex="0"> + <i class="icon icon-caret"></i> + </a> + + <!-- menu component --> + <ul class="menu"> + ... + </ul> + </div> + </div>
\ No newline at end of file diff --git a/docs/src/contents/meters.pug b/docs/src/contents/meters.pug new file mode 100644 index 0000000..dd6899c --- /dev/null +++ b/docs/src/contents/meters.pug @@ -0,0 +1,22 @@ +p Meters represent the value within the known range. + +.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") + <!-- 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/src/contents/modals.pug b/docs/src/contents/modals.pug new file mode 100644 index 0000000..29580c9 --- /dev/null +++ b/docs/src/contents/modals.pug @@ -0,0 +1,141 @@ +p Modals are flexible dialog prompts. + +.columns + .column + a.btn.btn-primary(href="#example-modal-1") Open Modal + #example-modal-1.modal + a.modal-overlay(href="#modals" aria-label="Close") + .modal-container(role="document") + .modal-header + a.btn.btn-clear.float-right(href="#modals" aria-label="Close") + .modal-title.h5 Modal title + .modal-body + .content + p This is the content inside the modal. + 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. + h4 Cupcake ipsum + p + | Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels. + p + | De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve. + h4 Candy ipsum + p + | Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar. + p + | Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow. + .modal-footer + button.btn.btn-primary Share + a.btn.btn-link(href="#modals") Close + +p + | Add a container element with the #[code modal] class. + | And add a real container #[code modal-container] and overlay #[code modal-overlay] inside it. + | You can add child elements with the #[code modal-header], #[code modal-body] and #[code modal-footer] - any or all of them. +p + | Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. + | To make a modal appear, add the #[code active] class to the #[code modal] container. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <div class="modal active" id="modal-id"> + <a href="#close" class="modal-overlay" aria-label="Close"></a> + <div class="modal-container"> + <div class="modal-header"> + <a href="#close" class="btn btn-clear float-right" aria-label="Close"></a> + <div class="modal-title h5">Modal title</div> + </div> + <div class="modal-body"> + <div class="content"> + <!-- content here --> + </div> + </div> + <div class="modal-footer"> + ... + </div> + </div> + </div> + ++docs-subheading('modals-sizes', 'Modal sizes') + +.columns + .column.col-6.col-xs-12 + a.btn.btn-primary(href="#example-modal-2") Open small size Modal + #example-modal-2.modal.modal-sm + a.modal-overlay(href="#modals-sizes" aria-label="Close") + .modal-container(role="document") + .modal-header + a.btn.btn-clear.float-right(href="#modals-sizes" aria-label="Close") + .modal-title.h5 Modal title + .modal-body + .content + form + .form-group + label.form-label(for="input-example-7") Name + input#input-example-7.form-input(type="text" placeholder="Name") + .form-group + label.form-label Gender + label.form-radio + input(type="radio" name="gender") + i.form-icon + | Male + label.form-radio + input(type="radio" name="gender" checked="") + i.form-icon + | Female + .modal-footer + button.btn.btn-primary Submit + a.btn.btn-link(href="#modals-sizes" aria-label="Close") Close + +p + | Use the #[code modal-sm] class for a smaller modal dialog. + | The container max width is #[code 320px]. + +.columns + .column + a.btn.btn-primary(href="#example-modal-3") Open large size Modal + #example-modal-3.modal.modal-lg + a.modal-overlay(href="#modals-sizes" aria-label="Close") + .modal-container(role="document") + .modal-header + a.btn.btn-clear.float-right(href="#modals-sizes" aria-label="Close") + .modal-title.h5 Modal title + .modal-body + .content + p This is the content inside the modal. + 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. + h4 Cupcake ipsum + p + | Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels. + p + | De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve. + h4 Candy ipsum + p + | Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar. + p + | Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow. + .modal-footer + button.btn.btn-primary Share + a.btn.btn-link(href="#modals-sizes") Close + +p + | Use the #[code modal-lg] class for a full size modal. + | The container max width is #[code 960px]. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <div class="modal modal-sm"> + <a href="#close" class="modal-overlay" aria-label="Close"></a> + <div class="modal-container"> + <!-- modal structure here --> + </div> + </div>
\ No newline at end of file diff --git a/docs/src/contents/nav.pug b/docs/src/contents/nav.pug new file mode 100644 index 0000000..537b6d2 --- /dev/null +++ b/docs/src/contents/nav.pug @@ -0,0 +1,57 @@ +.columns + .column.col-6.col-xs-12 + ul.nav + li.nav-item + a(href="#nav") Elements + li.nav-item.active + a(href="#nav") Layout + ul.nav + li.nav-item + a(href="#nav") Flexbox grid + li.nav-item + a(href="#nav") Responsive + li.nav-item + a(href="#nav") Navbar + li.nav-item + a(href="#nav") Empty states + li.nav-item + a(href="#nav") Components + li.nav-item + a(href="#nav") Utilities + +p + | Add a container element with the #[code nav] class. + | And add child elements with the #[code nav-item] class. + | The #[code nav-item] with the #[code active] class will be highlighted. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <ul class="nav"> + <li class="nav-item"> + <a href="#">Elements</a> + </li> + <li class="nav-item active"> + <a href="#">Layout</a> + <ul class="nav"> + <li class="nav-item"> + <a href="#">Flexbox grid</a> + </li> + <li class="nav-item"> + <a href="#">Responsive</a> + </li> + <li class="nav-item"> + <a href="#">Navbar</a> + </li> + <li class="nav-item"> + <a href="#">Empty states</a> + </li> + </ul> + </li> + <li class="nav-item"> + <a href="#">Components</a> + </li> + <li class="nav-item"> + <a href="#">Utilities</a> + </li> + </ul>
\ No newline at end of file diff --git a/docs/src/contents/off-canvas.pug b/docs/src/contents/off-canvas.pug new file mode 100644 index 0000000..7e45132 --- /dev/null +++ b/docs/src/contents/off-canvas.pug @@ -0,0 +1,45 @@ +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]. + +.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") + <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/src/contents/pagination.pug b/docs/src/contents/pagination.pug new file mode 100644 index 0000000..83a3f92 --- /dev/null +++ b/docs/src/contents/pagination.pug @@ -0,0 +1,102 @@ +.columns + .column.col-xs-12 + ul.pagination + li.page-item + a(href="#pagination") Prev + li.page-item + a(href="#pagination") 1 + li.page-item + span ... + li.page-item + a(href="#pagination") 4 + li.page-item.active + a(href="#pagination") 5 + li.page-item + a(href="#pagination") 6 + li.page-item + span ... + li.page-item + a(href="#pagination") 9 + li.page-item + a(href="#pagination") Next + .column.col-xs-12 + ul.pagination + li.page-item.disabled + a(href="#pagination" tabindex="-1") Prev + li.page-item.active + a(href="#pagination") 1 + li.page-item + a(href="#pagination") 2 + li.page-item + a(href="#pagination") 3 + li.page-item + span ... + li.page-item + a(href="#pagination") 9 + li.page-item + a(href="#pagination") Next + +p + | Add a container element with the #[code pagination] class. + | And add child elements with the #[code page-item] class. + | The #[code page-item] with the #[code active] class will be highlighted. + | You can add the #[code disabled] class to the #[code page-item] to have unclickable page links. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <ul class="pagination"> + <li class="page-item disabled"> + <a href="#" tabindex="-1">Previous</a> + </li> + <li class="page-item active"> + <a href="#">1</a> + </li> + <li class="page-item"> + <a href="#">2</a> + </li> + <li class="page-item"> + <a href="#">3</a> + </li> + <li class="page-item"> + <span>...</span> + </li> + <li class="page-item"> + <a href="#">12</a> + </li> + <li class="page-item"> + <a href="#">Next</a> + </li> + </ul> + +.columns + .column.col-12 + ul.pagination + li.page-item.page-prev + a(href="#pagination") + .page-item-subtitle Previous + .page-item-title.h5 Getting started + li.page-item.page-next + a(href="#pagination") + .page-item-subtitle Next + .page-item-title.h5 Layout + +p You could use previous and next pagination to navigate. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <ul class="pagination"> + <li class="page-item page-prev"> + <a href="#"> + <div class="page-item-subtitle">Previous</div> + <div class="page-item-title h5">Getting started</div> + </a> + </li> + <li class="page-item page-next"> + <a href="#"> + <div class="page-item-subtitle">Next</div> + <div class="page-item-title h5">Layout</div> + </a> + </li> + </ul>
\ No newline at end of file diff --git a/docs/src/contents/panels.pug b/docs/src/contents/panels.pug new file mode 100644 index 0000000..3651c81 --- /dev/null +++ b/docs/src/contents/panels.pug @@ -0,0 +1,114 @@ +p Panels are flexible view container with auto-expand content section. + +.columns + .column.col-6.col-xs-12 + .panel + .panel-header.text-center + figure.avatar.avatar-lg + img(src="img/avatar-2.png" alt="Avatar") + .panel-title.h5.mt-10 Bruce Banner + .panel-subtitle THE HULK + nav.panel-nav + ul.tab.tab-block + li.tab-item.active + a(href="#panels") + | Profile + li.tab-item + a(href="#panels") + | Files + li.tab-item + a(href="#panels") + | Tasks + .panel-body + .tile.tile-centered + .tile-content + .tile-title E-mail + .tile-subtitle bruce.banner@hulk.com + .tile-action + button.btn.btn-link.btn-action.btn-lg + i.icon.icon-edit + .tile.tile-centered + .tile-content + .tile-title Skype + .tile-subtitle bruce.banner + .tile-action + button.btn.btn-link.btn-action.btn-lg + i.icon.icon-edit + .tile.tile-centered + .tile-content + .tile-title Location + .tile-subtitle Dayton, Ohio + .tile-action + button.btn.btn-link.btn-action.btn-lg + i.icon.icon-edit + .panel-footer + button.btn.btn-primary.btn-block Save + .column.col-6.col-xs-12 + .panel + .panel-header + .panel-title.h6 Comments + .panel-body + .tile + .tile-icon + figure.avatar + img(src="img/avatar-1.png" alt="Avatar") + .tile-content + p.tile-title Thor Odinson + p.tile-subtitle + | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle... + .tile + .tile-icon + figure.avatar + img(src="img/avatar-2.png" alt="Avatar") + .tile-content + p.tile-title Bruce Banner + p.tile-subtitle The Strategic Homeland Intervention, Enforcement, and Logistics Division... + .tile + .tile-icon + figure.avatar(data-initial="TS") + .tile-content + p.tile-title Tony Stark + p.tile-subtitle + | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle... + .tile + .tile-icon + figure.avatar + img(src="img/avatar-4.png" alt="Avatar") + .tile-content + p.tile-title Steve Rogers + p.tile-subtitle The Strategic Homeland Intervention, Enforcement, and Logistics Division... + .tile + .tile-icon + figure.avatar + img(src="img/avatar-3.png" alt="Avatar") + .tile-content + p.tile-title Natasha Romanoff + p.tile-subtitle + | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle... + .panel-footer + .input-group + input.form-input(type="text" placeholder="Hello") + button.btn.btn-primary.input-group-btn Send + +p + | Add a container element with the #[code panel] class. + | And add child elements with the #[code panel-header], #[code panel-nav], #[code panel-body] and/or #[code panel-footer] classes. + | The #[code panel-body] can be auto expanded and vertically scrollable. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <div class="panel"> + <div class="panel-header"> + <div class="panel-title">Comments</div> + </div> + <div class="panel-nav"> + <!-- navigation components: tabs, breadcrumbs or pagination --> + </div> + <div class="panel-body"> + <!-- contents --> + </div> + <div class="panel-footer"> + <!-- buttons or inputs --> + </div> + </div>
\ No newline at end of file diff --git a/docs/src/contents/parallax.pug b/docs/src/contents/parallax.pug new file mode 100644 index 0000000..88d2c17 --- /dev/null +++ b/docs/src/contents/parallax.pug @@ -0,0 +1,34 @@ +p + | The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS. + +.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") + <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/src/contents/popovers.pug b/docs/src/contents/popovers.pug new file mode 100644 index 0000000..ca81e54 --- /dev/null +++ b/docs/src/contents/popovers.pug @@ -0,0 +1,82 @@ +p Popovers are small overlay content containers. Popovers component is built entirely in CSS. +.columns + .column.col-3.col-sm-6 + .popover + a.btn.btn-primary(href="#popovers") + | top popover + .popover-container + .card + .card-header + .card-title.h5 Apple + .card-subtitle.text-gray Software and hardware + .card-body + | To make a contribution to the world by making tools for the mind that advance humankind. + .card-footer + button.btn.btn-primary Buy + .column.col-3.col-sm-6 + .popover.popover-right + a.btn.btn-primary(href="#popovers") + | right popover + .popover-container + .card + .card-header + .card-title.h5 Apple + .card-subtitle.text-gray Software and hardware + .card-body + | To make a contribution to the world by making tools for the mind that advance humankind. + .card-footer + button.btn.btn-primary Buy + .column.col-3.col-sm-6 + .popover.popover-bottom + a.btn.btn-primary(href="#popovers") + | bottom popover + .popover-container + .card + .card-header + .card-title.h5 Apple + .card-subtitle.text-gray Software and hardware + .card-body + | To make a contribution to the world by making tools for the mind that advance humankind. + .card-footer + button.btn.btn-primary Buy + .column.col-3.col-sm-6 + .popover.popover-left + a.btn.btn-primary(href="#popovers") + | left popover + .popover-container + .card + .card-header + .card-title.h5 Apple + .card-subtitle.text-gray Software and hardware + .card-body + | To make a contribution to the world by making tools for the mind that advance humankind. + .card-footer + button.btn.btn-primary Buy + +p + | Wrap an element by a container with the #[code popover] class. + | And add a container with the #[code popover-container] next to the element. + | You can use #[a(href="#cards") Cards] component inside the #[code popover-container]. +p + | Also, you can add the #[code popover-right], #[code popover-bottom] or #[code popover-left] class to define the position. + | By default, the popovers appear above the element. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <div class="popover popover-right"> + <button class="btn btn-primary">right popover</button> + <div class="popover-container"> + <div class="card"> + <div class="card-header"> + ... + </div> + <div class="card-body"> + ... + </div> + <div class="card-footer"> + ... + </div> + </div> + </div> + </div>
\ No newline at end of file diff --git a/docs/src/contents/position.pug b/docs/src/contents/position.pug new file mode 100644 index 0000000..4e73fed --- /dev/null +++ b/docs/src/contents/position.pug @@ -0,0 +1,40 @@ +p + | Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- clear float --> + <div class="clearfix"></div> + <!-- float: left and right --> + <div class="float-left"></div> + <div class="float-right"></div> + <!-- position: relative, absolute and fixed --> + <div class="relative"></div> + <div class="absolute"></div> + <div class="fixed"></div> + <!-- centered block --> + <div class="centered"></div> + + <!-- m-1 {margin: 4px;} m-2 {margin: 8px;} --> + <div class="m-1"></div> + <div class="m-2"></div> + <!-- margin in 4 directions. mt-1 {margin-top: 4px;} mt-2 {margin-top: 8px;} --> + <div class="mt-1"></div> + <div class="mt-2"></div> + <!-- mx-1 {margin-left: 4px; margin-right: 4px;} --> + <div class="mx-1"></div> + <div class="mx-2"></div> + <div class="my-1"></div> + <div class="my-2"></div> + <!-- p-1 {padding: 4px;} p-2 {padding: 8px;} --> + <div class="p-1"></div> + <div class="p-2"></div> + <!-- padding in 4 directions. pt-1 {padding-top: 4px;} pt-2 {padding-top: 8px;} --> + <div class="pt-1"></div> + <div class="pt-2"></div> + <!-- px-1 {padding-left: 4px; padding-right: 4px;} --> + <div class="px-1"></div> + <div class="px-2"></div> + <div class="py-1"></div> + <div class="py-2"></div>
\ No newline at end of file diff --git a/docs/src/contents/progress.pug b/docs/src/contents/progress.pug new file mode 100644 index 0000000..22a09c1 --- /dev/null +++ b/docs/src/contents/progress.pug @@ -0,0 +1,17 @@ +p The Progress indicates the progress completion of a task. + +.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") + <progress class="progress" value="25" max="100"></progress> + <progress class="progress" max="100"></progress>
\ No newline at end of file diff --git a/docs/src/contents/shapes.pug b/docs/src/contents/shapes.pug new file mode 100644 index 0000000..fc07d4d --- /dev/null +++ b/docs/src/contents/shapes.pug @@ -0,0 +1,17 @@ +p Shape utilities are used for change element shapes. + +.columns + .column.col-6.text-center + .bg-primary.text-light.docs-shape.rounded.centered + | rounded + .column.col-6.text-center + .bg-primary.text-light.docs-shape.circle.centered + | circle + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- rounded element --> + <div class="rounded"></div> + <!-- circle element --> + <div class="circle"></div>
\ No newline at end of file diff --git a/docs/src/contents/sliders.pug b/docs/src/contents/sliders.pug new file mode 100644 index 0000000..de3597b --- /dev/null +++ b/docs/src/contents/sliders.pug @@ -0,0 +1,18 @@ +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. + +.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") + <!-- 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/src/contents/steps.pug b/docs/src/contents/steps.pug new file mode 100644 index 0000000..5cf8b84 --- /dev/null +++ b/docs/src/contents/steps.pug @@ -0,0 +1,47 @@ +p Steps are progress indicators of a sequence of task steps. + +.columns + .column.col-12 + ul.step + li.step-item + a.tooltip(href="#steps" data-tooltip="Step 1 Tooltip") + li.step-item.active + a.tooltip(href="#steps" data-tooltip="Step 2 Tooltip") + li.step-item + a.tooltip(href="#steps" data-tooltip="Step 3 Tooltip") + li.step-item + a.tooltip(href="#steps" data-tooltip="Step 4 Tooltip") + .column.col-12 + ul.step + li.step-item + a.tooltip(href="#steps" data-tooltip="Step 1 Tooltip") Step 1 + li.step-item + a.tooltip(href="#steps" data-tooltip="Step 2 Tooltip") Step 2 + li.step-item.active + a.tooltip(href="#steps" data-tooltip="Step 3 Tooltip") Step 3 + li.step-item + a.tooltip(href="#steps" data-tooltip="Step 4 Tooltip") Step 4 + +p + | Add a container element with the #[code step] class. + | And add child elements with the #[code step-item] class. + | The #[code step-item] with the #[code active] class will be highlighted and indicate the current state of progress. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <ul class="step"> + <li class="step-item"> + <a href="#" class="tooltip" data-tooltip="Step 1">Step 1</a> + </li> + <li class="step-item active"> + <a href="#" class="tooltip" data-tooltip="Step 2">Step 2</a> + </li> + <li class="step-item"> + <a href="#" class="tooltip" data-tooltip="Step 3">Step 3</a> + </li> + <li class="step-item"> + <a href="#" class="tooltip" data-tooltip="Step 4">Step 4</a> + </li> + </ul> + diff --git a/docs/src/contents/tabs.pug b/docs/src/contents/tabs.pug new file mode 100644 index 0000000..f89005d --- /dev/null +++ b/docs/src/contents/tabs.pug @@ -0,0 +1,132 @@ +p Tabs enable quick switch between different views. + +.columns + .column.col-6.col-sm-12 + ul.tab + li.tab-item.active + a(href="#tabs") + | Music + li.tab-item + a(href="#tabs") + | Playlists + li.tab-item + a(href="#tabs") + | Radio + li.tab-item + a(href="#tabs") + | Store + .column.col-6.col-sm-12 + ul.tab.tab-block + li.tab-item.active + a(href="#tabs") + | Music + li.tab-item + a(href="#tabs") + | Playlists + li.tab-item + a(href="#tabs") + | Radio + +p + | Add a container element with the #[code tab] class. + | And add child elements with the #[code tab-item] class. + | You can add the #[code tab-block] class for a full-width tab. + | The #[code tab-item] or its child #{'<a>'} with the #[code active] class will be highlighted. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <ul class="tab tab-block"> + <li class="tab-item active"> + <a href="#">Music</a> + </li> + <li class="tab-item"> + <a href="#" class="active">Playlists</a> + </li> + <li class="tab-item"> + <a href="#">Radio</a> + </li> + <li class="tab-item"> + <a href="#">Connect</a> + </li> + </ul> + +.columns + .column.col-sm-12 + ul.tab + li.tab-item.active + a.badge(href="#tabs" data-badge="999") + | Music + li.tab-item + a(href="#tabs") + | Playlists + li.tab-item + a(href="#tabs") + | Radio + .column.col-sm-12 + ul.tab.tab-block + li.tab-item.active + a.badge(href="#tabs" data-badge="9") + | Music + li.tab-item + a.badge(href="#tabs" data-badge="99") + | Playlists + li.tab-item + a(href="#tabs") + | Radio + +p + | If you need #[code badges] on tabs, you can add badge class to the element within #[code tab-item]. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <ul class="tab tab-block"> + <li class="tab-item active"> + <a href="#" class="badge" data-badge="9"> + Music + </a> + </li> + </ul> + +.columns + .column.col-12 + ul.tab + li.tab-item.active + a(href="#tabs") + | Music + span.btn.btn-clear + li.tab-item + a(href="#tabs") + | Playlists + li.tab-item + a(href="#tabs") + | Radio + li.tab-item + a(href="#tabs") + | Store + li.tab-item.tab-action + .input-group.input-inline + input.form-input.input-sm(type="text" placeholder="search") + button.btn.btn-primary.btn-sm.input-group-btn Search + +p + | You could add a search box or buttons inside a tab. + | Add the #[code tab-action] class to the #[code tab-item]. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <ul class="tab"> + <li class="tab-item active"> + <a href="#"> + Music + </a> + </li> + <li class="tab-item tab-action"> + <div class="input-group input-inline"> + <input class="form-input input-sm" type="text" placeholder="search"> + <button class="btn btn-primary btn-sm input-group-btn">Search</button> + </div> + </li> + </ul>
\ No newline at end of file diff --git a/docs/src/contents/text.pug b/docs/src/contents/text.pug new file mode 100644 index 0000000..a6a733b --- /dev/null +++ b/docs/src/contents/text.pug @@ -0,0 +1,36 @@ +p Text utilities are used for text alignment, styles and overflow things. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- left-aligned text --> + <div class="text-left"></div> + <!-- center-aligned text --> + <div class="text-center"></div> + <!-- right-aligned text --> + <div class="text-right"></div> + <!-- justified text --> + <div class="text-justify"></div> + + <!-- Lowercased text --> + <div class="text-lowercase"></div> + <!-- Uppercased text --> + <div class="text-uppercase"></div> + <!-- Capitalized text --> + <div class="text-capitalize"></div> + + <!-- Normal weight text --> + <div class="text-normal"></div> + <!-- Bold text --> + <div class="text-bold"></div> + <!-- Italicized text --> + <div class="text-italic"></div> + <!-- Larger text (120%) --> + <div class="text-large"></div> + + <!-- Overflow behavior: display an ellipsis to represent clipped text --> + <div class="text-ellipsis"></div> + <!-- Overflow behavior: truncate the text --> + <div class="text-clip"></div> + <!-- Text may be broken at arbitrary points --> + <div class="text-break"></div>
\ No newline at end of file diff --git a/docs/src/contents/tiles.pug b/docs/src/contents/tiles.pug new file mode 100644 index 0000000..e1e7379 --- /dev/null +++ b/docs/src/contents/tiles.pug @@ -0,0 +1,92 @@ +p Tiles are repeatable or embeddable information blocks. + +.columns + .column.col-9.col-sm-12 + .tile + .tile-icon + figure.avatar.avatar-lg + img(src="img/avatar-3.png" alt="Avatar") + .tile-content + p.tile-title The Avengers + p.tile-subtitle.text-gray + | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle... + .tile-action + button.btn.btn-primary Join + button.btn Contact + .column.col-9.col-sm-12 + .tile + .tile-icon + figure.avatar.avatar-lg + img(src="img/avatar-2.png" alt="Avatar") + .tile-content + p.tile-title The S.H.I.E.L.D. + p.tile-subtitle.text-gray The Strategic Homeland Intervention, Enforcement, and Logistics Division... + p + button.btn.btn-primary.btn-sm Join + button.btn.btn-sm Contact + +p + | Add a container with the #[code tile] class. + | And add child elements with the #[code tile-icon], #[code tile-content] or/and #[code tile-action] classes. + | The #[code tile-icon] and #[code tile-action] are optional. +p + | There are #[code tile-title] and #[code tile-subtitle] classes for title and subtitle text styles. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <div class="tile"> + <div class="tile-icon"> + <div class="example-tile-icon"> + <i class="icon icon-file centered"></i> + </div> + </div> + <div class="tile-content"> + <p class="tile-title">The Avengers</p> + <p class="tile-subtitle text-gray">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> + </div> + <div class="tile-action"> + <button class="btn btn-primary">Join</button> + </div> + </div> + ++docs-subheading('tiles-compact', 'Compact tiles') + +p + | There is compact version of Tiles component, which is often used as contact and file info blocks. +p + | Add the #[code tile-centered] class to the container #[code tile]. + | The #[code tile-icon], #[code tile-content] and #[code tile-action] will be vertically centered. + +.columns + .column.col-6.col-md-9.col-xs-12 + .tile.tile-centered + .tile-icon + .example-tile-icon + i.icon.icon-mail.centered + .tile-content + .tile-title spectre-docs.pdf + .tile-subtitle.text-gray 14MB · Public · 1 Jan, 2017 + .tile-action + button.btn.btn-link.btn-action + i.icon.icon-more-vert + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <div class="tile tile-centered"> + <div class="tile-icon"> + <div class="example-tile-icon"> + <i class="icon icon-file centered"></i> + </div> + </div> + <div class="tile-content"> + <div class="tile-title">spectre-docs.pdf</div> + <div class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</div> + </div> + <div class="tile-action"> + <button class="btn btn-link"> + <i class="icon icon-more-vert"></i> + </button> + </div> + </div>
\ No newline at end of file diff --git a/docs/src/contents/timelines.pug b/docs/src/contents/timelines.pug new file mode 100644 index 0000000..1badfdf --- /dev/null +++ b/docs/src/contents/timelines.pug @@ -0,0 +1,81 @@ +p Timelines are ordered sequences of activities. + +.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") + <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 diff --git a/docs/src/contents/toasts.pug b/docs/src/contents/toasts.pug new file mode 100644 index 0000000..cf4c31a --- /dev/null +++ b/docs/src/contents/toasts.pug @@ -0,0 +1,49 @@ +p Toasts are used to show alert or information to users. + +.columns + .column.col-9.col-sm-12 + .toast + button.btn.btn-clear.float-right + h6 Toast Title + | Lorem ipsum dolor sit amet, consectetur adipiscing elit. + .column.col-9.col-sm-12 + .toast.toast-primary + button.btn.btn-clear.float-right + | Lorem ipsum dolor sit amet, consectetur adipiscing elit. + +p + | Add a container element with the #[code toast] class. + | You can add any text within the container, and even icons. + | You may also add a close button with the #[code btn-clear] class if you need. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <div class="toast"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + </div> + +.columns + .column.col-sm-12 + .toast.toast-success + button.btn.btn-clear.float-right + | Toast success + .column.col-sm-12 + .toast.toast-warning + button.btn.btn-clear.float-right + | Toast warning + .column.col-sm-12 + .toast.toast-error + button.btn.btn-clear.float-right + | Toast error + +p + | And you can add the #[code toast-primary], #[code toast-success], #[code toast-warning] or #[code toast-error] class for additional toast colors. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <div class="toast toast-primary"> + <button class="btn btn-clear float-right"></button> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + </div>
\ No newline at end of file diff --git a/docs/src/contents/tooltips.pug b/docs/src/contents/tooltips.pug new file mode 100644 index 0000000..bda259a --- /dev/null +++ b/docs/src/contents/tooltips.pug @@ -0,0 +1,24 @@ +p Tooltips provide context information labels that appear on hover and focus. + +.columns.text-center + .column.col-xs-12 + button.btn.btn-primary.tooltip(data-tooltip="Top Tooltip Text") top tooltip + .column.col-xs-12 + button.btn.btn-primary.tooltip.tooltip-right(data-tooltip="Right Tooltip Text") right tooltip + .column.col-xs-12 + button.btn.btn-primary.tooltip.tooltip-bottom(data-tooltip="Bottom Tooltip Text") bottom tooltip + .column.col-xs-12 + button.btn.btn-primary.tooltip.tooltip-left(data-tooltip="Left Tooltip Text") left tooltip + +p Tooltips component is built entirely in CSS. +p + | Add the #[code tooltip] class and the #[code data-tooltip] attribute, which contains the tooltip content, to non self closing elements. +p + | And add the #[code tooltip-right], #[code tooltip-bottom] or #[code tooltip-left] class to define the position of a tooltip. + | By default, the tooltip appears above the element. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button> + <button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>
\ No newline at end of file diff --git a/docs/src/experimentals.pug b/docs/src/experimentals.pug new file mode 100644 index 0000000..770f19b --- /dev/null +++ b/docs/src/experimentals.pug @@ -0,0 +1,55 @@ +extends _docs-layout.pug + +block variables + - var title = 'Experimentals - Spectre.css CSS Framework' + - var description = '' + - var current = 'experimentals' + +block docs-content + //- Experimentals + +docs-heading('experimentals', 'Experimentals') + include contents/experimentals.pug + + //- Autocomplete + +docs-heading('autocomplete', 'Autocomplete') + include contents/autocomplete.pug + + //- Calendars + +docs-heading('calendars', 'Calendars') + include contents/calendars.pug + + //- Carousels + +docs-heading('carousels', 'Carousels') + include contents/carousels.pug + + //- Comparison sliders + +docs-heading('comparison', 'Comparison sliders') + include contents/comparison.pug + + //- Filters + +docs-heading('filters', 'Filters') + include contents/filters.pug + + //- Meters + +docs-heading('meters', 'Meters') + include contents/meters.pug + + //- Off-canvas + +docs-heading('off-canvas', 'Off-canvas') + include contents/off-canvas.pug + + //- Parallax + +docs-heading('parallax', 'Parallax') + include contents/parallax.pug + + //- Progress + +docs-heading('progress', 'Progress') + include contents/progress.pug + + //- Sliders + +docs-heading('sliders', 'Sliders') + include contents/sliders.pug + + //- Timelines + +docs-heading('timelines', 'Timelines') + include contents/timelines.pug
\ No newline at end of file diff --git a/docs/src/utilities.pug b/docs/src/utilities.pug new file mode 100644 index 0000000..e516576 --- /dev/null +++ b/docs/src/utilities.pug @@ -0,0 +1,39 @@ +extends _docs-layout.pug + +block variables + - var title = 'Utilities - Spectre.css CSS Framework' + - var description = '' + - var current = 'utilities' + +block docs-content + //- Colors + +docs-heading('colors', 'Color utilities') + include contents/colors.pug + + //- Cursor + +docs-heading('cursor', 'Cursor utilities') + include contents/cursor.pug + + //- Display + +docs-heading('display', 'Display utilities') + include contents/display.pug + + //- Divider + +docs-heading('divider', 'Divider') + include contents/divider.pug + + //- Loading + +docs-heading('loading', 'Loading') + include contents/loading.pug + + //- Position + +docs-heading('position', 'Position utilities') + include contents/position.pug + + //- Shapes + +docs-heading('shapes', 'Shape utilities') + include contents/shapes.pug + + //- Text + +docs-heading('text', 'Text utilities') + include contents/text.pug
\ No newline at end of file |