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/_docs-layout.pug | 102 ----- docs/src/_footer.pug | 19 - docs/src/_layout.pug | 44 -- docs/src/_layout/_ad-c.pug | 3 + docs/src/_layout/_ad-g.pug | 13 + docs/src/_layout/_docs-layout.pug | 106 +++++ docs/src/_layout/_footer.pug | 19 + docs/src/_layout/_layout.pug | 57 +++ docs/src/_layout/_mixins.pug | 25 ++ docs/src/_mixins.pug | 22 - docs/src/components.pug | 84 +--- 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 ++ docs/src/contents/_ad-c.pug | 3 - docs/src/contents/_ad-g.pug | 13 - docs/src/contents/accordions.pug | 113 ----- docs/src/contents/autocomplete.pug | 119 ----- docs/src/contents/avatars.pug | 98 ---- docs/src/contents/badges.pug | 59 --- docs/src/contents/bars.pug | 82 ---- docs/src/contents/breadcrumbs.pug | 45 -- docs/src/contents/browsers.pug | 25 -- docs/src/contents/buttons.pug | 178 -------- docs/src/contents/calendars.pug | 298 ------------- docs/src/contents/cards.pug | 94 ---- docs/src/contents/carousels.pug | 78 ---- docs/src/contents/chips.pug | 44 -- docs/src/contents/code.pug | 22 - docs/src/contents/colors.pug | 95 ---- docs/src/contents/comparison.pug | 29 -- docs/src/contents/cursors.pug | 31 -- docs/src/contents/custom.pug | 287 ------------ docs/src/contents/display.pug | 26 -- docs/src/contents/divider.pug | 56 --- docs/src/contents/empty.pug | 50 --- docs/src/contents/experimentals.pug | 4 - docs/src/contents/filters.pug | 107 ----- docs/src/contents/forms.pug | 697 ----------------------------- docs/src/contents/grid.pug | 171 ------- docs/src/contents/icons.pug | 197 --------- docs/src/contents/installation.pug | 68 --- docs/src/contents/introduction.pug | 5 - docs/src/contents/labels.pug | 35 -- docs/src/contents/loading.pug | 21 - docs/src/contents/media.pug | 73 --- docs/src/contents/menu.pug | 184 -------- docs/src/contents/meters.pug | 22 - docs/src/contents/modals.pug | 141 ------ docs/src/contents/nav.pug | 57 --- docs/src/contents/navbar.pug | 66 --- docs/src/contents/off-canvas.pug | 45 -- docs/src/contents/pagination.pug | 102 ----- docs/src/contents/panels.pug | 114 ----- docs/src/contents/parallax.pug | 34 -- docs/src/contents/popovers.pug | 83 ---- docs/src/contents/position.pug | 41 -- docs/src/contents/progress.pug | 17 - docs/src/contents/responsive.pug | 254 ----------- docs/src/contents/shapes.pug | 17 - docs/src/contents/sliders.pug | 18 - docs/src/contents/steps.pug | 47 -- docs/src/contents/tables.pug | 107 ----- docs/src/contents/tabs.pug | 132 ------ docs/src/contents/text.pug | 36 -- docs/src/contents/tiles.pug | 92 ---- docs/src/contents/timelines.pug | 81 ---- docs/src/contents/toasts.pug | 49 -- docs/src/contents/tooltips.pug | 24 - docs/src/contents/typography.pug | 257 ----------- docs/src/contents/whatsnew.pug | 4 - docs/src/elements.pug | 38 +- docs/src/elements/buttons.pug | 194 ++++++++ docs/src/elements/code.pug | 38 ++ docs/src/elements/forms.pug | 713 ++++++++++++++++++++++++++++++ docs/src/elements/icons.pug | 213 +++++++++ docs/src/elements/labels.pug | 51 +++ docs/src/elements/media.pug | 89 ++++ docs/src/elements/tables.pug | 123 ++++++ docs/src/elements/typography.pug | 273 ++++++++++++ docs/src/experimentals.pug | 58 +-- docs/src/experimentals/autocomplete.pug | 135 ++++++ docs/src/experimentals/calendars.pug | 314 +++++++++++++ docs/src/experimentals/carousels.pug | 94 ++++ docs/src/experimentals/comparison.pug | 45 ++ docs/src/experimentals/filters.pug | 123 ++++++ docs/src/experimentals/meters.pug | 38 ++ docs/src/experimentals/off-canvas.pug | 61 +++ docs/src/experimentals/parallax.pug | 50 +++ docs/src/experimentals/progress.pug | 33 ++ docs/src/experimentals/sliders.pug | 34 ++ docs/src/experimentals/timelines.pug | 97 ++++ docs/src/getting-started.pug | 38 +- docs/src/getting-started/browsers.pug | 41 ++ docs/src/getting-started/custom.pug | 303 +++++++++++++ docs/src/getting-started/installation.pug | 84 ++++ docs/src/getting-started/whatsnew.pug | 20 + docs/src/index.pug | 19 +- docs/src/layout.pug | 20 +- docs/src/layout/grid.pug | 187 ++++++++ docs/src/layout/navbar.pug | 82 ++++ docs/src/layout/responsive.pug | 269 +++++++++++ docs/src/utilities.pug | 35 +- docs/src/utilities/colors.pug | 111 +++++ docs/src/utilities/cursors.pug | 47 ++ docs/src/utilities/display.pug | 42 ++ docs/src/utilities/divider.pug | 72 +++ docs/src/utilities/loading.pug | 37 ++ docs/src/utilities/position.pug | 57 +++ docs/src/utilities/shapes.pug | 33 ++ docs/src/utilities/text.pug | 52 +++ 127 files changed, 6350 insertions(+), 5667 deletions(-) delete mode 100644 docs/src/_docs-layout.pug delete mode 100644 docs/src/_footer.pug delete mode 100644 docs/src/_layout.pug create mode 100644 docs/src/_layout/_ad-c.pug create mode 100644 docs/src/_layout/_ad-g.pug create mode 100644 docs/src/_layout/_docs-layout.pug create mode 100644 docs/src/_layout/_footer.pug create mode 100644 docs/src/_layout/_layout.pug create mode 100644 docs/src/_layout/_mixins.pug delete mode 100644 docs/src/_mixins.pug 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 delete mode 100644 docs/src/contents/_ad-c.pug delete mode 100644 docs/src/contents/_ad-g.pug delete mode 100644 docs/src/contents/accordions.pug delete mode 100644 docs/src/contents/autocomplete.pug delete mode 100644 docs/src/contents/avatars.pug delete mode 100644 docs/src/contents/badges.pug delete mode 100644 docs/src/contents/bars.pug delete mode 100644 docs/src/contents/breadcrumbs.pug delete mode 100644 docs/src/contents/browsers.pug delete mode 100644 docs/src/contents/buttons.pug delete mode 100644 docs/src/contents/calendars.pug delete mode 100644 docs/src/contents/cards.pug delete mode 100644 docs/src/contents/carousels.pug delete mode 100644 docs/src/contents/chips.pug delete mode 100644 docs/src/contents/code.pug delete mode 100644 docs/src/contents/colors.pug delete mode 100644 docs/src/contents/comparison.pug delete mode 100644 docs/src/contents/cursors.pug delete mode 100644 docs/src/contents/custom.pug delete mode 100644 docs/src/contents/display.pug delete mode 100644 docs/src/contents/divider.pug delete mode 100644 docs/src/contents/empty.pug delete mode 100644 docs/src/contents/experimentals.pug delete mode 100644 docs/src/contents/filters.pug delete mode 100644 docs/src/contents/forms.pug delete mode 100644 docs/src/contents/grid.pug delete mode 100644 docs/src/contents/icons.pug delete mode 100644 docs/src/contents/installation.pug delete mode 100644 docs/src/contents/introduction.pug delete mode 100644 docs/src/contents/labels.pug delete mode 100644 docs/src/contents/loading.pug delete mode 100644 docs/src/contents/media.pug delete mode 100644 docs/src/contents/menu.pug delete mode 100644 docs/src/contents/meters.pug delete mode 100644 docs/src/contents/modals.pug delete mode 100644 docs/src/contents/nav.pug delete mode 100644 docs/src/contents/navbar.pug delete mode 100644 docs/src/contents/off-canvas.pug delete mode 100644 docs/src/contents/pagination.pug delete mode 100644 docs/src/contents/panels.pug delete mode 100644 docs/src/contents/parallax.pug delete mode 100644 docs/src/contents/popovers.pug delete mode 100644 docs/src/contents/position.pug delete mode 100644 docs/src/contents/progress.pug delete mode 100644 docs/src/contents/responsive.pug delete mode 100644 docs/src/contents/shapes.pug delete mode 100644 docs/src/contents/sliders.pug delete mode 100644 docs/src/contents/steps.pug delete mode 100644 docs/src/contents/tables.pug delete mode 100644 docs/src/contents/tabs.pug delete mode 100644 docs/src/contents/text.pug delete mode 100644 docs/src/contents/tiles.pug delete mode 100644 docs/src/contents/timelines.pug delete mode 100644 docs/src/contents/toasts.pug delete mode 100644 docs/src/contents/tooltips.pug delete mode 100644 docs/src/contents/typography.pug delete mode 100644 docs/src/contents/whatsnew.pug create mode 100644 docs/src/elements/buttons.pug create mode 100644 docs/src/elements/code.pug create mode 100644 docs/src/elements/forms.pug create mode 100644 docs/src/elements/icons.pug create mode 100644 docs/src/elements/labels.pug create mode 100644 docs/src/elements/media.pug create mode 100644 docs/src/elements/tables.pug create mode 100644 docs/src/elements/typography.pug create mode 100644 docs/src/experimentals/autocomplete.pug create mode 100644 docs/src/experimentals/calendars.pug create mode 100644 docs/src/experimentals/carousels.pug create mode 100644 docs/src/experimentals/comparison.pug create mode 100644 docs/src/experimentals/filters.pug create mode 100644 docs/src/experimentals/meters.pug create mode 100644 docs/src/experimentals/off-canvas.pug create mode 100644 docs/src/experimentals/parallax.pug create mode 100644 docs/src/experimentals/progress.pug create mode 100644 docs/src/experimentals/sliders.pug create mode 100644 docs/src/experimentals/timelines.pug create mode 100644 docs/src/getting-started/browsers.pug create mode 100644 docs/src/getting-started/custom.pug create mode 100644 docs/src/getting-started/installation.pug create mode 100644 docs/src/getting-started/whatsnew.pug create mode 100644 docs/src/layout/grid.pug create mode 100644 docs/src/layout/navbar.pug create mode 100644 docs/src/layout/responsive.pug create mode 100644 docs/src/utilities/colors.pug create mode 100644 docs/src/utilities/cursors.pug create mode 100644 docs/src/utilities/display.pug create mode 100644 docs/src/utilities/divider.pug create mode 100644 docs/src/utilities/loading.pug create mode 100644 docs/src/utilities/position.pug create mode 100644 docs/src/utilities/shapes.pug create mode 100644 docs/src/utilities/text.pug (limited to 'docs/src') diff --git a/docs/src/_docs-layout.pug b/docs/src/_docs-layout.pug deleted file mode 100644 index 9aa50e7..0000000 --- a/docs/src/_docs-layout.pug +++ /dev/null @@ -1,102 +0,0 @@ -extends _layout.pug -include _mixins.pug - -block content - .docs-container.off-canvas.off-canvas-sidebar-show - .docs-navbar - a.off-canvas-toggle.btn.btn-link.btn-action(href='#sidebar') - i.icon.icon-menu - .btns - a.btn.btn-primary.float-right(href='https://github.com/picturepan2/spectre' target='_blank') GitHub - a.btn.mr-1.float-right(href='https://www.paypal.me/picturepan2' target='_blank') Sponsor - - #sidebar.docs-sidebar.off-canvas-sidebar - .docs-brand - a.docs-logo(href='index.html') - img(src='img/spectre-logo.svg' alt='Spectre.css CSS Framework') - h2 SPECTRE - .docs-nav - .accordion-container - +docs-accordion( - 'getting-started', - 'Getting started', - {url: '#introduction', name: 'Introduction'}, - {url: '#installation', name: 'Installation'}, - {url: '#custom', name: 'Custom version'}, - {url: '#browsers', name: 'Browser support'}, - {url: '#whatsnew', name: 'What\'s new'} - ) - +docs-accordion( - 'elements', - 'Elements', - {url: '#typography', name: 'Typography'}, - {url: '#tables', name: 'Tables'}, - {url: '#buttons', name: 'Buttons'}, - {url: '#forms', name: 'Forms'}, - {url: '#icons', name: 'Icons'}, - {url: '#labels', name: 'Labels'}, - {url: '#code', name: 'Code'}, - {url: '#media', name: 'Media'} - ) - +docs-accordion( - 'layout', - 'Layout', - {url: '#grid', name: 'Flexbox grid'}, - {url: '#responsive', name: 'Responsive'}, - {url: '#navbar', name: 'Navbar'} - ) - +docs-accordion( - 'components', - 'Components', - {url: '#accordions', name: 'Accordions'}, - {url: '#avatars', name: 'Avatars'}, - {url: '#badges', name: 'Badges'}, - {url: '#bars', name: 'Bars'}, - {url: '#breadcrumbs', name: 'Breadcrumbs'}, - {url: '#cards', name: 'Cards'}, - {url: '#chips', name: 'Chips'}, - {url: '#empty', name: 'Empty states'}, - {url: '#menu', name: 'Menu'}, - {url: '#modals', name: 'Modals'}, - {url: '#nav', name: 'Nav'}, - {url: '#pagination', name: 'Pagination'}, - {url: '#panels', name: 'Panels'}, - {url: '#popovers', name: 'Popovers'}, - {url: '#steps', name: 'Steps'}, - {url: '#tabs', name: 'Tabs'}, - {url: '#tiles', name: 'Tiles'}, - {url: '#toasts', name: 'Toasts'}, - {url: '#tooltips', name: 'Tooltips'} - ) - +docs-accordion( - 'utilities', - 'Utilities', - {url: '#colors', name: 'Colors'}, - {url: '#cursors', name: 'Cursors'}, - {url: '#display', name: 'Display'}, - {url: '#divider', name: 'Divider'}, - {url: '#loading', name: 'Loading'}, - {url: '#position', name: 'Position'}, - {url: '#shapes', name: 'Shapes'}, - {url: '#text', name: 'Text'} - ) - +docs-accordion( - 'experimentals', - 'Experimentals', - {url: '#autocomplete', name: 'Autocomplete'}, - {url: '#calendars', name: 'Calendars'}, - {url: '#carousels', name: 'Carousels'}, - {url: '#comparison', name: 'Comparison sliders'}, - {url: '#filters', name: 'Filters'}, - {url: '#meters', name: 'Meters'}, - {url: '#off-canvas', name: 'Off-canvas'}, - {url: '#parallax', name: 'Parallax'}, - {url: '#progress', name: 'Progress'}, - {url: '#sliders', name: 'Sliders'}, - {url: '#timelines', name: 'Timelines'} - ) - - a.off-canvas-overlay(href='#close') - .off-canvas-content - #content.docs-content - block docs-content \ No newline at end of file diff --git a/docs/src/_footer.pug b/docs/src/_footer.pug deleted file mode 100644 index 82a5b2e..0000000 --- a/docs/src/_footer.pug +++ /dev/null @@ -1,19 +0,0 @@ -#copyright.docs-footer.container.grid-lg - p - a(href='getting-started.html' target='_blank') Documents - | · - a(href='https://github.com/picturepan2/spectre' target='_blank') GitHub - | · - a(href='https://twitter.com/spectrecss' target='_blank') Twitter - | · - a(href='https://www.paypal.me/picturepan2' target='_blank') PayPal Donate - | · Version - span.version - p - | Designed and built with - span.text-error ♥ - | by - a(href='https://twitter.com/picturepan2' target='_blank') Yan Zhu - | . Licensed under the - a(href='https://github.com/picturepan2/spectre/blob/master/LICENSE' target='_blank') MIT License - | . \ No newline at end of file diff --git a/docs/src/_layout.pug b/docs/src/_layout.pug deleted file mode 100644 index 511d798..0000000 --- a/docs/src/_layout.pug +++ /dev/null @@ -1,44 +0,0 @@ -block global - - var domain = 'https://picturepan2.github.io/spectre/' - -block variables - - var slug = '' - - var title = 'Spectre.css - A Lightweight, Responsive and Modern 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.' - -if slug - - var url = domain + slug + '.html' -else - - var url = domain - -doctype html -html(lang='en') - head - title= title - meta(charset='utf-8') - meta(name='robots' content='index, follow') - meta(name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no') - meta(http-equiv='x-ua-compatible' content='ie=edge') - meta(name='description' content= description) - meta(name='author' content='Yan Zhu') - link(rel='shortcut icon' href='img/favicons/favicon.ico') - link(rel='icon' href='img/favicons/favicon.png') - link(rel='stylesheet' href='dist/spectre.min.css') - link(rel='stylesheet' href='dist/spectre-icons.min.css') - link(rel='stylesheet' href='dist/spectre-exp.min.css') - link(rel='stylesheet' href='dist/docs.min.css') - link(rel='canonical' href= url) - - body - block content - - script. - (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ - (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), - m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) - })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); - - ga('create', 'UA-2702768-8', 'auto'); - ga('send', 'pageview'); - - \ No newline at end of file diff --git a/docs/src/_layout/_ad-c.pug b/docs/src/_layout/_ad-c.pug new file mode 100644 index 0000000..79b3e2c --- /dev/null +++ b/docs/src/_layout/_ad-c.pug @@ -0,0 +1,3 @@ +block ad-carbons + .docs-ad.docs-ad-sidebar.text-center + script#_carbonads_js(async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio") \ No newline at end of file diff --git a/docs/src/_layout/_ad-g.pug b/docs/src/_layout/_ad-g.pug new file mode 100644 index 0000000..c227ea8 --- /dev/null +++ b/docs/src/_layout/_ad-g.pug @@ -0,0 +1,13 @@ +block ad-adsense + .docs-ad + .hide-md.text-center + script(async='', src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js') + // GitHub-lg + ins.adsbygoogle.mx-auto(style='display:inline-block;width:728px;height:90px', data-ad-client='ca-pub-2225124559530218', data-ad-slot='9894180784') + script. + (adsbygoogle = window.adsbygoogle || []).push({}); + .show-md.text-center + // GitHub-sm + ins.adsbygoogle(style='display:inline-block;width:300px;height:250px', data-ad-client='ca-pub-2225124559530218', data-ad-slot='9278881734') + script. + (adsbygoogle = window.adsbygoogle || []).push({}); \ No newline at end of file diff --git a/docs/src/_layout/_docs-layout.pug b/docs/src/_layout/_docs-layout.pug new file mode 100644 index 0000000..a935fc1 --- /dev/null +++ b/docs/src/_layout/_docs-layout.pug @@ -0,0 +1,106 @@ +extends _layout.pug +include _mixins.pug + +block content + .docs-container.off-canvas.off-canvas-sidebar-show + .docs-navbar + a.off-canvas-toggle.btn.btn-link.btn-action(href='#sidebar') + i.icon.icon-menu + .btns + a.btn.btn-primary.float-right(href='https://github.com/picturepan2/spectre' target='_blank') GitHub + a.btn.mr-1.float-right(href='https://www.paypal.me/picturepan2' target='_blank') Sponsor + + #sidebar.docs-sidebar.off-canvas-sidebar + .docs-brand + if slug != parent + a.docs-logo(href='../index.html') + img(src='../img/spectre-logo.svg' alt='Spectre.css CSS Framework') + h2 SPECTRE + else + a.docs-logo(href='index.html') + img(src='img/spectre-logo.svg' alt='Spectre.css CSS Framework') + h2 SPECTRE + .docs-nav + .accordion-container + +docs-accordion( + 'getting-started', + 'Getting started', + {url: 'installation', name: 'Installation'}, + {url: 'custom', name: 'Custom version'}, + {url: 'browsers', name: 'Browser support'}, + {url: 'whatsnew', name: 'What\'s new'} + ) + +docs-accordion( + 'elements', + 'Elements', + {url: 'typography', name: 'Typography'}, + {url: 'tables', name: 'Tables'}, + {url: 'buttons', name: 'Buttons'}, + {url: 'forms', name: 'Forms'}, + {url: 'icons', name: 'Icons'}, + {url: 'labels', name: 'Labels'}, + {url: 'code', name: 'Code'}, + {url: 'media', name: 'Media'} + ) + +docs-accordion( + 'layout', + 'Layout', + {url: 'grid', name: 'Flexbox grid'}, + {url: 'responsive', name: 'Responsive'}, + {url: 'navbar', name: 'Navbar'} + ) + +docs-accordion( + 'components', + 'Components', + {url: 'accordions', name: 'Accordions'}, + {url: 'avatars', name: 'Avatars'}, + {url: 'badges', name: 'Badges'}, + {url: 'bars', name: 'Bars'}, + {url: 'breadcrumbs', name: 'Breadcrumbs'}, + {url: 'cards', name: 'Cards'}, + {url: 'chips', name: 'Chips'}, + {url: 'empty', name: 'Empty states'}, + {url: 'menu', name: 'Menu'}, + {url: 'modals', name: 'Modals'}, + {url: 'nav', name: 'Nav'}, + {url: 'pagination', name: 'Pagination'}, + {url: 'panels', name: 'Panels'}, + {url: 'popovers', name: 'Popovers'}, + {url: 'steps', name: 'Steps'}, + {url: 'tabs', name: 'Tabs'}, + {url: 'tiles', name: 'Tiles'}, + {url: 'toasts', name: 'Toasts'}, + {url: 'tooltips', name: 'Tooltips'} + ) + +docs-accordion( + 'utilities', + 'Utilities', + {url: 'colors', name: 'Colors'}, + {url: 'cursors', name: 'Cursors'}, + {url: 'display', name: 'Display'}, + {url: 'divider', name: 'Divider'}, + {url: 'loading', name: 'Loading'}, + {url: 'position', name: 'Position'}, + {url: 'shapes', name: 'Shapes'}, + {url: 'text', name: 'Text'} + ) + +docs-accordion( + 'experimentals', + 'Experimentals', + {url: 'autocomplete', name: 'Autocomplete'}, + {url: 'calendars', name: 'Calendars'}, + {url: 'carousels', name: 'Carousels'}, + {url: 'comparison', name: 'Comparison sliders'}, + {url: 'filters', name: 'Filters'}, + {url: 'meters', name: 'Meters'}, + {url: 'off-canvas', name: 'Off-canvas'}, + {url: 'parallax', name: 'Parallax'}, + {url: 'progress', name: 'Progress'}, + {url: 'sliders', name: 'Sliders'}, + {url: 'timelines', name: 'Timelines'} + ) + + a.off-canvas-overlay(href='#close') + .off-canvas-content + #content.docs-content + block docs-content \ No newline at end of file diff --git a/docs/src/_layout/_footer.pug b/docs/src/_layout/_footer.pug new file mode 100644 index 0000000..82a5b2e --- /dev/null +++ b/docs/src/_layout/_footer.pug @@ -0,0 +1,19 @@ +#copyright.docs-footer.container.grid-lg + p + a(href='getting-started.html' target='_blank') Documents + | · + a(href='https://github.com/picturepan2/spectre' target='_blank') GitHub + | · + a(href='https://twitter.com/spectrecss' target='_blank') Twitter + | · + a(href='https://www.paypal.me/picturepan2' target='_blank') PayPal Donate + | · Version + span.version + p + | Designed and built with + span.text-error ♥ + | by + a(href='https://twitter.com/picturepan2' target='_blank') Yan Zhu + | . Licensed under the + a(href='https://github.com/picturepan2/spectre/blob/master/LICENSE' target='_blank') MIT License + | . \ No newline at end of file diff --git a/docs/src/_layout/_layout.pug b/docs/src/_layout/_layout.pug new file mode 100644 index 0000000..53dca0e --- /dev/null +++ b/docs/src/_layout/_layout.pug @@ -0,0 +1,57 @@ +block global + - var domain = 'https://picturepan2.github.io/spectre/' + - var url = domain + +block variables + - var slug = '' + - var parent = '' + - var title = 'Spectre.css - A Lightweight, Responsive and Modern 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.' + +if slug == parent + if slug == 'index' + - var url = domain + else + - var url = domain + slug + '.html' +else + - var url = domain + parent + '/' + slug + '.html' + +doctype html +html(lang='en') + head + title= title + meta(charset='utf-8') + meta(name='robots' content='index, follow') + meta(name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no') + meta(http-equiv='x-ua-compatible' content='ie=edge') + meta(name='description' content= description) + meta(name='author' content='Yan Zhu') + if slug != parent + link(rel='shortcut icon' href='../img/favicons/favicon.ico') + link(rel='icon' href='../img/favicons/favicon.png') + link(rel='stylesheet' href='../dist/spectre.min.css') + link(rel='stylesheet' href='../dist/spectre-icons.min.css') + link(rel='stylesheet' href='../dist/spectre-exp.min.css') + link(rel='stylesheet' href='../dist/docs.min.css') + else + link(rel='shortcut icon' href='img/favicons/favicon.ico') + link(rel='icon' href='img/favicons/favicon.png') + link(rel='stylesheet' href='dist/spectre.min.css') + link(rel='stylesheet' href='dist/spectre-icons.min.css') + link(rel='stylesheet' href='dist/spectre-exp.min.css') + link(rel='stylesheet' href='dist/docs.min.css') + link(rel='canonical' href= url) + + body + block content + + script. + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); + + ga('create', 'UA-2702768-8', 'auto'); + ga('send', 'pageview'); + + \ No newline at end of file diff --git a/docs/src/_layout/_mixins.pug b/docs/src/_layout/_mixins.pug new file mode 100644 index 0000000..4d75f85 --- /dev/null +++ b/docs/src/_layout/_mixins.pug @@ -0,0 +1,25 @@ +mixin docs-accordion(id, name, ...pages) + .accordion + input(id='accordion-' + id type='checkbox' name='docs-accordion-checkbox' hidden='' checked=(parent === id ? true : false)) + label.accordion-header.c-hand(for='accordion-' + id)= name + .accordion-body + ul.menu.menu-nav + each page in pages + li.menu-item + if slug != parent + a(href='../' + id + '/' + page.url + '.html')= page.name + else + a(href=id + '/' + page.url + '.html')= page.name + +mixin docs-heading(id, name) + .container(id=id) + h3.s-title + | #{name} + a.anchor(href='#'+id aria-hidden='true') # + if block + block + +mixin docs-subheading(id, name) + h4.s-subtitle(id=id) + | #{name} + a.anchor(href='#'+id aria-hidden='true') # \ No newline at end of file diff --git a/docs/src/_mixins.pug b/docs/src/_mixins.pug deleted file mode 100644 index e9f125e..0000000 --- a/docs/src/_mixins.pug +++ /dev/null @@ -1,22 +0,0 @@ -mixin docs-accordion(id, name, ...pages) - .accordion - input(id='accordion-' + id type='checkbox' name='docs-accordion-checkbox' hidden='' checked=(slug === id ? true : false)) - label.accordion-header.c-hand(for='accordion-' + id)= name - .accordion-body - ul.menu.menu-nav - each page in pages - li.menu-item - a(href=id + '.html' + page.url)= page.name - -mixin docs-heading(id, name) - .container(id=id) - h3.s-title - | #{name} - a.anchor(href='#'+id aria-hidden='true') # - if block - block - -mixin docs-subheading(id, name) - h4.s-subtitle(id=id) - | #{name} - a.anchor(href='#'+id aria-hidden='true') # \ No newline at end of file diff --git a/docs/src/components.pug b/docs/src/components.pug index a9150d8..539bbc2 100644 --- a/docs/src/components.pug +++ b/docs/src/components.pug @@ -1,89 +1,11 @@ -extends _docs-layout.pug +extends _layout/_docs-layout.pug block variables - var slug = 'components' + - var parent = 'components' - var title = '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 - //- Accordions - +docs-heading('accordions', 'Accordions') - include contents/_ad-g.pug - 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/_ad-c.pug - 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/_ad-g.pug - 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/_ad-g.pug - 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 - - include _footer.pug \ No newline at end of file + include _layout/_footer.pug \ No newline at end of file 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 diff --git a/docs/src/contents/_ad-c.pug b/docs/src/contents/_ad-c.pug deleted file mode 100644 index 79b3e2c..0000000 --- a/docs/src/contents/_ad-c.pug +++ /dev/null @@ -1,3 +0,0 @@ -block ad-carbons - .docs-ad.docs-ad-sidebar.text-center - script#_carbonads_js(async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio") \ No newline at end of file diff --git a/docs/src/contents/_ad-g.pug b/docs/src/contents/_ad-g.pug deleted file mode 100644 index c227ea8..0000000 --- a/docs/src/contents/_ad-g.pug +++ /dev/null @@ -1,13 +0,0 @@ -block ad-adsense - .docs-ad - .hide-md.text-center - script(async='', src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js') - // GitHub-lg - ins.adsbygoogle.mx-auto(style='display:inline-block;width:728px;height:90px', data-ad-client='ca-pub-2225124559530218', data-ad-slot='9894180784') - script. - (adsbygoogle = window.adsbygoogle || []).push({}); - .show-md.text-center - // GitHub-sm - ins.adsbygoogle(style='display:inline-block;width:300px;height:250px', data-ad-client='ca-pub-2225124559530218', data-ad-slot='9278881734') - script. - (adsbygoogle = window.adsbygoogle || []).push({}); \ No newline at end of file diff --git a/docs/src/contents/accordions.pug b/docs/src/contents/accordions.pug deleted file mode 100644 index 964fab7..0000000 --- a/docs/src/contents/accordions.pug +++ /dev/null @@ -1,113 +0,0 @@ -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 - -
- -
-
\ No newline at end of file diff --git a/docs/src/contents/autocomplete.pug b/docs/src/contents/autocomplete.pug deleted file mode 100644 index ca5eb17..0000000 --- a/docs/src/contents/autocomplete.pug +++ /dev/null @@ -1,119 +0,0 @@ -p - | Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. - -.docs-demo.columns - .column.col-9.col-xs-12 - .form-group - .form-autocomplete - .form-autocomplete-input.form-input - span.chip - | Bruce Banner - .chip - img.avatar.avatar-sm(src="img/avatar-1.png" alt="Avatar") - | Thor Odinson - .chip - img.avatar.avatar-sm(src="img/avatar-4.png" alt="Avatar") - | Steve Rogers - .chip - figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;") - | Tony Stark - span.chip.active - | Natasha Romanoff - input.form-input(type="text" placeholder="") - .column.col-9.col-xs-12 - .form-group - .form-autocomplete - .form-autocomplete-input.form-input.is-focused - span.chip - | Bruce Banner - a.btn.btn-clear(href="#" aria-label="Close" role="button") - span.chip - img.avatar.avatar-sm(src="img/avatar-1.png" alt="Thor Odinson") - | Thor Odinson - a.btn.btn-clear(href="#" aria-label="Close" role="button") - .has-icon-left - input.form-input(type="text" placeholder="" value="S") - i.form-icon.loading - ul.menu - li.menu-item - a(href="#autocomplete") - .tile.tile-centered - .tile-icon - img.avatar.avatar-sm(src="img/avatar-4.png" alt="Steve Rogers") - .tile-content - mark S - | teve Roger - mark s - li.menu-item - a(href="#autocomplete") - .tile.tile-centered - .tile-icon - figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;") - .tile-content - | Tony - mark S - | tark - -p - | Add a container element with the #[code form-autocomplete] class. - | There are 2 parts of it, one is #[code form-autocomplete-input], another is #[code menu] component. - | You may add the #[code is-focused] class to #[code form-autocomplete-input] to make it appear as focus state. -p - | Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. - | The autocomplete HTML structure is exampled below. - -.docs-demo.columns - .column.col-9.col-xs-12 - .form-group - .form-autocomplete.autocomplete-oneline - .form-autocomplete-input.form-input - span.chip - | Bruce Banner - .chip - img.avatar.avatar-sm(src="img/avatar-1.png" alt="Avatar") - | Thor Odinson - .chip - img.avatar.avatar-sm(src="img/avatar-4.png" alt="Avatar") - | Steve Rogers - .chip - figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;") - | Tony Stark - span.chip.active - | Natasha Romanoff - input.form-input(type="text" placeholder="") - -pre.code(data-lang='HTML') - code - :highlight(lang="html") -
- -
- - -
- Thor Odinson - Thor Odinson - -
- - - -
- - - -
\ No newline at end of file diff --git a/docs/src/contents/avatars.pug b/docs/src/contents/avatars.pug deleted file mode 100644 index f4e4d22..0000000 --- a/docs/src/contents/avatars.pug +++ /dev/null @@ -1,98 +0,0 @@ -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") -
- ... - -
\ No newline at end of file diff --git a/docs/src/contents/badges.pug b/docs/src/contents/badges.pug deleted file mode 100644 index 40b42ea..0000000 --- a/docs/src/contents/badges.pug +++ /dev/null @@ -1,59 +0,0 @@ -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 -
\ No newline at end of file diff --git a/docs/src/contents/bars.pug b/docs/src/contents/bars.pug deleted file mode 100644 index 4eee25e..0000000 --- a/docs/src/contents/bars.pug +++ /dev/null @@ -1,82 +0,0 @@ -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") - -
-
- -
-
- - -
-
- -
-
- -
-
\ No newline at end of file diff --git a/docs/src/contents/breadcrumbs.pug b/docs/src/contents/breadcrumbs.pug deleted file mode 100644 index 9d61c69..0000000 --- a/docs/src/contents/breadcrumbs.pug +++ /dev/null @@ -1,45 +0,0 @@ -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") - \ No newline at end of file diff --git a/docs/src/contents/browsers.pug b/docs/src/contents/browsers.pug deleted file mode 100644 index dfa95cd..0000000 --- a/docs/src/contents/browsers.pug +++ /dev/null @@ -1,25 +0,0 @@ -p - | Spectre uses - a(href='https://github.com/postcss/autoprefixer', target='_blank') Autoprefixer - | to make most styles compatible with earlier browsers and - a(href='https://necolas.github.io/normalize.css/', target='_blank') Normalize.css - | for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended: -ul - li - | Chrome - small.label.label-success LAST 4 - li - | Microsoft Edge - small.label.label-success LAST 4 - li - | Firefox - small.label.label-success.text-uppercase Extended Support Release - li - | Safari - small.label.label-success LAST 4 - li - | Opera - small.label.label-success LAST 4 - li Internet Explorer 10+ -p - | Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer. \ No newline at end of file diff --git a/docs/src/contents/buttons.pug b/docs/src/contents/buttons.pug deleted file mode 100644 index 4cad7a3..0000000 --- a/docs/src/contents/buttons.pug +++ /dev/null @@ -1,178 +0,0 @@ -p Buttons include simple button styles for actions in different types and sizes. - -.docs-demo.columns - .column.col-12 - button.btn default button - button.btn.btn-primary primary button - button.btn.btn-link link button - -p - | Add the #[code btn] class to #{''}, #{''} or #{' - - - -+docs-subheading('buttons-colors', 'Button colors') - -.docs-demo.columns - .column.col-12 - button.btn.btn-success success button - button.btn.btn-error error button - -p - | Add the #[code btn-success] or #[code btn-error] class for success (green) or error (red) button color. - | If you need more button colors, please use - a(href="getting-started.html#variables-buttons") button mixins - | to create your own button color variants. - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - - - -+docs-subheading('buttons-sizes', 'Button sizes') - -.docs-demo.columns - .column.col-12 - button.btn.btn-primary.btn-lg - | large - i.icon.icon-arrow-down - button.btn.btn-primary.btn-lg large button - .column.col-12 - button.btn.btn-primary - | normal - i.icon.icon-arrow-down - button.btn.btn-primary normal button - .column.col-12 - button.btn.btn-primary.btn-sm - | small - i.icon.icon-arrow-down - button.btn.btn-primary.btn-sm small button - - -p - | Add the #[code btn-sm] or #[code btn-lg] class for small or large button size. - | Also, you can add the #[code btn-block] class for a full-width button. - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - - - - - - - - - -p - | Please note that you could use the #[code btn-action] class for a square button, or add another #[code s-circle] class for a round button, which is often used as a Float Action Button (FAB). - -.docs-demo.columns - .column.col-xs-12 - button.btn.btn-action.btn-primary.btn-lg - i.icon.icon-menu - button.btn.btn-action.btn-primary - i.icon.icon-menu - button.btn.btn-action.btn-primary.btn-sm - i.icon.icon-menu - .column.col-xs-12 - button.btn.btn-action.btn-primary.btn-lg.s-circle - i.icon.icon-arrow-up - button.btn.btn-action.btn-primary.s-circle - i.icon.icon-arrow-up - button.btn.btn-action.btn-primary.btn-sm.s-circle - i.icon.icon-arrow-up - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - - - -+docs-subheading('buttons-states', 'Button states') - -p - | Add the #[code active] class for active button state style. - -.docs-demo.columns - .column.col-12 - button.btn.active default active - button.btn.btn-primary.active primary active - button.btn.btn-link.active link active - -p - | Add the #[code disabled] class or the #[code disabled] attribute for disabled button state style. - -.docs-demo.columns - .column.col-12 - button.btn.disabled(tabindex="-1") default disabled - button.btn.btn-primary(disabled="" tabindex="-1") primary disabled - button.btn.btn-link(disabled="" tabindex="-1") link disabled - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - - - - -p - | A button with the #[code loading] class can show loading indicator. - -.docs-demo.columns - .column.col-12 - button.btn.loading default button - button.btn.btn-primary.loading primary button - button.btn.btn-link.loading link button - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - - - - -+docs-subheading('buttons-groups', 'Button groups') - -.docs-demo.columns - .column.col-6.col-md-12 - .btn-group - button.btn first button - button.btn second button - button.btn third button - .column.col-6.col-md-12 - .btn-group.btn-group-block - button.btn.btn-primary first button - button.btn.btn-primary second button - button.btn.btn-primary third button - .column.col-6.col-md-12 - .btn-group - button.btn.btn-sm.active first button - button.btn.btn-sm second button - button.btn.btn-sm third button - .column.col-6.col-md-12 - .btn-group.btn-group-block - button.btn.btn-primary.btn-sm.active first button - button.btn.btn-primary.btn-sm second button - button.btn.btn-primary.btn-sm third button - -p - | If you want to use buttons as a group, add the #[code btn-group] class to the container. - | You can add the #[code btn-group-block] class for a full-width button group. - -pre.code(data-lang='HTML') - code - :highlight(lang="html") -
- - - -
\ No newline at end of file diff --git a/docs/src/contents/calendars.pug b/docs/src/contents/calendars.pug deleted file mode 100644 index d7bf30c..0000000 --- a/docs/src/contents/calendars.pug +++ /dev/null @@ -1,298 +0,0 @@ -p - | Calendars are designed for date or date range picker and events display. It is made with flex layout. - -.docs-demo.columns - .column.col-4.col-md-12 - .calendar - .calendar-nav.navbar - button.btn.btn-action.btn-link.btn-lg - i.icon.icon-arrow-left - .navbar-primary March 2017 - button.btn.btn-action.btn-link.btn-lg - i.icon.icon-arrow-right - .calendar-container - .calendar-header - .calendar-date Sun - .calendar-date Mon - .calendar-date Tue - .calendar-date Wed - .calendar-date Thu - .calendar-date Fri - .calendar-date Sat - .calendar-body - .calendar-date.prev-month - button.date-item 26 - .calendar-date.prev-month - button.date-item 27 - .calendar-date.prev-month - button.date-item 28 - .calendar-date - button.date-item 1 - .calendar-date - button.date-item 2 - .calendar-date - button.date-item 3 - .calendar-date.tooltip(data-tooltip="Today") - button.date-item.date-today 4 - .calendar-date.tooltip(data-tooltip="Not available") - button.date-item(disabled="") 5 - .calendar-date - button.date-item 6 - .calendar-date - button.date-item 7 - .calendar-date.tooltip(data-tooltip="You have appointments") - button.date-item.badge 8 - .calendar-date - button.date-item 9 - .calendar-date - button.date-item 10 - .calendar-date - button.date-item 11 - .calendar-date - button.date-item 12 - .calendar-date - button.date-item 13 - .calendar-date - button.date-item 14 - .calendar-date - button.date-item 15 - .calendar-date.calendar-range.range-start - button.date-item 16 - .calendar-date.calendar-range - button.date-item 17 - .calendar-date.calendar-range - button.date-item 18 - .calendar-date.calendar-range - button.date-item 19 - .calendar-date.calendar-range.range-end - button.date-item 20 - .calendar-date - button.date-item 21 - .calendar-date - button.date-item 22 - .calendar-date - button.date-item 23 - .calendar-date - button.date-item 24 - .calendar-date - button.date-item 25 - .calendar-date - button.date-item 26 - .calendar-date - button.date-item 27 - .calendar-date - button.date-item 28 - .calendar-date - button.date-item 29 - .calendar-date - button.date-item 30 - .calendar-date - button.date-item 31 - .calendar-date.next-month - button.date-item 1 - -pre.code(data-lang='HTML') - code - :highlight(lang="html") -
- -
- -
March 2017
- -
- -
-
-
Sun
-
Mon
-
Tue
-
Wed
-
Thu
-
Fri
-
Sat
-
- -
- -
- -
- ... -
- -
- - -
- -
-
- -
-
- -
- -
- -
- -
- -
- -
- -
- - -
- -
-
- -
-
- -
- ... -
- -
- - -
- -
-
-
-
- -+docs-subheading('calendars-sizes', 'Calendars sizes') - -.docs-demo.columns - .column.col-12 - .calendar.calendar-lg - .calendar-nav.navbar - button.btn.btn-action.btn-link.btn-lg - i.icon.icon-arrow-left - .navbar-primary March 2017 - button.btn.btn-action.btn-link.btn-lg - i.icon.icon-arrow-right - .calendar-container - .calendar-header - .calendar-date Sun - .calendar-date Mon - .calendar-date Tue - .calendar-date Wed - .calendar-date Thu - .calendar-date Fri - .calendar-date Sat - .calendar-body - .calendar-date.prev-month - button.date-item 26 - .calendar-date.prev-month - button.date-item 27 - .calendar-events - a.calendar-event.bg-error.text-light(href="#calendars") Zhonghe Festival - .calendar-date.prev-month - button.date-item 28 - .calendar-date - button.date-item 1 - .calendar-date - button.date-item 2 - .calendar-date - button.date-item 3 - .calendar-date.tooltip(data-tooltip="Today") - button.date-item.date-today 4 - .calendar-date - button.date-item(disabled="") 5 - .calendar-date - button.date-item 6 - .calendar-date - button.date-item 7 - .calendar-date.tooltip(data-tooltip="You have appointments") - button.date-item.badge 8 - .calendar-events - a.calendar-event.bg-primary.text-light(href="#calendars") Product launch event - a.calendar-event.bg-error.text-light(href="#calendars") International Women's Day - .calendar-date - button.date-item 9 - .calendar-date - button.date-item 10 - .calendar-date - button.date-item 11 - .calendar-date - button.date-item 12 - .calendar-events - a.calendar-event.bg-error.text-light(href="#calendars") Arbor Day - .calendar-date - button.date-item 13 - .calendar-date - button.date-item 14 - .calendar-date - button.date-item 15 - .calendar-date.calendar-range.range-start - button.date-item 16 - .calendar-date.calendar-range - button.date-item 17 - .calendar-date.calendar-range - button.date-item 18 - .calendar-date.calendar-range - button.date-item 19 - .calendar-date.calendar-range.range-end - button.date-item 20 - .calendar-events - a.calendar-event.bg-success.text-light(href="#calendars") Spring Equinox - .calendar-date - button.date-item 21 - .calendar-date - button.date-item 22 - .calendar-date - button.date-item 23 - .calendar-date - button.date-item 24 - .calendar-date - button.date-item 25 - .calendar-date - button.date-item 26 - .calendar-date - button.date-item 27 - .calendar-date - button.date-item 28 - .calendar-date - button.date-item 29 - .calendar-date - button.date-item 30 - .calendar-date - button.date-item 31 - .calendar-date.next-month.disabled - button.date-item 1 - .calendar-events - a.calendar-event.bg-error.text-light(href="#calendars") April Fools' Day - -pre.code(data-lang='HTML') - code - :highlight(lang="html") -
- - -
- - -
- -
- -
- Spring Equinox -
-
-
-
-
\ No newline at end of file diff --git a/docs/src/contents/cards.pug b/docs/src/contents/cards.pug deleted file mode 100644 index 979b3bc..0000000 --- a/docs/src/contents/cards.pug +++ /dev/null @@ -1,94 +0,0 @@ -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") -
-
- -
-
-
...
-
...
-
-
- ... -
-
- -
-
\ No newline at end of file diff --git a/docs/src/contents/carousels.pug b/docs/src/contents/carousels.pug deleted file mode 100644 index 5d09532..0000000 --- a/docs/src/contents/carousels.pug +++ /dev/null @@ -1,78 +0,0 @@ -p Carousels are slideshows for cycling images. It is built in pure CSS. - -.docs-demo.columns - .column.col-12 - .carousel - input#slide-1.carousel-locator(type="radio" name="carousel-radio" hidden="" checked="") - input#slide-2.carousel-locator(type="radio" name="carousel-radio" hidden="") - input#slide-3.carousel-locator(type="radio" name="carousel-radio" hidden="") - input#slide-4.carousel-locator(type="radio" name="carousel-radio" hidden="") - .carousel-container - figure.carousel-item - label.item-prev.btn.btn-action.btn-lg(for="slide-4") - i.icon.icon-arrow-left - label.item-next.btn.btn-action.btn-lg(for="slide-2") - i.icon.icon-arrow-right - img.img-responsive.rounded(src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper") - figure.carousel-item - label.item-prev.btn.btn-action.btn-lg(for="slide-1") - i.icon.icon-arrow-left - label.item-next.btn.btn-action.btn-lg(for="slide-3") - i.icon.icon-arrow-right - img.img-responsive.rounded(src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper") - figure.carousel-item - label.item-prev.btn.btn-action.btn-lg(for="slide-2") - i.icon.icon-arrow-left - label.item-next.btn.btn-action.btn-lg(for="slide-4") - i.icon.icon-arrow-right - img.img-responsive.rounded(src="img/osx-el-capitan.jpg" alt="macOS Yosemite Wallpaper") - figure.carousel-item - label.item-prev.btn.btn-action.btn-lg(for="slide-3") - i.icon.icon-arrow-left - label.item-next.btn.btn-action.btn-lg(for="slide-1") - i.icon.icon-arrow-right - img.img-responsive.rounded(src="img/osx-el-capitan-2.jpg" alt="macOS Yosemite Wallpaper") - .carousel-nav - label.nav-item.text-hide.c-hand(for="slide-1") 1 - label.nav-item.text-hide.c-hand(for="slide-2") 2 - label.nav-item.text-hide.c-hand(for="slide-3") 3 - label.nav-item.text-hide.c-hand(for="slide-4") 4 - -pre.code(data-lang='HTML') - code - :highlight(lang="html") -
- - - - - - - -
- -
- - macOS Yosemite Wallpaper -
-
- - macOS Yosemite Wallpaper -
-
- - macOS Yosemite Wallpaper -
-
- - macOS Yosemite Wallpaper -
-
- -
- - - - -
-
\ No newline at end of file diff --git a/docs/src/contents/chips.pug b/docs/src/contents/chips.pug deleted file mode 100644 index 7ac2a25..0000000 --- a/docs/src/contents/chips.pug +++ /dev/null @@ -1,44 +0,0 @@ -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 - -
\ No newline at end of file diff --git a/docs/src/contents/code.pug b/docs/src/contents/code.pug deleted file mode 100644 index b14cc89..0000000 --- a/docs/src/contents/code.pug +++ /dev/null @@ -1,22 +0,0 @@ -p Code is used for styling inline and multiline code snippets. -p - | For inline code, you can use the #{''} element. - | For multiline code snippet blocks, you can use #{'
'} with the #[code code] class as a container, and add #{''} inside it.
-  | The #[code data-lang] attribute is rendered as the language name in the top right.
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
-      
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
<!-- code snippets -->
-      <button class="btn">
-        Submit
-      </button>
-      

\ No newline at end of file
diff --git a/docs/src/contents/colors.pug b/docs/src/contents/colors.pug
deleted file mode 100644
index adede92..0000000
--- a/docs/src/contents/colors.pug
+++ /dev/null
@@ -1,95 +0,0 @@
-p Color utilities are used for changing colors for text, link and background.
-
-+docs-subheading('colors-text', 'Text colors')
-
-.docs-demo.columns
-  .column.col-12
-    p
-      span.text-primary primary color
-    p
-      span.text-secondary secondary color
-    p
-      span.text-dark dark 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")
-      primary color
-      secondary color
-      dark color
-      gray color
-      light color
-      success color
-      warning color
-      error color
-
-.docs-demo.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-dark.p-1(href="#colors") dark 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")
-      primary color
-      secondary color
-      dark color
-      gray color
-      light color
-      success color
-      warning color
-      error color
-
-+docs-subheading('colors-background', 'Background colors')
-
-.docs-demo.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")
-      
primary bg

-      
secondary bg

-      
dark bg

-      
gray bg

-      
success bg

-      
warning bg

-      
error bg

\ No newline at end of file
diff --git a/docs/src/contents/comparison.pug b/docs/src/contents/comparison.pug
deleted file mode 100644
index 954981d..0000000
--- a/docs/src/contents/comparison.pug
+++ /dev/null
@@ -1,29 +0,0 @@
-p
-  | Comparison Sliders are sliders for comparing two images. It is built in pure CSS.
-
-.docs-demo.columns
-  .column.col-12
-    .comparison-slider
-      figure.comparison-before
-        img.rounded(src="img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper")
-        .comparison-label Before
-      figure.comparison-after
-        img.filter-grayscale.rounded(src="img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper")
-        .comparison-label After
-        textarea.comparison-resizer(readonly="")
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      

-        

-          
-          
Before

-        

-
-        

-          
-          
After

-          
-        

-      

\ No newline at end of file
diff --git a/docs/src/contents/cursors.pug b/docs/src/contents/cursors.pug
deleted file mode 100644
index ed290b8..0000000
--- a/docs/src/contents/cursors.pug
+++ /dev/null
@@ -1,31 +0,0 @@
-p Cursor utilities specify which mouse cursor to display when mouseover.
-
-.docs-demo.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")
-      
-      

-      
-      

-      
-      

-      
-      

-      
-      

-      
-      

\ No newline at end of file
diff --git a/docs/src/contents/custom.pug b/docs/src/contents/custom.pug
deleted file mode 100644
index 367fdac..0000000
--- a/docs/src/contents/custom.pug
+++ /dev/null
@@ -1,287 +0,0 @@
-p
-  | You can customize your version of Spectre.css by editing Sass files in 
-  code /src
-  |  directory or removing unneeded components from 
-  code .scss
-  |  source files.
-p
-  a.btn.btn-primary(href='https://github.com/picturepan2/spectre/', target='_blank') Sass Source Code
-p
-  | If you are looking for Less version of Spectre.css, please switch to 
-  code Less
-  |  branch.
-p
-  a.btn(href='https://github.com/picturepan2/spectre/tree/less', target='_blank') Less Branch
-
-+docs-subheading('compiling', 'Compiling CSS')
-
-p
-  | Spectre uses 
-  a(href='http://gulpjs.com/', target='_blank') Gulp
-  |  for compiling CSS. Firstly you need to 
-  a(href='https://www.npmjs.com/get-npm', target='_blank') install NPM
-  | , which is used to manage Gulp and other dependencies.
-p Then, you can build the CSS file from the command line:
-ol
-  li Navigate to the root directory of Spectre.
-  li
-    | Run 
-    code npm install
-    | . NPM will install all dev dependencies as listed in package.json.
-  li
-    | When completed, run 
-    code gulp build
-    |  task to compile Sass to CSS and minify files.
-  li
-    | You can find compiled CSS files in 
-    code /dist
-    |  directory.
-p All available Gulp tasks:
-ul
-  li
-    code gulp build
-    |  - compile Sass to CSS and minify files (default)
-  li
-    code gulp docs
-    |  - compile Docs related files
-  li
-    code gulp watch
-    |  - watch file changes and re-compile CSS files
-
-+docs-subheading('importing', 'Importing Sass')
-p
-  | It is recommended to customize Spectre by importing Sass source files to your projects. In this way, you can keep Spectre up to date without conflicts, since Spectre code and your custom code are separate.
-ul
-  li
-    | First, create your own project and install Spectre via 
-    a(href='#installation') NPM or other package managers
-    | .
-  li
-    | Then create your 
-    code project-name.scss
-    |  file in the root folder. You can use 
-    code project-name.scss
-    |  to define your variables.
-  li Compile the Sass file to CSS to get the custom version of Spectre.
-
-//- importing
-pre.code(data-lang='Sass')
-  code
-    :highlight(lang="scss")
-      // Example of project-name.scss
-      // Define variables to override default ones
-      $primary-color: #2e5bec;
-      $dark-color: #3e396b;
-
-      // Import full Spectre source code
-      @import "node_modules/spectre.css/src/spectre";
-
-p
-  | Alternatively, you can create custom 
-  code _variables.scss
-  |  and import it to 
-  code project-name.scss
-  | .
-
-//- custom variables
-pre.code(data-lang='Sass')
-  code
-    :highlight(lang="scss")
-      // Example of project-name.scss
-      @import "variables";
-
-      // Import only the needed components
-      @import "node_modules/spectre.css/src/buttons";
-      @import "node_modules/spectre.css/src/forms";
-
-+docs-subheading('folders', 'Folder structure')
-
-//- folder structure
-pre.code
-  code
-    :highlight
-      spectre/
-      ├── dist/                           // Build folder
-      │   ├── spectre-exp.css
-      │   ├── spectre-exp.min.css
-      │   ├── spectre-icons.css
-      │   ├── spectre-icons.min.css
-      │   ├── spectre.css
-      │   └── spectre.min.css
-      │
-      ├── docs/
-      │   ├── dist/                       // Pre-built CSS folder
-      │   │   ├── spectre-exp.css
-      │   │   ├── spectre-exp.min.css
-      │   │   ├── spectre-icons.css
-      │   │   ├── spectre-icons.min.css
-      │   │   ├── spectre.css
-      │   │   └── spectre.min.css
-      |   ├── css/                        // Docs CSS files
-      │   │   └── docs.css
-      |   ├── src/
-      │   │   ├── scss                    // Docs Sass files
-      │   │   │   └── docs.scss
-      │   │   ├── index.pug               // Docs Pug files
-      │   │   └── ...
-      │   ├── examples/                   // Example tempalte
-      │   │   └── starter.html
-      │   ├── ../
-      │   ├── index.html
-      │   └── ...
-      │
-      ├── src/                            // Source Sass files
-      │   ├── spectre.scss
-      │   ├── spectre-icons.scss
-      │   ├── spectre-exp.scss
-      │   ├── _mixins.scss
-      │   ├── _variables.scss
-      │   └── ...
-      │
-      ├── gulpfile.js
-      ├── package.json
-      └── ...
-
-+docs-subheading('variables', 'Variables')
-
-p
-  | Spectre.css is designed with consistent design language. You can use your own variables to create your new or match existing design. All variables in 
-  code _variables.scss
-  |  include 
-  code !default
-  |  flag. You can redefine the variables to override the values.
-
-+docs-subheading('variables-colors', 'Variables - Colors')
-
-.columns
-  .column.col-3.col-md-6
-    .docs-color(style='background:#5755d9;color:#fff;')
-      .color-title #5755d9
-      .color-subtitle Primary
-  .column.col-3.col-md-6
-    .docs-color(style='background:#f1f1fc;color:#5755d9;')
-      .color-title #f1f1fc
-      .color-subtitle Secondary
-.columns
-  .column.col-3.col-md-6
-    .docs-color(style='background:#32b643;color:#fff;')
-      .color-title #32b643
-      .color-subtitle Success
-  .column.col-3.col-md-6
-    .docs-color(style='background:#ffb700;color:#fff;')
-      .color-title #ffb700
-      .color-subtitle Warning
-  .column.col-3.col-md-6
-    .docs-color(style='background:#e85600;color:#fff;')
-      .color-title #e85600
-      .color-subtitle Error
-.columns
-  .column.col-3.col-md-6
-    .docs-color(style='background:#303742;color:#fff;')
-      .color-title #303742
-      .color-subtitle Dark
-  .column.col-3.col-md-6
-    .docs-color(style='background:#66758c;color:#fff;')
-      .color-title #66758c
-      .color-subtitle Gray dark
-  .column.col-3.col-md-6
-    .docs-color(style='background:#bcc3ce;color:#303742;')
-      .color-title #bcc3ce
-      .color-subtitle Gray
-  .column.col-3.col-md-6
-    .docs-color(style='background:#f7f8f9;color:#303742;')
-      .color-title #f7f8f9
-      .color-subtitle Gray light
-  .column.col-3.col-md-6
-    .docs-color(style='background:#bcc3ce;color:#303742;')
-      .color-title #bcc3ce
-      .color-subtitle Border
-  .column.col-3.col-md-6
-    .docs-color(style='background:#f7f8f9;color:#303742;')
-      .color-title #f7f8f9
-      .color-subtitle Background
-  .column.col-3.col-md-6
-    .docs-color(style='background:#fff;color:#303742;')
-      .color-title #fff
-      .color-subtitle Light
-
-+docs-subheading('variables-buttons', 'Variables - Button mixins')
-
-p
-  | There are 2 button variant mixins in 
-  code _mixins.scss
-  |  to generate different color variants.
-ul
-  li
-    | @mixin button-variant(
-    code $color
-    | : $primary-color);
-  li
-    | @mixin button-outline-variant(
-    code $color
-    | : $primary-color);
-
-//- button mixins
-pre.code(data-lang='Sass')
-  code
-    :highlight(lang="scss")
-      
-      .btn-success {
-        @include button-variant($success-color);
-      }
-
-      
-      .btn-outline-success {
-        @include button-outline-variant($success-color);
-      }
-
-+docs-subheading('variables-sizes', 'Variables - Sizes')
-
-p
-  | The default REM (root em) size in Spectre.css is 
-  code 20px
-  | .
-p
-  | Please note in the Chinese/Japanese/Korean version, Chrome uses 12px as default minimum font size. That is why Spectre sets rem default html font size to 
-  code 20px
-  | , which is relatively easy to calculate.
-p
-  | Spectre uses 
-  code 4px
-  |  as the unit size. Sizes of components are based on the unit size.
-
-+docs-subheading('variables-custom-prefix', 'Variables - Custom prefix')
-p
-  | There is also a way to add custom prefix to all CSS classes. You can use 
-  a(href='https://www.npmjs.com/package/gulp-css-prefix', target='_blank') gulp-css-prefix
-  |  plugin and add a new Gulp task to enable it.
-
-//- custom prefix
-pre.code(data-lang='Bash')
-  code
-    :highlight(lang="Bash")
-      npm install gulp-css-prefix
-
-p
-  | To add 
-  code spectre-
-  |  to all classes, you can add the Gulp task to 
-  code gulpfile.js
-  |  file.
-
-//- custom prefix
-pre.code
-  code
-    :highlight(lang="JavaScript")
-      var cssPrefix = require('gulp-css-prefix');
-  
-      gulp.task('prefix', function() {
-        gulp.src('./dist/*.css')
-            .pipe(cssPrefix('spectre-'))
-            .pipe(gulp.dest('./dist'))
-      });
-
-p
-  | After you compile your version of Spectre in the /dist, run 
-  code gulp prefix
-  |  in the directory of Spectre.
\ No newline at end of file
diff --git a/docs/src/contents/display.pug b/docs/src/contents/display.pug
deleted file mode 100644
index bb3a0a3..0000000
--- a/docs/src/contents/display.pug
+++ /dev/null
@@ -1,26 +0,0 @@
-p Display utilities are used for display and hidden things.
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
-      

-      
-      

-      
-      

-      
-      

-      
-      

-      
-      

-      

-      
-      

-      
-      

-      
-      

-      
-      

\ No newline at end of file
diff --git a/docs/src/contents/divider.pug b/docs/src/contents/divider.pug
deleted file mode 100644
index 92faa70..0000000
--- a/docs/src/contents/divider.pug
+++ /dev/null
@@ -1,56 +0,0 @@
-p A Divider is used for separating elements.
-
-.docs-demo.columns
-  .column
-    .divider
-
-.docs-demo.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.
-
-.docs-demo.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")
-      
-      

-      
-      

-
-      
-      

-        

-          
-        

-        

-        

-          
-        

-      

\ No newline at end of file
diff --git a/docs/src/contents/empty.pug b/docs/src/contents/empty.pug
deleted file mode 100644
index 880090d..0000000
--- a/docs/src/contents/empty.pug
+++ /dev/null
@@ -1,50 +0,0 @@
-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.

-        

-          
-        

-      

\ No newline at end of file
diff --git a/docs/src/contents/experimentals.pug b/docs/src/contents/experimentals.pug
deleted file mode 100644
index cec5b41..0000000
--- a/docs/src/contents/experimentals.pug
+++ /dev/null
@@ -1,4 +0,0 @@
-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
deleted file mode 100644
index e2e70b3..0000000
--- a/docs/src/contents/filters.pug
+++ /dev/null
@@ -1,107 +0,0 @@
-p Filters are CSS only content filters.
-
-.docs-demo.columns
-  .column.col-12
-    .filter
-      input#tag-0.filter-tag(type="radio" name="filter-radio" hidden="" checked="")
-      input#tag-1.filter-tag(type="radio" name="filter-radio" hidden="")
-      input#tag-2.filter-tag(type="radio" name="filter-radio" hidden="")
-      input#tag-3.filter-tag(type="radio" name="filter-radio" hidden="")
-      input#tag-4.filter-tag(type="radio" name="filter-radio" hidden="")
-      .filter-nav
-        label.chip(for="tag-0") All
-        label.chip(for="tag-1") Action
-        label.chip(for="tag-2") Roleplaying
-        label.chip(for="tag-3") Shooter
-        label.chip(for="tag-4") Sports
-      .filter-body.columns
-        .column.col-4.filter-item(data-tag="tag-2")
-          .card
-            .card-header
-              .card-title Fallout 4
-              .card-subtitle Roleplaying
-        .column.col-4.filter-item(data-tag="tag-3")
-          .card
-            .card-header
-              .card-title Halo 5
-              .card-subtitle Shooter
-        .column.col-4.filter-item(data-tag="tag-1")
-          .card
-            .card-header
-              .card-title Quantum Break
-              .card-subtitle Action
-        .column.col-4.filter-item(data-tag="tag-4")
-          .card
-            .card-header
-              .card-title Forza Horizon 3
-              .card-subtitle Sports
-        .column.col-4.filter-item(data-tag="tag-2")
-          .card
-            .card-header
-              .card-title Final Fantasy XV
-              .card-subtitle Roleplaying
-        .column.col-4.filter-item(data-tag="tag-4")
-          .card
-            .card-header
-              .card-title NBA 2K17
-              .card-subtitle Sports
-        .column.col-4.filter-item(data-tag="tag-3")
-          .card
-            .card-header
-              .card-title Battlefield 1
-              .card-subtitle Shooter
-        .column.col-4.filter-item(data-tag="tag-1")
-          .card
-            .card-header
-              .card-title GTA V
-              .card-subtitle Action
-        .column.col-4.filter-item(data-tag="tag-4")
-          .card
-            .card-header
-              .card-title FIFA 17
-              .card-subtitle Sports
-        .column.col-4.filter-item(data-tag="tag-3")
-          .card
-            .card-header
-              .card-title Overwatch
-              .card-subtitle Shooter
-        .column.col-4.filter-item(data-tag="tag-3")
-          .card
-            .card-header
-              .card-title Titanfall 2
-              .card-subtitle Shooter
-        .column.col-4.filter-item(data-tag="tag-3")
-          .card
-            .card-header
-              .card-title Gears of Wars 4
-              .card-subtitle Shooter
-
-p
-  | Filters use #[code tag-1] to #[code tag-8] to flag different tags.
-  | #[code tag-0] is reserved for clearing filter (or showing all). 
-  | You can overwrite #[code $filter-number] in #[code _filters.scss] to have more filters.
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      

-        
-        
-        
-
-        

-          
-          
-          
-        

-
-        

-          

-            
-          

-          

-            
-          

-          
-        

-      

\ No newline at end of file
diff --git a/docs/src/contents/forms.pug b/docs/src/contents/forms.pug
deleted file mode 100644
index e812aef..0000000
--- a/docs/src/contents/forms.pug
+++ /dev/null
@@ -1,697 +0,0 @@
-p
-  | Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
-
-.docs-demo.columns
-  .column.col-6.col-xs-12
-    .form-group
-      label.form-label(for="input-example-1") Name
-      input#input-example-1.form-input(type="text" placeholder="Name")
-    .form-group
-      label.form-label(for="input-example-2") Email
-      input#input-example-2.form-input(type="email" placeholder="Email")
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
-      

-        
-        
-      

-
-.docs-demo.columns
-  .column.col-6.col-xs-12
-    .form-group
-      label.form-label(for="input-example-3") Message
-      textarea#input-example-3.form-input(placeholder="Textarea" rows="3")
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
-      

-        
-        
-      

-
-.docs-demo.columns
-  .column.col-6.col-xs-12
-    .form-group
-      select.form-select
-        option Choose an option
-        option Slack
-        option Skype
-        option Hipchat
-    .form-group
-      select.form-select(multiple="")
-        option Choose an option
-        option Slack
-        option Skype
-        option Hipchat
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
-      

-        
-      

-
-.docs-demo.columns
-  .column.col-6.col-xs-12
-    form
-      .form-group
-        label.form-label Gender
-        label.form-radio
-          input(type="radio" name="gender" checked="")
-          i.form-icon
-          |  Male
-        label.form-radio
-          input(type="radio" name="gender")
-          i.form-icon
-          |  Female
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
-      

-        
-        
-        
-      

-
-.docs-demo.columns
-  .column.col-6.col-xs-12
-    .form-group
-      label.form-switch
-        input(type="checkbox")
-        i.form-icon
-        |  Send me emails with news and tips
-    .form-group
-      label.form-switch
-        input(type="checkbox" checked="")
-        i.form-icon
-        |  Send me emails with news and tips
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
-      

-        
-      

-
-.docs-demo.columns
-  .column.col-6.col-xs-12
-    .form-group
-      label.form-checkbox
-        input(type="checkbox")
-        i.form-icon
-        |  Remember me
-    .form-group
-      label.form-checkbox
-        input(type="checkbox" checked="")
-        i.form-icon
-        |  Remember me
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
-      

-        
-      

-
-.docs-demo.columns
-  .column
-    .form-group
-      label.form-checkbox
-        input#docs-demo-checkbox(type="checkbox")
-        i.form-icon
-        |  Select all
-
-script.
-  document.getElementById("docs-demo-checkbox").indeterminate = true;
-
-p
-  | You can change checkbox to indeterminate state by setting the #[code indeterminate] property of input checkboxes to #[code true].
-
-+docs-subheading('forms-inline', 'Inline forms')
-
-.docs-demo.columns
-  .column.col-6.col-xs-12
-    form
-      .form-group
-        label.form-radio.form-inline
-          input(type="radio" name="gender" checked="")
-          i.form-icon
-          |  Male
-        label.form-radio.form-inline
-          input(type="radio" name="gender")
-          i.form-icon
-          |  Female
-      .form-group
-        label.form-checkbox.form-inline
-          input(type="checkbox")
-          i.form-icon
-          |  Checkbox 1
-        label.form-checkbox.form-inline
-          input(type="checkbox" checked="")
-          i.form-icon
-          |  Checkbox 2
-
-p
-  | You can add the #[code form-inline] class to the form components to make them inline in one row.
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      

-        
-        
-      

-
-      

-        
-        
-      

-
-+docs-subheading('forms-horizontal', 'Horizontal forms')
-
-p
-  | If you want to have a horizontal form, add the #[code form-horizontal] class to the #{'
'} container.
-  | And add the #[code col-<1-12>] and #[code col-xs/sm/lg/xl-<1-12>] class to the child elements for responsive form row layout.
-
-.docs-demo.columns
-  .column.col-9.col-sm-12
-    form.form-horizontal(action="#forms")
-      .form-group
-        .col-3.col-sm-12
-          label.form-label(for="input-example-4") Name
-        .col-9.col-sm-12
-          input#input-example-4.form-input(type="text" placeholder="Name")
-      .form-group
-        .col-3.col-sm-12
-          label.form-label(for="input-example-5") Email
-        .col-9.col-sm-12
-          input#input-example-5.form-input(type="email" placeholder="Email")
-      .form-group
-        .col-3.col-sm-12
-          label.form-label Gender
-        .col-9.col-sm-12
-          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
-      .form-group
-        .col-3.col-sm-12
-          label.form-label Source
-        .col-9.col-sm-12
-          select.form-select(multiple="")
-            option Slack
-            option Skype
-            option Hipchat
-      .form-group
-        .col-9.col-sm-12.col-ml-auto
-          label.form-switch
-            input(type="checkbox")
-            i.form-icon
-            |  Send me emails with news and tips
-      .form-group
-        .col-3.col-sm-12
-          label.form-label(for="input-example-6") Message
-        .col-9.col-sm-12
-          textarea#input-example-6.form-input(placeholder="Textarea" rows="3")
-      .form-group
-        .col-9.col-sm-12.col-ml-auto
-          label.form-checkbox
-            input(type="checkbox")
-            i.form-icon
-            |  Remember me
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
-        

-          

-            
-          

-          

-            
-          

-        

-        
-      

-
-+docs-subheading('forms-sizes', 'Form sizes')
-
-p
-  | For smaller or larger input and select controls, you could add the #[code input-sm]/#[code input-lg], #[code select-sm]/#[code select-lg] and #[code label-sm]/#[code label-lg] classes to the elements.
-
-.docs-demo.columns
-  .column.col-4.col-xs-12
-    label.form-label.label-sm Label
-  .column.col-4.col-xs-12
-    input.form-input.input-sm(type="text" placeholder="Name")
-  .column.col-4.col-xs-12
-    select.form-select.select-sm
-      option Choose an option
-      option Slack
-      option Skype
-      option Hipchat
-  .column.col-4.col-xs-12
-    label.form-label.label-lg Label
-  .column.col-4.col-xs-12
-    input.form-input.input-lg(type="text" placeholder="Name")
-  .column.col-4.col-xs-12
-    select.form-select.select-lg
-      option Choose an option
-      option Slack
-      option Skype
-      option Hipchat
-
-p
-  | You can add the #[code input-sm]/#[code input-lg] classes to the input-checkbox, input-radio and input-switch to have different sizes.
-
-+docs-subheading('forms-icons', 'Form icons')
-
-p
-  | Spectre Form components has 
-  a(href="#icons") Spectre Icons
-  |  support.
-p
-  | Add a wrapper with the #[code has-icon-left]/#[code has-icon-right] class to #{''} element.
-  | And add the icon with #[code form-icon] class next to the #{''}.
-
-.docs-demo.columns
-  .column.col-4.col-xs-12
-    .has-icon-left
-      input.form-input.input-sm(type="text" placeholder="Name")
-      i.form-icon.icon.icon-arrow-right
-  .column.col-4.col-xs-12
-    .has-icon-left.tooltip(data-tooltip="Lorem ipsum dolor sit amet")
-      input.form-input(type="text" placeholder="Name")
-      i.form-icon.icon.icon-arrow-right
-  .column.col-4.col-xs-12
-    .has-icon-left
-      input.form-input.input-lg(type="text" placeholder="Name")
-      i.form-icon.icon.icon-arrow-right
-  .column.col-4.col-xs-12
-    .has-icon-right
-      input.form-input.input-sm(type="text" placeholder="Name")
-      i.form-icon.icon.icon-check
-  .column.col-4.col-xs-12
-    .has-icon-right
-      input.form-input(type="text" placeholder="Name")
-      i.form-icon.icon.icon-check
-  .column.col-4.col-xs-12
-    .has-icon-right
-      input.form-input.input-lg(type="text" placeholder="Name")
-      i.form-icon.icon.icon-check
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
-      

-        
-        
-      

-
-p
-  | You can use the #[code loading] class for loading or posting state.
-
-.docs-demo.columns
-  .column.col-4.col-xs-12
-    .has-icon-right
-      input.form-input.input-sm(type="text" placeholder="Name")
-      i.form-icon.loading
-  .column.col-4.col-xs-12
-    .has-icon-right
-      input.form-input(type="text" placeholder="Name")
-      i.form-icon.loading
-  .column.col-4.col-xs-12
-    .has-icon-right
-      input.form-input.input-lg(type="text" placeholder="Name")
-      i.form-icon.loading
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
-      

-        
-        
-      

-
-+docs-subheading('forms-input', 'Input types')
-
-.docs-demo.columns
-  .column.col-9.col-sm-12
-    form.form-horizontal(action="#forms")
-      .form-group
-        .col-3
-          label.form-label(for="input-example-8") Email
-        .col-9
-          input#input-example-8.form-input(type="email" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$")
-      .form-group
-        .col-3
-          label.form-label(for="input-example-9") URL
-        .col-9
-          input#input-example-9.form-input(type="url" placeholder="URL" value="https://github.com/picturepan2/spectre")
-      .form-group
-        .col-3
-          label.form-label(for="input-example-10") Search
-        .col-9
-          input#input-example-10.form-input(type="search" placeholder="Search")
-      .form-group
-        .col-3
-          label.form-label(for="input-example-11") Tel
-        .col-9
-          input#input-example-11.form-input(type="tel" placeholder="Tel" value="1-(888)-888-8888")
-      .form-group
-        .col-3
-          label.form-label(for="input-example-12") Password
-        .col-9
-          input#input-example-12.form-input(type="password" placeholder="Password" value="123456789")
-      .form-group
-        .col-3
-          label.form-label(for="input-example-13") Number
-        .col-9
-          input#input-example-13.form-input(type="number" placeholder="00" value="66")
-      .form-group
-        .col-3
-          label.form-label(for="input-example-14") Date
-        .col-9
-          input#input-example-14.form-input(type="date" value="2016-12-31")
-      .form-group
-        .col-3
-          label.form-label(for="input-example-15") Color
-        .col-9
-          input#input-example-15.form-input(type="color" value="#5755d9")
-      .form-group
-        .col-3
-          label.form-label(for="input-example-16") File
-        .col-9
-          input#input-example-16.form-input(type="file")
-
-+docs-subheading('forms-input-groups', 'Input groups')
-
-.docs-demo.columns
-  .column.col-6.col-xs-12
-    .input-group
-      input.form-input.input-sm(type="text" placeholder="username")
-      select.form-select.select-sm
-        option Slack
-        option Skype
-        option Hipchat
-  .column.col-6.col-xs-12
-    .input-group
-      span.input-group-addon.addon-sm slack.com/
-      input.form-input.input-sm(type="text" placeholder="site name")
-      button.btn.btn-primary.input-group-btn.btn-sm Submit
-  .column.col-6.col-xs-12
-    .input-group
-      input.form-input(type="text" placeholder="username")
-      select.form-select
-        option Slack
-        option Skype
-        option Hipchat
-  .column.col-6.col-xs-12
-    .input-group
-      span.input-group-addon slack.com/
-      input.form-input(type="text" placeholder="site name")
-      button.btn.btn-primary.input-group-btn Submit
-  .column.col-6.col-xs-12
-    .input-group
-      label.form-switch
-        input(type="checkbox")
-        i.form-icon
-      input.form-input(type="text" placeholder="name")
-  .column.col-6.col-xs-12
-    .input-group
-      label.form-checkbox
-        input(type="checkbox")
-        i.form-icon
-      input.form-input(type="text" placeholder="name")
-  .column.col-6.col-xs-12
-    .input-group
-      input.form-input.input-lg(type="text" placeholder="username")
-      select.form-select.select-lg
-        option Slack
-        option Skype
-        option Hipchat
-  .column.col-6.col-xs-12
-    .input-group
-      span.input-group-addon.addon-lg slack.com/
-      input.form-input.input-lg(type="text" placeholder="site name")
-      button.btn.btn-primary.input-group-btn.btn-lg Submit
-
-p
-  | If you want to attach text and button along with an input, add the #[code input-group] class to the input container.
-  | And add the #[code input-group-addon] class to the text element and #[code input-group-btn] to the button element.
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
-      

-        ...
-        
-      

-
-      
-      

-        ...
-        
-      

-
-      
-      

-        ...
-        
-        
-      

-
-+docs-subheading('forms-validation', 'Form validation styles')
-
-.docs-demo.columns
-  .column.col-9.col-sm-12
-    fieldset
-      legend Input
-      .form-group
-        label.form-label(for="input-example-17") Name
-        input#input-example-17.form-input.is-success(type="text" placeholder="Name")
-        p.form-input-hint The name is valid.
-      .form-group.has-error
-        label.form-label(for="input-example-18") Password
-        input#input-example-18.form-input(type="password" placeholder="Password")
-        p.form-input-hint Passwords must have at least 8 characters.
-    fieldset
-      legend Select
-      .form-group
-        select.form-select.is-error
-          option Choose an option
-          option Slack
-          option Skype
-          option Hipchat
-        p.form-input-hint The option is invalid.
-      .form-group.has-success
-        select.form-select
-          option Choose an option
-          option Slack
-          option Skype
-          option Hipchat
-        p.form-input-hint The option is available.
-    fieldset
-      legend Checkbox, Radio and Switch (Error state only)
-      .form-group
-        label.form-checkbox.is-error
-          input(type="checkbox" checked="")
-          i.form-icon
-          |  I'm not a robot.
-      .form-group.has-error
-        label.form-radio
-          input(type="radio" name="gender" checked="")
-          i.form-icon
-          |  Male
-        label.form-radio
-          input(type="radio" name="gender")
-          i.form-icon
-          |  Female
-      .form-group
-        label.form-switch.is-error
-          input(type="checkbox" checked="")
-          i.form-icon
-          |  Send me emails with news and tips
-
-p
-  | To use form validation styles, you can either add #[code is-success] or #[code is-error] class to the controls or add #[code has-success] or #[code has-error] class to parent elements.
-  | Use the #[code form-input-hint] class to provide form validation success and error messages.
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      

-        
-        

-          
-          
-          
The name is invalid.

-        

-
-        
-        

-          
-          
-          
The name is invalid.

-        

-
-        
-        

-          
-        

-      

-
-.docs-demo.columns
-  .column.col-9.col-sm-12
-    .form-group
-      label.form-label(for="input-example-21") Email
-      input#input-example-21.form-input(type="text" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,14}$")
-    .form-group
-      label.form-label(for="input-example-22") Password
-      input#input-example-22.form-input(type="password" placeholder="Password" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$")
-
-p
-  | You can use input #[code pattern] attribute to validate the value as well.
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
-      
-
-      
-      
-
-+docs-subheading('forms-disabled', 'Form disabled styles')
-
-p 
-  | Add the #[code disabled] attribute to the element or #{'
'} for a disabled form components style.
-
-.docs-demo.columns
-  .column.col-6.col-xs-12
-    form(action="#forms")
-      fieldset(disabled="")
-        .form-group
-          label.form-label(for="input-example-19") Name
-          input#input-example-19.form-input(type="text" placeholder="Name")
-        .form-group
-          label.form-label Gender
-          label.form-radio
-            input(type="radio" name="gender" disabled="")
-            i.form-icon
-            |  Male
-          label.form-radio
-            input(type="radio" name="gender" disabled="")
-            i.form-icon
-            |  Female
-        .form-group
-          select.form-select(disabled="")
-            option Choose an option
-            option Slack
-            option Skype
-            option Hipchat
-        .form-group
-          label.form-switch
-            input(type="checkbox" disabled="")
-            i.form-icon
-            |  Send me emails with news and tips
-        .form-group
-          label.form-label(for="input-example-20") Message
-          textarea#input-example-20.form-input(placeholder="Textarea" rows="3" disabled="")
-        .form-group
-          label.form-checkbox
-            input(type="checkbox" disabled="")
-            i.form-icon
-            |  Remember me
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      

-        

-          

-            
-            
-          

-          

-            
-            
-            
-          

-          

-            
-          

-          

-            
-          

-          

-            
-            
-          

-          

-            
-          

-        

\ No newline at end of file
diff --git a/docs/src/contents/grid.pug b/docs/src/contents/grid.pug
deleted file mode 100644
index dff69f6..0000000
--- a/docs/src/contents/grid.pug
+++ /dev/null
@@ -1,171 +0,0 @@
-p
-  | Layout includes flexbox based responsive grid system with 12 columns.
-
-.docs-demo.columns
-  .column
-    .bg-primary.text-secondary.docs-block
-  .column
-    .bg-primary.text-secondary.docs-block
-  .column
-    .bg-primary.text-secondary.docs-block
-  .column
-    .bg-primary.text-secondary.docs-block
-  .column
-    .bg-primary.text-secondary.docs-block
-  .column
-    .bg-primary.text-secondary.docs-block
-  .column
-    .bg-primary.text-secondary.docs-block
-  .column
-    .bg-primary.text-secondary.docs-block
-  .column
-    .bg-primary.text-secondary.docs-block
-  .column
-    .bg-primary.text-secondary.docs-block
-  .column
-    .bg-primary.text-secondary.docs-block
-  .column
-    .bg-primary.text-secondary.docs-block
-.columns
-  .column.col-12
-    .bg-gray.docs-block col-12 (100%)
-.columns
-  .column.col-9
-    .bg-gray.docs-block col-9 (75%)
-.columns
-  .column.col-6
-    .bg-gray.docs-block col-6 (50%)
-.columns
-  .column.col-3
-    .bg-gray.docs-block col-3 (25%)
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
-      

-        

-          
col-6

-          
col-3

-          
col-2

-          
col-1

-        

-      

-
-p
-  | Add the #[code columns] class to a container with the #[code container] class. 
-  | And add any element you want with the #[code column] class inside the container. These columns will take up the space equally.
-  | You can specific the width of each column by adding class #[code col-<1-12>].
-p
-  | And you can add the #[code col-gapless] class to the #[code columns] to have gapless columns.
-
-.docs-demo.columns.col-gapless
-  .column.col-6
-    .bg-gray.docs-block col-6 (gapless)
-  .column.col-6
-    .bg-gray.docs-block col-6 (gapless)
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
-      

-        
col-6

-        
col-6

-      

-
-p
-  | By default, Spectre grid has multi-line flexbox enabled. You can add the #[code col-oneline] class to #[code columns] to make all its child columns positioned in the same single row.
-
-.docs-demo.columns.col-oneline
-  .column.col-8
-    .bg-gray.docs-block col-8
-  .column.col-8
-    .bg-gray.docs-block col-8
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
-      

-        
col-8

-        
col-8

-      

-
-+docs-subheading('grid-offset', 'Grid offset')
-
-p
-  | The Flexbox grid provides margin auto utilities to set offset. 
-  | There are #[code col-mx-auto], #[code col-ml-auto] and #[code col-mr-auto] to set margins between columns without using empty columns.
-
-.columns
-  .column.col-2
-    .bg-gray.docs-block col-2
-  .column.col-4.col-mx-auto
-    .bg-gray.docs-block col-4 col-mx-auto
-.columns
-  .column.col-2
-    .bg-gray.docs-block col-2
-  .column.col-4.col-ml-auto
-    .bg-gray.docs-block col-4 col-ml-auto
-.columns
-  .column.col-4.col-ml-auto
-    .bg-gray.docs-block col-4 col-ml-auto
-  .column.col-2
-    .bg-gray.docs-block col-2
-.columns
-  .column.col-4.col-mx-auto
-    .bg-gray.docs-block col-4 col-mx-auto
-  .column.col-2
-    .bg-gray.docs-block col-2
-.columns
-  .column.col-4.col-mr-auto
-    .bg-gray.docs-block col-4 col-mr-auto
-  .column.col-2
-    .bg-gray.docs-block col-2
-.columns
-  .column.col-4.col-mx-auto
-    .bg-gray.docs-block col-4 col-mx-auto
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
-      

-        

-          
col-4 col-mr-auto

-          
col-2

-        

-      

-
-+docs-subheading('grid-nesting', 'Grid nesting')
-
-p
-  | To nest grids, add the new #[code columns] and #[code column] structure within an existing column.
-
-.docs-demo.columns
-  .column.col-6
-    .bg-gray.docs-block col-6
-    .columns
-      .column.col-6
-        .bg-primary.docs-block col-6
-      .column.col-6
-        .bg-primary.docs-block col-6
-  .column.col-6
-    .bg-gray.docs-block col-6
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
-      

-        

-          
col-6
-            

-              
col-6

-              
col-6

-            

-          

-          
col-6

-        

-      

\ No newline at end of file
diff --git a/docs/src/contents/icons.pug b/docs/src/contents/icons.pug
deleted file mode 100644
index b67f1a5..0000000
--- a/docs/src/contents/icons.pug
+++ /dev/null
@@ -1,197 +0,0 @@
-p
-  | Icons are single-element, responsive and pure CSS icons.
-  | You can include #[code spectre-icons.css] located in the #[code dist] folder to your web #{''} to have these CSS icons.
-
-+docs-subheading('icons-navigation', 'Navigation icons')
-
-.columns
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-arrow-up
-    p icon-arrow-up
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-arrow-right
-    p icon-arrow-right
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-arrow-down
-    p icon-arrow-down
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-arrow-left
-    p icon-arrow-left
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-upward
-    p icon-upward
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-forward
-    p icon-forward
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-downward
-    p icon-downward
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-back
-    p icon-back
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-caret
-    p icon-caret
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-menu
-    p icon-menu
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-apps
-    p icon-apps
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-more-horiz
-    p icon-more-horiz
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-more-vert
-    p icon-more-vert
-
-+docs-subheading('icons-action', 'Action icons')
-
-.columns
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-resize-horiz
-    p icon-resize-horiz
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-resize-vert
-    p icon-resize-vert
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-plus
-    p icon-plus
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-minus
-    p icon-minus
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-cross
-    p icon-cross
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-check
-    p icon-check
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-stop
-    p icon-stop
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-shutdown
-    p icon-shutdown
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-refresh
-    p icon-refresh
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-search
-    p icon-search
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-flag
-    p icon-flag
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-bookmark
-    p icon-bookmark
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-edit
-    p icon-edit
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-delete
-    p icon-delete
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-share
-    p icon-share
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-download
-    p icon-download
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-upload
-    p icon-upload
-
-+docs-subheading('icons-object', 'Object icons')
-
-.columns
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-mail
-    p icon-mail
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-people
-    p icon-people
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-message
-    p icon-message
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-photo
-    p icon-photo
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-time
-    p icon-time
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-location
-    p icon-location
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-link
-    p icon-link
-  .column.col-3.col-md-6
-    button.btn.btn-primary.btn-action.btn-lg
-      i.icon.icon-emoji
-    p icon-emoji
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
-
-+docs-subheading('icons-sizes', 'Icon sizes')
-
-p
-  | Use #[code icon-2x], #[code icon-3x] and #[code icon-4x] classes to increase icon sizes.
-  | You can set #[code font-size] to have different icon sizes.
-
-.columns
-  .column.col-3.col-md-6
-    p
-      i.icon.icon-2x.icon-mail
-    p icon-2x (32px)
-  .column.col-3.col-md-6
-    p
-      i.icon.icon-3x.icon-mail
-    p icon-3x (48px)
-  .column.col-3.col-md-6
-    p
-      i.icon.icon-4x.icon-mail
-    p icon-4x (64px)
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
\ No newline at end of file
diff --git a/docs/src/contents/installation.pug b/docs/src/contents/installation.pug
deleted file mode 100644
index cada6ce..0000000
--- a/docs/src/contents/installation.pug
+++ /dev/null
@@ -1,68 +0,0 @@
-p
-  | There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use package managers.
-
-+docs-subheading('install-manually', 'Install manually')
-p
-  | Download the compiled and minified 
-  a(href='https://github.com/picturepan2/spectre/releases', target='_blank') Spectre CSS file
-  |  (core ~10KB min+gzip):
-p
-  a.btn.btn-primary(href='https://github.com/picturepan2/spectre/releases', target='_blank') Download Spectre.css
-p
-  | Include 
-  code spectre.css
-  |  located in 
-  strong /dist
-  |  in your website or Web app . Also, you can add 
-  code spectre-icons.css
-  |  and 
-  code spectre-exp.css
-  |  accordingly.
-
-//- install manually
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
-      
-      
-  
-+docs-subheading('install-cdn', 'Install from CDN')
-p
-  | Alternatively, you can use the 
-  a(href='https://unpkg.com/', target='_blank') unpkg
-  |  or 
-  a(href='https://cdnjs.com/libraries/spectre.css', target='_blank') cdnjs
-  |  CDN to load compiled Spectre.css.
-
-//- install from CDN
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
-      
-      
-
-+docs-subheading('install-npm', 'Install with NPM')
-
-//- install with npm
-pre.code(data-lang='Bash')
-  code
-    :highlight(lang="Bash")
-      npm install spectre.css --save
-
-+docs-subheading('install-yarn', 'Install with Yarn')
-
-//- install with yarn
-pre.code(data-lang='Bash')
-  code
-    :highlight(lang="bash")
-      yarn add spectre.css
-
-+docs-subheading('install-bower', 'Install from Bower')
-
-//- install with bower
-pre.code(data-lang='Bash')
-  code
-    :highlight(lang="bash")
-      bower install spectre.css --save
\ No newline at end of file
diff --git a/docs/src/contents/introduction.pug b/docs/src/contents/introduction.pug
deleted file mode 100644
index 8e544de..0000000
--- a/docs/src/contents/introduction.pug
+++ /dev/null
@@ -1,5 +0,0 @@
-p 
-  strong Spectre.css 
-  | is a lightweight, responsive and modern CSS framework for faster and extensible development.
-p 
-  | 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.
\ No newline at end of file
diff --git a/docs/src/contents/labels.pug b/docs/src/contents/labels.pug
deleted file mode 100644
index f0ad51f..0000000
--- a/docs/src/contents/labels.pug
+++ /dev/null
@@ -1,35 +0,0 @@
-p Labels are formatted text tags for highlighted, informative information.
-
-.docs-demo.columns
-  .column
-    span.label.mr-1 default label
-    span.label.label-primary.mr-1 primary label
-    span.label.label-secondary.mr-1 secondary label
-    span.label.label-success.mr-1 success label
-    span.label.label-warning.mr-1 warning label
-    span.label.label-error error label
-  
-p
-  | Add the #[code label] class to #{''} or #{''} elements.
-  | You can add another class #[code label-primary], #[code label-secondary], #[code label-success], #[code label-warning] and #[code label-error] for colored labels.
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
-      default label
-      primary label
-
-.docs-demo.columns
-  .column
-    span.label.label-rounded.mr-1 default label
-    span.label.label-rounded.label-primary primary label
-
-p
-  | Add the #[code label-rounded] class to have rounded labels.
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
-      primary label
\ No newline at end of file
diff --git a/docs/src/contents/loading.pug b/docs/src/contents/loading.pug
deleted file mode 100644
index 38a1dad..0000000
--- a/docs/src/contents/loading.pug
+++ /dev/null
@@ -1,21 +0,0 @@
-p
-  | Loading indicator is used for loading or updating.
-  | You can add the #[code loading] class to a container for loading status.
-
-.docs-demo.columns
-  .column.col-12.text-center
-    .loading
-
-p
-  | Add the #[code loading-lg] class for large size.
-
-.docs-demo.columns
-  .column.col-12.text-center
-    .loading.loading-lg
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      
-      

-      

\ No newline at end of file
diff --git a/docs/src/contents/media.pug b/docs/src/contents/media.pug
deleted file mode 100644
index ee78fcc..0000000
--- a/docs/src/contents/media.pug
+++ /dev/null
@@ -1,73 +0,0 @@
-p Media includes responsive images, figures and video classes.
-
-+docs-subheading('media-images', 'Images')
-
-p
-  | Add the #[code img-responsive] class to #{''} elements. The images will scale with the parent sizes.
-
-.columns
-  .column.col-12
-    img.img-responsive.rounded(src="img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper")
-
-p
-  | Add the #[code img-fit-contain] or #[code img-fit-cover] class to #{''} or #{'