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/components/accordions.pug | 129 +++++++++++++++++++++++ docs/src/components/avatars.pug | 114 ++++++++++++++++++++ docs/src/components/badges.pug | 75 ++++++++++++++ docs/src/components/bars.pug | 98 ++++++++++++++++++ docs/src/components/breadcrumbs.pug | 61 +++++++++++ docs/src/components/cards.pug | 110 ++++++++++++++++++++ docs/src/components/chips.pug | 60 +++++++++++ docs/src/components/empty.pug | 66 ++++++++++++ docs/src/components/menu.pug | 200 ++++++++++++++++++++++++++++++++++++ docs/src/components/modals.pug | 157 ++++++++++++++++++++++++++++ docs/src/components/nav.pug | 73 +++++++++++++ docs/src/components/pagination.pug | 118 +++++++++++++++++++++ docs/src/components/panels.pug | 130 +++++++++++++++++++++++ docs/src/components/popovers.pug | 99 ++++++++++++++++++ docs/src/components/steps.pug | 62 +++++++++++ docs/src/components/tabs.pug | 148 ++++++++++++++++++++++++++ docs/src/components/tiles.pug | 108 +++++++++++++++++++ docs/src/components/toasts.pug | 65 ++++++++++++ docs/src/components/tooltips.pug | 40 ++++++++ 19 files changed, 1913 insertions(+) create mode 100644 docs/src/components/accordions.pug create mode 100644 docs/src/components/avatars.pug create mode 100644 docs/src/components/badges.pug create mode 100644 docs/src/components/bars.pug create mode 100644 docs/src/components/breadcrumbs.pug create mode 100644 docs/src/components/cards.pug create mode 100644 docs/src/components/chips.pug create mode 100644 docs/src/components/empty.pug create mode 100644 docs/src/components/menu.pug create mode 100644 docs/src/components/modals.pug create mode 100644 docs/src/components/nav.pug create mode 100644 docs/src/components/pagination.pug create mode 100644 docs/src/components/panels.pug create mode 100644 docs/src/components/popovers.pug create mode 100644 docs/src/components/steps.pug create mode 100644 docs/src/components/tabs.pug create mode 100644 docs/src/components/tiles.pug create mode 100644 docs/src/components/toasts.pug create mode 100644 docs/src/components/tooltips.pug (limited to 'docs/src/components') diff --git a/docs/src/components/accordions.pug b/docs/src/components/accordions.pug new file mode 100644 index 0000000..a3c8fcf --- /dev/null +++ b/docs/src/components/accordions.pug @@ -0,0 +1,129 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'accordions' + - var parent = 'components' + - var title = 'Accordions - Components - 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('accordions', 'Accordions') + include ../_layout/_ad-g.pug + + p Accordions are used to toggle sections of content. + + .docs-demo.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") + +
+ + +
+ +
+
+ + +
+ + +
+ +
+
+ + 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") + +
+ + + Title + +
+ +
+
+ + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/components/avatars.pug b/docs/src/components/avatars.pug new file mode 100644 index 0000000..a513648 --- /dev/null +++ b/docs/src/components/avatars.pug @@ -0,0 +1,114 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'avatars' + - var parent = 'components' + - var title = 'Avatars - Components - 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('avatars', 'Avatars') + include ../_layout/_ad-g.pug + + p Avatars are user profile pictures. + + .docs-demo.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 #{''} 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 #{'
'} element. + | The #[code data-initial] attribute is the name appear inside the avatar. + + pre.code(data-lang='HTML') + code + :highlight(lang="html") + +
+ ... +
+ +
+ + +
+ ... +
+ + .docs-demo.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") +
+ ... + ... +
+ + +docs-subheading('avatars-presence', 'Avatar presence') + + .docs-demo.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 #{''} 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") +
+ ... + +
+ + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/components/badges.pug b/docs/src/components/badges.pug new file mode 100644 index 0000000..f6232a2 --- /dev/null +++ b/docs/src/components/badges.pug @@ -0,0 +1,75 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'badges' + - var parent = 'components' + - var title = 'Badges - Components - 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('badges', 'Badges') + include ../_layout/_ad-g.pug + + p Badges are often used as unread number indicators. + + .docs-demo.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. + + .docs-demo.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") + + Notifications + + + + Notifications + + + + +
+ YZ +
+ + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/components/bars.pug b/docs/src/components/bars.pug new file mode 100644 index 0000000..31d8418 --- /dev/null +++ b/docs/src/components/bars.pug @@ -0,0 +1,98 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'bars' + - var parent = 'components' + - var title = 'Bars - Components - 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('bars', 'Bars') + include ../_layout/_ad-g.pug + + p + | Bars represent the progress of a task or the value within the known range. + | Bars are custom components for displaying HTML5 #{''}, #{''} and input range elements. + + .docs-demo.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") + .column.col-8.col-xs-12 + .bar + .bar-item.tooltip(data-tooltip="50%" role="progressbar" style="width:50%;") + .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") + +
+
+
+ + +
+
25%
+
15%
+
+ + +docs-subheading('bars-slider', 'Slider bars') + + .docs-demo.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") + .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") + +
+
+ +
+
+ + +
+
+ +
+
+ +
+
+ + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/components/breadcrumbs.pug b/docs/src/components/breadcrumbs.pug new file mode 100644 index 0000000..c6f4ffe --- /dev/null +++ b/docs/src/components/breadcrumbs.pug @@ -0,0 +1,61 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'breadcrumbs' + - var parent = 'components' + - var title = 'Breadcrumbs - Components - 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('breadcrumbs', 'Breadcrumbs') + include ../_layout/_ad-g.pug + + p Breadcrumbs are used as navigational hierarchies to indicate current location. + + .docs-demo.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") + + + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/components/cards.pug b/docs/src/components/cards.pug new file mode 100644 index 0000000..7dbcd83 --- /dev/null +++ b/docs/src/components/cards.pug @@ -0,0 +1,110 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'cards' + - var parent = 'components' + - var title = 'Cards - Components - 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('cards', 'Cards') + include ../_layout/_ad-g.pug + + p Cards are flexible content containers. + + .docs-demo.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") +
+
+ +
+
+
...
+
...
+
+
+ ... +
+
+ +
+
+ + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/components/chips.pug b/docs/src/components/chips.pug new file mode 100644 index 0000000..18bcf9d --- /dev/null +++ b/docs/src/components/chips.pug @@ -0,0 +1,60 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'chips' + - var parent = 'components' + - var title = 'Chips - Components - 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('chips', 'Chips') + include ../_layout/_ad-g.pug + + p Chips are complex entities in small blocks. + + .docs-demo.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") + Crime + + + Biography + + + +
+ + Yan Zhu + +
+ + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/components/empty.pug b/docs/src/components/empty.pug new file mode 100644 index 0000000..b23ce8c --- /dev/null +++ b/docs/src/components/empty.pug @@ -0,0 +1,66 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'empty' + - var parent = 'components' + - var title = 'Empty states - Components - 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('empty', 'Empty states') + include ../_layout/_ad-g.pug + + p + | Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens. + + .docs-demo.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") +
+
+ +
+

You have no new messages

+

Click the button to start a conversation.

+
+ +
+
+ + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/components/menu.pug b/docs/src/components/menu.pug new file mode 100644 index 0000000..e358056 --- /dev/null +++ b/docs/src/components/menu.pug @@ -0,0 +1,200 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'menu' + - var parent = 'components' + - var title = 'Menu - Components - 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('menu', 'Menu') + include ../_layout/_ad-g.pug + + p Menus are vertical list of links or buttons for actions and navigation. + + .docs-demo.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") + + + +docs-subheading('menu-dropdown', 'Dropdown menu') + + p The dropdown is a combination of buttons and menus. + + .docs-demo.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. + + .docs-demo.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") + +
+ + dropdown menu + + +
    + ... +
+
+ + +
+
+ + dropdown button + + + + + + +
    + ... +
+
+
+ + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/components/modals.pug b/docs/src/components/modals.pug new file mode 100644 index 0000000..f084864 --- /dev/null +++ b/docs/src/components/modals.pug @@ -0,0 +1,157 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'modals' + - var parent = 'components' + - var title = 'Modals - Components - 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('modals', 'Modals') + include ../_layout/_ad-g.pug + + p Modals are flexible dialog prompts. + + .docs-demo.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") + + + +docs-subheading('modals-sizes', 'Modal sizes') + + .docs-demo.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]. + + .docs-demo.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") +
+ +
+ +
+
+ + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/components/nav.pug b/docs/src/components/nav.pug new file mode 100644 index 0000000..3ee2097 --- /dev/null +++ b/docs/src/components/nav.pug @@ -0,0 +1,73 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'nav' + - var parent = 'components' + - var title = 'Nav - Components - 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('nav', 'Nav') + include ../_layout/_ad-g.pug + + .docs-demo.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") + + + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/components/pagination.pug b/docs/src/components/pagination.pug new file mode 100644 index 0000000..c20f8b2 --- /dev/null +++ b/docs/src/components/pagination.pug @@ -0,0 +1,118 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'pagination' + - var parent = 'components' + - var title = 'Pagination - Components - 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('pagination', 'Pagination') + include ../_layout/_ad-g.pug + + .docs-demo.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") + + + .docs-demo.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") + + + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/components/panels.pug b/docs/src/components/panels.pug new file mode 100644 index 0000000..487b8d4 --- /dev/null +++ b/docs/src/components/panels.pug @@ -0,0 +1,130 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'panels' + - var parent = 'components' + - var title = 'Panels - Components - 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('panels', 'Panels') + include ../_layout/_ad-g.pug + + p Panels are flexible view container with auto-expand content section. + + .docs-demo.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.text-bold E-mail + .tile-subtitle bruce.banner@hulk.com + .tile-action + button.btn.btn-link.btn-action.btn-lg.tooltip.tooltip-left(data-tooltip="Edit E-mail") + i.icon.icon-edit + .tile.tile-centered + .tile-content + .tile-title.text-bold 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.text-bold 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.text-bold 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.text-bold 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.text-bold 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.text-bold 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.text-bold 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") +
+
+
Comments
+
+
+ +
+
+ +
+
+ +
+
+ + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/components/popovers.pug b/docs/src/components/popovers.pug new file mode 100644 index 0000000..25bfe20 --- /dev/null +++ b/docs/src/components/popovers.pug @@ -0,0 +1,99 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'popovers' + - var parent = 'components' + - var title = 'Popovers - Components - 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('popovers', 'Popovers') + include ../_layout/_ad-g.pug + + p Popovers are small overlay content containers. Popovers component is built entirely in CSS. + + .docs-demo.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") +
+ +
+
+
+ ... +
+
+ ... +
+
+ ... +
+
+
+
+ + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/components/steps.pug b/docs/src/components/steps.pug new file mode 100644 index 0000000..57f0feb --- /dev/null +++ b/docs/src/components/steps.pug @@ -0,0 +1,62 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'steps' + - var parent = 'components' + - var title = 'Steps - Components - 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('steps', 'Steps') + include ../_layout/_ad-g.pug + + p Steps are progress indicators of a sequence of task steps. + + .docs-demo.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") + + + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/components/tabs.pug b/docs/src/components/tabs.pug new file mode 100644 index 0000000..0050682 --- /dev/null +++ b/docs/src/components/tabs.pug @@ -0,0 +1,148 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'tabs' + - var parent = 'components' + - var title = 'Tabs - Components - 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('tabs', 'Tabs') + include ../_layout/_ad-g.pug + + p Tabs enable quick switch between different views. + + .docs-demo.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 #{''} with the #[code active] class will be highlighted. + + pre.code(data-lang='HTML') + code + :highlight(lang="html") + + + .docs-demo.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") + + + .docs-demo.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") + + + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/components/tiles.pug b/docs/src/components/tiles.pug new file mode 100644 index 0000000..25bd042 --- /dev/null +++ b/docs/src/components/tiles.pug @@ -0,0 +1,108 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'tiles' + - var parent = 'components' + - var title = 'Tiles - Components - 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('tiles', 'Tiles') + include ../_layout/_ad-g.pug + + p Tiles are repeatable or embeddable information blocks. + + .docs-demo.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") +
+
+
+ +
+
+
+

The Avengers

+

Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

+
+
+ +
+
+ + +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. + + .docs-demo.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") +
+
+
+ +
+
+
+
spectre-docs.pdf
+
14MB · Public · 1 Jan, 2017
+
+
+ +
+
+ + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/components/toasts.pug b/docs/src/components/toasts.pug new file mode 100644 index 0000000..d1d9bb9 --- /dev/null +++ b/docs/src/components/toasts.pug @@ -0,0 +1,65 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'toasts' + - var parent = 'components' + - var title = 'Toasts - Components - 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('toasts', 'Toasts') + include ../_layout/_ad-g.pug + + p Toasts are used to show alert or information to users. + + .docs-demo.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") +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
+ + .docs-demo.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") +
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
+ + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/components/tooltips.pug b/docs/src/components/tooltips.pug new file mode 100644 index 0000000..7fdafde --- /dev/null +++ b/docs/src/components/tooltips.pug @@ -0,0 +1,40 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'tooltips' + - var parent = 'components' + - var title = 'Tooltips - Components - 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('tooltips', 'Tooltips') + include ../_layout/_ad-g.pug + + p Tooltips provide context information labels that appear on hover and focus. + + .docs-demo.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") + + + + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file -- cgit v1.3.1-23-gd82d