diff options
Diffstat (limited to 'docs/src')
64 files changed, 138 insertions, 113 deletions
diff --git a/docs/src/_layout/_example-layout.pug b/docs/src/_layout/_example-layout.pug index f74bc81..c3afafe 100644 --- a/docs/src/_layout/_example-layout.pug +++ b/docs/src/_layout/_example-layout.pug @@ -2,7 +2,7 @@ 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.' + - var description = 'Spectre.css CSS Framework 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.' doctype html html(lang='en') diff --git a/docs/src/_layout/_layout.pug b/docs/src/_layout/_layout.pug index 6eb2e38..676bda5 100644 --- a/docs/src/_layout/_layout.pug +++ b/docs/src/_layout/_layout.pug @@ -6,7 +6,7 @@ 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.' + - var description = 'Spectre.css CSS Framework 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' @@ -26,6 +26,12 @@ html(lang='en') meta(http-equiv='x-ua-compatible' content='ie=edge') meta(name='description' content= description) meta(name='author' content='Yan Zhu') + meta(property='og:url' content= url) + meta(property='og:title' content= title) + meta(property='og:description' content= description) + meta(name='twitter:card' content='summary') + meta(name='twitter:site' content='@spectrecss') + meta(name='twitter:creator' content='@picturepan2') if slug != parent link(rel='shortcut icon' href='../img/favicons/favicon.ico') link(rel='icon' href='../img/favicons/favicon.png') diff --git a/docs/src/components.pug b/docs/src/components.pug index ffc8f7b..b3890d9 100644 --- a/docs/src/components.pug +++ b/docs/src/components.pug @@ -4,7 +4,7 @@ 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.' + - var description = 'Accordions, Avatars, Badges, Bars, Breadcrumbs, Cards, Chips, Empty states, Menu, Modals, Nav, Pagination, Panels, Popovers, teps, Tabs, TIles, Toasts, Tooltips' block docs-content +docs-heading('components', 'Components') diff --git a/docs/src/components/accordions.pug b/docs/src/components/accordions.pug index a3c8fcf..a03a179 100644 --- a/docs/src/components/accordions.pug +++ b/docs/src/components/accordions.pug @@ -4,7 +4,7 @@ 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.' + - var description = 'Accordions are used to toggle sections of content. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('accordions', 'Accordions') diff --git a/docs/src/components/avatars.pug b/docs/src/components/avatars.pug index a513648..6714233 100644 --- a/docs/src/components/avatars.pug +++ b/docs/src/components/avatars.pug @@ -4,7 +4,7 @@ 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.' + - var description = 'Avatars are user profile pictures. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('avatars', 'Avatars') @@ -14,22 +14,22 @@ block docs-content .docs-demo.columns .column.col-6.col-xs-12 - figure.avatar.avatar-xl + figure.avatar.avatar-xl.mr-2 img(src="../img/avatar-1.png" alt="Avatar XL") - figure.avatar.avatar-lg + figure.avatar.avatar-lg.mr-2 img(src="../img/avatar-2.png" alt="Avatar LG") - figure.avatar + figure.avatar.mr-2 img(src="../img/avatar-3.png" alt="Avatar") - figure.avatar.avatar-sm + figure.avatar.avatar-sm.mr-2 img(src="../img/avatar-4.png" alt="Avatar SM") - figure.avatar.avatar-xs + figure.avatar.avatar-xs.mr-2 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") + figure.avatar.avatar-xl.mr-2(data-initial="YZ") + figure.avatar.avatar-lg.mr-2(data-initial="YZ") + figure.avatar.mr-2(data-initial="YZ") + figure.avatar.avatar-sm.mr-2(data-initial="YZ") + figure.avatar.avatar-xs.mr-2(data-initial="YZ") p | Add the #[code avatar] class to #{'<img>'} element. @@ -55,18 +55,20 @@ block docs-content <img src="img/avatar-1.png" alt="..."> </figure> + +docs-subheading('avatars-icons', 'Avatar icons') + .docs-demo.columns .column.col-6.col-xs-12 - figure.avatar.avatar-xl + figure.avatar.avatar-xl.mr-2 img(src="../img/avatar-1.png" alt="Avatar") img.avatar-icon(src="../img/avatar-2.png" alt="Avatar") - figure.avatar.avatar-lg + figure.avatar.avatar-lg.mr-2 img(src="../img/avatar-2.png" alt="Avatar") img.avatar-icon(src="../img/avatar-3.png" alt="Avatar") - figure.avatar + figure.avatar.mr-2 img(src="../img/avatar-3.png" alt="Avatar") img.avatar-icon(src="../img/avatar-4.png" alt="Avatar") - figure.avatar.avatar-sm + figure.avatar.avatar-sm.mr-2 img(src="../img/avatar-4.png" alt="Avatar") img.avatar-icon(src="../img/avatar-5.png" alt="Avatar") figure.avatar.avatar-xs @@ -85,15 +87,15 @@ block docs-content .docs-demo.columns .column.col-6.col-xs-12 - figure.avatar.avatar-xl(data-initial="YZ") + figure.avatar.avatar-xl.mr-2(data-initial="YZ") i.avatar-presence.online - figure.avatar.avatar-lg(data-initial="YZ") + figure.avatar.avatar-lg.mr-2(data-initial="YZ") i.avatar-presence.busy - figure.avatar(data-initial="YZ") + figure.avatar.mr-2(data-initial="YZ") i.avatar-presence.away - figure.avatar.avatar-sm(data-initial="YZ") + figure.avatar.avatar-sm.mr-2(data-initial="YZ") i.avatar-presence.offline - figure.avatar.avatar-xs(data-initial="YZ") + figure.avatar.avatar-xs.mr-2(data-initial="YZ") i.avatar-presence.online p diff --git a/docs/src/components/badges.pug b/docs/src/components/badges.pug index f6232a2..c87a6a0 100644 --- a/docs/src/components/badges.pug +++ b/docs/src/components/badges.pug @@ -4,7 +4,7 @@ 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.' + - var description = 'Badges are often used as unread number indicators. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('badges', 'Badges') diff --git a/docs/src/components/bars.pug b/docs/src/components/bars.pug index 31d8418..29bc2c8 100644 --- a/docs/src/components/bars.pug +++ b/docs/src/components/bars.pug @@ -4,7 +4,7 @@ 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.' + - var description = 'Bars represent the progress of a task or the value within the known range.Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('bars', 'Bars') diff --git a/docs/src/components/breadcrumbs.pug b/docs/src/components/breadcrumbs.pug index c6f4ffe..d01c445 100644 --- a/docs/src/components/breadcrumbs.pug +++ b/docs/src/components/breadcrumbs.pug @@ -4,7 +4,7 @@ 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.' + - var description = 'Breadcrumbs are used as navigational hierarchies to indicate current location. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('breadcrumbs', 'Breadcrumbs') diff --git a/docs/src/components/cards.pug b/docs/src/components/cards.pug index 7dbcd83..5917736 100644 --- a/docs/src/components/cards.pug +++ b/docs/src/components/cards.pug @@ -4,7 +4,7 @@ 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.' + - var description = 'Cards are flexible content containers. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('cards', 'Cards') diff --git a/docs/src/components/chips.pug b/docs/src/components/chips.pug index 18bcf9d..72c3ea7 100644 --- a/docs/src/components/chips.pug +++ b/docs/src/components/chips.pug @@ -4,13 +4,13 @@ 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.' + - var description = 'Chips are complex entities in small blocks. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('chips', 'Chips') include ../_layout/_ad-g.pug - p Chips are complex entities in small blocks. + p Chips are complex entities in small blocks. .docs-demo.columns .column.col-12 diff --git a/docs/src/components/empty.pug b/docs/src/components/empty.pug index b23ce8c..51ebadc 100644 --- a/docs/src/components/empty.pug +++ b/docs/src/components/empty.pug @@ -4,7 +4,7 @@ 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.' + - var description = 'Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('empty', 'Empty states') diff --git a/docs/src/components/menu.pug b/docs/src/components/menu.pug index e358056..a41a4a5 100644 --- a/docs/src/components/menu.pug +++ b/docs/src/components/menu.pug @@ -4,7 +4,7 @@ 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.' + - var description = 'Menus are vertical list of links or buttons for actions and navigation. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('menu', 'Menu') diff --git a/docs/src/components/modals.pug b/docs/src/components/modals.pug index f084864..0d92b2b 100644 --- a/docs/src/components/modals.pug +++ b/docs/src/components/modals.pug @@ -4,7 +4,7 @@ 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.' + - var description = 'Modals are flexible dialog prompts. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('modals', 'Modals') diff --git a/docs/src/components/nav.pug b/docs/src/components/nav.pug index 3ee2097..aa09fed 100644 --- a/docs/src/components/nav.pug +++ b/docs/src/components/nav.pug @@ -4,7 +4,7 @@ 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.' + - var description = 'Spectre.css CSS Framework 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') diff --git a/docs/src/components/pagination.pug b/docs/src/components/pagination.pug index c20f8b2..dbb4896 100644 --- a/docs/src/components/pagination.pug +++ b/docs/src/components/pagination.pug @@ -4,7 +4,7 @@ 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.' + - var description = 'Spectre.css CSS Framework 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') diff --git a/docs/src/components/panels.pug b/docs/src/components/panels.pug index 487b8d4..048f3db 100644 --- a/docs/src/components/panels.pug +++ b/docs/src/components/panels.pug @@ -4,7 +4,7 @@ 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.' + - var description = 'Panels are flexible view container with auto-expand content section. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('panels', 'Panels') diff --git a/docs/src/components/popovers.pug b/docs/src/components/popovers.pug index 25bfe20..283b584 100644 --- a/docs/src/components/popovers.pug +++ b/docs/src/components/popovers.pug @@ -4,7 +4,7 @@ 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.' + - var description = 'Popovers are small overlay content containers. Popovers component is built entirely in CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('popovers', 'Popovers') diff --git a/docs/src/components/steps.pug b/docs/src/components/steps.pug index 57f0feb..fcb258d 100644 --- a/docs/src/components/steps.pug +++ b/docs/src/components/steps.pug @@ -4,7 +4,7 @@ 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.' + - var description = 'Steps are progress indicators of a sequence of task steps. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('steps', 'Steps') diff --git a/docs/src/components/tabs.pug b/docs/src/components/tabs.pug index 27f5644..a9e46a2 100644 --- a/docs/src/components/tabs.pug +++ b/docs/src/components/tabs.pug @@ -4,7 +4,7 @@ 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.' + - var description = 'Tabs enable quick switch between different views. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('tabs', 'Tabs') diff --git a/docs/src/components/tiles.pug b/docs/src/components/tiles.pug index a2e8827..7e86f97 100644 --- a/docs/src/components/tiles.pug +++ b/docs/src/components/tiles.pug @@ -4,7 +4,7 @@ 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.' + - var description = 'Tiles are repeatable or embeddable information blocks. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('tiles', 'Tiles') diff --git a/docs/src/components/toasts.pug b/docs/src/components/toasts.pug index 718300b..0ed6198 100644 --- a/docs/src/components/toasts.pug +++ b/docs/src/components/toasts.pug @@ -4,7 +4,7 @@ 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.' + - var description = 'Toasts are used to show alert or information to users. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('toasts', 'Toasts') diff --git a/docs/src/components/tooltips.pug b/docs/src/components/tooltips.pug index e9b041e..0ab719e 100644 --- a/docs/src/components/tooltips.pug +++ b/docs/src/components/tooltips.pug @@ -4,13 +4,13 @@ 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.' + - var description = 'Tooltips provide context information labels that appear on hover and focus. Tooltips component is built entirely in CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('tooltips', 'Tooltips') include ../_layout/_ad-g.pug - p Tooltips provide context information labels that appear on hover and focus. + p Tooltips provide context information labels that appear on hover and focus. Tooltips component is built entirely in CSS. .docs-demo.columns.text-center .column.col-xs-12 @@ -22,7 +22,6 @@ block docs-content .column.col-xs-12 button.btn.btn-primary.tooltip.tooltip-left(data-tooltip="Left Tooltip Text\nMultiline") 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 diff --git a/docs/src/elements.pug b/docs/src/elements.pug index 270cc39..046246b 100644 --- a/docs/src/elements.pug +++ b/docs/src/elements.pug @@ -4,7 +4,7 @@ block variables - var slug = 'elements' - var parent = 'elements' - var title = 'Elements - 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.' + - var description = 'Spectre.css CSS Framework 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('elements', 'Elements') diff --git a/docs/src/elements/buttons.pug b/docs/src/elements/buttons.pug index 04e3101..cfd9b5a 100644 --- a/docs/src/elements/buttons.pug +++ b/docs/src/elements/buttons.pug @@ -4,7 +4,7 @@ block variables - var slug = 'buttons' - var parent = 'elements' - var title = 'Buttons - Elements - 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.' + - var description = 'Buttons include simple button styles for actions in different types and sizes. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('buttons', 'Buttons') diff --git a/docs/src/elements/code.pug b/docs/src/elements/code.pug index 920fea9..dcff503 100644 --- a/docs/src/elements/code.pug +++ b/docs/src/elements/code.pug @@ -4,7 +4,7 @@ block variables - var slug = 'code' - var parent = 'elements' - var title = 'Code - Elements - 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.' + - var description = 'Code is used for styling inline and multiline code snippets. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('code', 'Code') diff --git a/docs/src/elements/forms.pug b/docs/src/elements/forms.pug index cf39916..5db1d95 100644 --- a/docs/src/elements/forms.pug +++ b/docs/src/elements/forms.pug @@ -4,7 +4,7 @@ block variables - var slug = 'forms' - var parent = 'elements' - var title = 'Forms - Elements - 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.' + - var description = 'Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('forms', 'Forms') diff --git a/docs/src/elements/icons.pug b/docs/src/elements/icons.pug index 6128b3e..5c53bc1 100644 --- a/docs/src/elements/icons.pug +++ b/docs/src/elements/icons.pug @@ -4,10 +4,13 @@ block variables - var slug = 'icons' - var parent = 'elements' - var title = 'Icons - Elements - 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.' + - var description = 'Icons are single-element, responsive and pure CSS icons. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('icons', 'Icons') + p + small.label.label-primary.mr-2 CSS ONLY + include ../_layout/_ad-g.pug p diff --git a/docs/src/elements/labels.pug b/docs/src/elements/labels.pug index 7c6c55b..74586c7 100644 --- a/docs/src/elements/labels.pug +++ b/docs/src/elements/labels.pug @@ -4,7 +4,7 @@ block variables - var slug = 'labels' - var parent = 'elements' - var title = 'Labels - Elements - 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.' + - var description = 'Labels are formatted text tags for highlighted, informative information. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('labels', 'Labels') diff --git a/docs/src/elements/media.pug b/docs/src/elements/media.pug index 3cd4c2c..81c5c57 100644 --- a/docs/src/elements/media.pug +++ b/docs/src/elements/media.pug @@ -4,7 +4,7 @@ block variables - var slug = 'media' - var parent = 'elements' - var title = 'Media - Elements - 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.' + - var description = 'Media includes responsive images, figures and video classes. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('media', 'Media') diff --git a/docs/src/elements/tables.pug b/docs/src/elements/tables.pug index 5eec15d..be899e8 100644 --- a/docs/src/elements/tables.pug +++ b/docs/src/elements/tables.pug @@ -4,7 +4,7 @@ block variables - var slug = 'tables' - var parent = 'elements' - var title = 'Tables - Elements - 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.' + - var description = 'Tables include default styles for tables and data sets. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('tables', 'Tables') diff --git a/docs/src/elements/typography.pug b/docs/src/elements/typography.pug index 2fb7733..fa28dbf 100644 --- a/docs/src/elements/typography.pug +++ b/docs/src/elements/typography.pug @@ -4,7 +4,7 @@ block variables - var slug = 'typography' - var parent = 'elements' - var title = 'Typography - Elements - 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.' + - var description = 'Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('typography', 'Typography') diff --git a/docs/src/examples/starter.pug b/docs/src/examples/starter.pug index e062def..463ab9a 100644 --- a/docs/src/examples/starter.pug +++ b/docs/src/examples/starter.pug @@ -4,7 +4,7 @@ block variables - var slug = 'starter' - var parent = 'examples' - var title = 'Starter Page Example - 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.' + - var description = 'Spectre.css CSS Framework 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 content .section.bg-gray diff --git a/docs/src/experimentals.pug b/docs/src/experimentals.pug index e1a6a02..3002716 100644 --- a/docs/src/experimentals.pug +++ b/docs/src/experimentals.pug @@ -4,7 +4,7 @@ block variables - var slug = 'experimentals' - var parent = 'experimentals' - var title = 'Experimentals - Spectre.css CSS Framework' - - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + - var description = 'Spectre.css CSS Framework 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('experimentals', 'Experimentals') diff --git a/docs/src/experimentals/autocomplete.pug b/docs/src/experimentals/autocomplete.pug index c112c46..da5feaa 100644 --- a/docs/src/experimentals/autocomplete.pug +++ b/docs/src/experimentals/autocomplete.pug @@ -4,7 +4,7 @@ block variables - var slug = 'autocomplete' - var parent = 'experimentals' - var title = 'Autocomplete - Experimentals - Spectre.css CSS Framework' - - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + - var description = 'Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('autocomplete', 'Autocomplete') diff --git a/docs/src/experimentals/calendars.pug b/docs/src/experimentals/calendars.pug index 3c543d2..3dd3528 100644 --- a/docs/src/experimentals/calendars.pug +++ b/docs/src/experimentals/calendars.pug @@ -4,7 +4,7 @@ block variables - var slug = 'calendars' - var parent = 'experimentals' - var title = 'Calendars - Experimentals - Spectre.css CSS Framework' - - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + - var description = 'Calendars are designed for date or date range picker and events display. It is made with flex layout. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('calendars', 'Calendars') diff --git a/docs/src/experimentals/carousels.pug b/docs/src/experimentals/carousels.pug index afc4281..ad654ea 100644 --- a/docs/src/experimentals/carousels.pug +++ b/docs/src/experimentals/carousels.pug @@ -4,10 +4,13 @@ block variables - var slug = 'carousels' - var parent = 'experimentals' - var title = 'Carousels - Experimentals - Spectre.css CSS Framework' - - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + - var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' block docs-content +docs-heading('carousels', 'Carousels') + p + small.label.label-primary.mr-2 CSS ONLY + include ../_layout/_ad-g.pug p Carousels are slideshows for cycling images. It is built in pure CSS. diff --git a/docs/src/experimentals/comparison.pug b/docs/src/experimentals/comparison.pug index cdf135c..527abd9 100644 --- a/docs/src/experimentals/comparison.pug +++ b/docs/src/experimentals/comparison.pug @@ -4,10 +4,13 @@ block variables - var slug = 'comparison' - var parent = 'experimentals' - var title = 'Comparison sliders - Experimentals - Spectre.css CSS Framework' - - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + - var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' block docs-content +docs-heading('comparison', 'Comparison sliders') + p + small.label.label-primary.mr-2 CSS ONLY + include ../_layout/_ad-g.pug p diff --git a/docs/src/experimentals/filters.pug b/docs/src/experimentals/filters.pug index d31c6f7..d505c33 100644 --- a/docs/src/experimentals/filters.pug +++ b/docs/src/experimentals/filters.pug @@ -4,10 +4,13 @@ block variables - var slug = 'filters' - var parent = 'experimentals' - var title = 'Filters - Experimentals - Spectre.css CSS Framework' - - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + - var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' block docs-content +docs-heading('filters', 'Filters') + p + small.label.label-primary.mr-2 CSS ONLY + include ../_layout/_ad-g.pug p Filters are CSS only content filters. @@ -30,63 +33,63 @@ block docs-content .column.col-4.filter-item(data-tag="tag-2") .card .card-header - .card-title Fallout 4 - .card-subtitle Roleplaying + .card-title.text-bold Fallout 4 + .card-subtitle.text-gray Roleplaying .column.col-4.filter-item(data-tag="tag-3") .card .card-header - .card-title Halo 5 - .card-subtitle Shooter + .card-title.text-bold Halo 5 + .card-subtitle.text-gray Shooter .column.col-4.filter-item(data-tag="tag-1") .card .card-header - .card-title Quantum Break - .card-subtitle Action + .card-title.text-bold Quantum Break + .card-subtitle.text-gray Action .column.col-4.filter-item(data-tag="tag-4") .card .card-header - .card-title Forza Horizon 3 - .card-subtitle Sports + .card-title.text-bold Forza Horizon 3 + .card-subtitle.text-gray Sports .column.col-4.filter-item(data-tag="tag-2") .card .card-header - .card-title Final Fantasy XV - .card-subtitle Roleplaying + .card-title.text-bold Final Fantasy XV + .card-subtitle.text-gray Roleplaying .column.col-4.filter-item(data-tag="tag-4") .card .card-header - .card-title NBA 2K17 - .card-subtitle Sports + .card-title.text-bold NBA 2K17 + .card-subtitle.text-gray Sports .column.col-4.filter-item(data-tag="tag-3") .card .card-header - .card-title Battlefield 1 - .card-subtitle Shooter + .card-title.text-bold Battlefield 1 + .card-subtitle.text-gray Shooter .column.col-4.filter-item(data-tag="tag-1") .card .card-header - .card-title GTA V - .card-subtitle Action + .card-title.text-bold GTA V + .card-subtitle.text-gray Action .column.col-4.filter-item(data-tag="tag-4") .card .card-header - .card-title FIFA 17 - .card-subtitle Sports + .card-title.text-bold FIFA 17 + .card-subtitle.text-gray Sports .column.col-4.filter-item(data-tag="tag-3") .card .card-header - .card-title Overwatch - .card-subtitle Shooter + .card-title.text-bold Overwatch + .card-subtitle.text-gray Shooter .column.col-4.filter-item(data-tag="tag-3") .card .card-header - .card-title Titanfall 2 - .card-subtitle Shooter + .card-title.text-bold Titanfall 2 + .card-subtitle.text-gray Shooter .column.col-4.filter-item(data-tag="tag-3") .card .card-header - .card-title Gears of Wars 4 - .card-subtitle Shooter + .card-title.text-bold Gears of Wars 4 + .card-subtitle.text-gray Shooter p | Filters use #[code tag-1] to #[code tag-8] to flag different tags. diff --git a/docs/src/experimentals/meters.pug b/docs/src/experimentals/meters.pug index 5ac11b5..b2d0c77 100644 --- a/docs/src/experimentals/meters.pug +++ b/docs/src/experimentals/meters.pug @@ -4,7 +4,7 @@ block variables - var slug = 'meters' - var parent = 'experimentals' - var title = 'Meters - Experimentals - Spectre.css CSS Framework' - - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + - var description = 'Meters represent the value within the known range. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('meters', 'Meters') diff --git a/docs/src/experimentals/off-canvas.pug b/docs/src/experimentals/off-canvas.pug index 51fe9d0..cd8cfba 100644 --- a/docs/src/experimentals/off-canvas.pug +++ b/docs/src/experimentals/off-canvas.pug @@ -4,10 +4,13 @@ block variables - var slug = 'off-canvas' - var parent = 'experimentals' - var title = 'Off-canvas - Experimentals - Spectre.css CSS Framework' - - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + - var description = 'The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('off-canvas', 'Off-canvas') + p + small.label.label-primary.mr-2 CSS ONLY + include ../_layout/_ad-g.pug p diff --git a/docs/src/experimentals/parallax.pug b/docs/src/experimentals/parallax.pug index df84a5f..8637281 100644 --- a/docs/src/experimentals/parallax.pug +++ b/docs/src/experimentals/parallax.pug @@ -4,10 +4,13 @@ block variables - var slug = 'parallax' - var parent = 'experimentals' - var title = 'Parallax - Experimentals - Spectre.css CSS Framework' - - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + - var description = 'The Parallax component acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('parallax', 'Parallax') + p + small.label.label-primary.mr-2 CSS ONLY + include ../_layout/_ad-g.pug p diff --git a/docs/src/experimentals/progress.pug b/docs/src/experimentals/progress.pug index 585b731..7e83e00 100644 --- a/docs/src/experimentals/progress.pug +++ b/docs/src/experimentals/progress.pug @@ -4,7 +4,7 @@ block variables - var slug = 'progress' - var parent = 'experimentals' - var title = 'Progress - Experimentals - Spectre.css CSS Framework' - - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + - var description = 'The Progress indicates the progress completion of a task. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('progress', 'Progress') diff --git a/docs/src/experimentals/sliders.pug b/docs/src/experimentals/sliders.pug index c15d270..69e9be6 100644 --- a/docs/src/experimentals/sliders.pug +++ b/docs/src/experimentals/sliders.pug @@ -4,13 +4,13 @@ block variables - var slug = 'sliders' - var parent = 'experimentals' - var title = 'Sliders - Experimentals - Spectre.css CSS Framework' - - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + - var description = 'The Sliders are for selecting values from ranges. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('sliders', 'Sliders') include ../_layout/_ad-g.pug - p Sliders are for selecting values from ranges. + p The Sliders are for selecting values from ranges. p | You can add the class #[code tooltip] to have tooltip labels. | If no #[code data-tooltip] is set, the #[code value] will be used instead. diff --git a/docs/src/experimentals/timelines.pug b/docs/src/experimentals/timelines.pug index 1a9165e..0ec9bbb 100644 --- a/docs/src/experimentals/timelines.pug +++ b/docs/src/experimentals/timelines.pug @@ -4,13 +4,13 @@ block variables - var slug = 'timelines' - var parent = 'experimentals' - var title = 'Timelines - Experimentals - Spectre.css CSS Framework' - - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + - var description = 'The Timelines are ordered sequences of activities. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('timelines', 'Timelines') include ../_layout/_ad-g.pug - p Timelines are ordered sequences of activities. + p The Timelines are ordered sequences of activities. .docs-demo.columns .column.col-9.col-sm-12 diff --git a/docs/src/getting-started.pug b/docs/src/getting-started.pug index 21d93c1..d195053 100644 --- a/docs/src/getting-started.pug +++ b/docs/src/getting-started.pug @@ -4,7 +4,7 @@ block variables - var slug = 'getting-started' - var parent = 'getting-started' - var title = 'Getting started - 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.' + - var description = 'Spectre.css CSS Framework 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('getting-started', 'Getting started') diff --git a/docs/src/getting-started/browsers.pug b/docs/src/getting-started/browsers.pug index 91f0e65..d69d429 100644 --- a/docs/src/getting-started/browsers.pug +++ b/docs/src/getting-started/browsers.pug @@ -4,7 +4,7 @@ block variables - var slug = 'browsers' - var parent = 'getting-started' - var title = 'Browsers - Getting started - 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.' + - var description = 'Spectre.css CSS Framework 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('browsers', 'Browser support') diff --git a/docs/src/getting-started/custom.pug b/docs/src/getting-started/custom.pug index 2bd89ee..88cb713 100644 --- a/docs/src/getting-started/custom.pug +++ b/docs/src/getting-started/custom.pug @@ -4,7 +4,7 @@ block variables - var slug = 'custom' - var parent = 'getting-started' - var title = 'Custom - Getting started - 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.' + - var description = 'Spectre.css CSS Framework 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('custom', 'Custom version') diff --git a/docs/src/getting-started/installation.pug b/docs/src/getting-started/installation.pug index 387e7bf..13a9d4d 100644 --- a/docs/src/getting-started/installation.pug +++ b/docs/src/getting-started/installation.pug @@ -4,7 +4,7 @@ block variables - var slug = 'installation' - var parent = 'getting-started' - var title = 'Installation - Getting started - 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.' + - var description = 'Spectre.css CSS Framework 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('installation', 'Installation') diff --git a/docs/src/getting-started/whatsnew.pug b/docs/src/getting-started/whatsnew.pug index 4354e98..cd4c573 100644 --- a/docs/src/getting-started/whatsnew.pug +++ b/docs/src/getting-started/whatsnew.pug @@ -4,7 +4,7 @@ block variables - var slug = 'whatsnew' - var parent = 'getting-started' - var title = 'What\'s New - Getting started - 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.' + - var description = 'Spectre.css CSS Framework 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('whatsnew', 'What\'s new') diff --git a/docs/src/index.pug b/docs/src/index.pug index e819cf1..f7a6194 100644 --- a/docs/src/index.pug +++ b/docs/src/index.pug @@ -4,7 +4,7 @@ block variables - var slug = 'index' - var parent = 'index' - var title = '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.' + - var description = 'Spectre.css CSS Framework 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 content .section.section-hero.bg-gray diff --git a/docs/src/layout.pug b/docs/src/layout.pug index b07efd0..7afa396 100644 --- a/docs/src/layout.pug +++ b/docs/src/layout.pug @@ -4,7 +4,7 @@ block variables - var slug = 'layout' - var parent = 'layout' - var title = 'Layout - 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.' + - var description = 'Spectre.css CSS Framework 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('layout', 'Layout') diff --git a/docs/src/layout/grid.pug b/docs/src/layout/grid.pug index 4c35009..2c8b7b6 100644 --- a/docs/src/layout/grid.pug +++ b/docs/src/layout/grid.pug @@ -4,7 +4,7 @@ block variables - var slug = 'grid' - var parent = 'layout' - var title = 'Flexbox grid - Layout - 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.' + - var description = 'Layout includes flexbox based responsive grid system with 12 columns. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('grid', 'Flexbox grid') diff --git a/docs/src/layout/hero.pug b/docs/src/layout/hero.pug index 36d765d..2e977be 100644 --- a/docs/src/layout/hero.pug +++ b/docs/src/layout/hero.pug @@ -4,7 +4,7 @@ block variables - var slug = 'hero' - var parent = 'layout' - var title = 'Hero - Layout - 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.' + - var description = 'The Hero container shows key featured content or information. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('hero', 'Hero') diff --git a/docs/src/layout/navbar.pug b/docs/src/layout/navbar.pug index 45417aa..f3d7268 100644 --- a/docs/src/layout/navbar.pug +++ b/docs/src/layout/navbar.pug @@ -4,7 +4,7 @@ block variables - var slug = 'navbar' - var parent = 'layout' - var title = 'Navbar - Layout - 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.' + - var description = 'Navbar is a layout container that appears in the header of apps and websites. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('navbar', 'Navbar') diff --git a/docs/src/layout/responsive.pug b/docs/src/layout/responsive.pug index 1d0109a..378bff2 100644 --- a/docs/src/layout/responsive.pug +++ b/docs/src/layout/responsive.pug @@ -4,7 +4,7 @@ block variables - var slug = 'responsive' - var parent = 'layout' - var title = 'Responsive - Layout - 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.' + - var description = 'Responsive layout grid system and responsive visibility utilities. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('responsive', 'Responsive') diff --git a/docs/src/utilities.pug b/docs/src/utilities.pug index a7ef67e..069c54b 100644 --- a/docs/src/utilities.pug +++ b/docs/src/utilities.pug @@ -4,7 +4,7 @@ block variables - var slug = 'utilities' - var parent = 'utilities' - var title = 'Utilities - 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.' + - var description = 'Spectre.css CSS Framework 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('utilities', 'Utilities') diff --git a/docs/src/utilities/colors.pug b/docs/src/utilities/colors.pug index a5a306c..2b0a9d4 100644 --- a/docs/src/utilities/colors.pug +++ b/docs/src/utilities/colors.pug @@ -4,7 +4,7 @@ block variables - var slug = 'colors' - var parent = 'utilities' - var title = 'Color utilities - Utilities - 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.' + - var description = 'Color utilities are used for changing colors for text, link and background. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('colors', 'Color utilities') diff --git a/docs/src/utilities/cursors.pug b/docs/src/utilities/cursors.pug index c816795..4d8889b 100644 --- a/docs/src/utilities/cursors.pug +++ b/docs/src/utilities/cursors.pug @@ -4,7 +4,7 @@ block variables - var slug = 'cursors' - var parent = 'utilities' - var title = 'Cursor utilities - Utilities - 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.' + - var description = 'Cursor utilities specify which mouse cursor to display when mouseover. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('cursors', 'Cursor utilities') diff --git a/docs/src/utilities/display.pug b/docs/src/utilities/display.pug index d69e514..d881727 100644 --- a/docs/src/utilities/display.pug +++ b/docs/src/utilities/display.pug @@ -4,7 +4,7 @@ block variables - var slug = 'display' - var parent = 'utilities' - var title = 'Display utilities - Utilities - 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.' + - var description = 'Display utilities are used for display and hidden things. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('display', 'Display utilities') diff --git a/docs/src/utilities/divider.pug b/docs/src/utilities/divider.pug index be6fea7..1ed0e3a 100644 --- a/docs/src/utilities/divider.pug +++ b/docs/src/utilities/divider.pug @@ -4,13 +4,13 @@ block variables - var slug = 'divider' - var parent = 'utilities' - var title = 'Divider - Utilities - 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.' + - var description = 'The Divider is used for separating elements. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('divider', 'Divider') include ../_layout/_ad-g.pug - p A Divider is used for separating elements. + p The Divider is used for separating elements. .docs-demo.columns .column diff --git a/docs/src/utilities/loading.pug b/docs/src/utilities/loading.pug index f5ddb67..f3263c7 100644 --- a/docs/src/utilities/loading.pug +++ b/docs/src/utilities/loading.pug @@ -4,7 +4,7 @@ block variables - var slug = 'loading' - var parent = 'utilities' - var title = 'Loading - Utilities - 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.' + - var description = 'Loading indicator is used for loading or updating. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('loading', 'Loading') diff --git a/docs/src/utilities/position.pug b/docs/src/utilities/position.pug index dc0d718..9166e50 100644 --- a/docs/src/utilities/position.pug +++ b/docs/src/utilities/position.pug @@ -4,7 +4,7 @@ block variables - var slug = 'position' - var parent = 'utilities' - var title = 'Position utilities - Utilities - 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.' + - var description = 'Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('position', 'Position utilities') diff --git a/docs/src/utilities/shapes.pug b/docs/src/utilities/shapes.pug index 7449156..962a7bf 100644 --- a/docs/src/utilities/shapes.pug +++ b/docs/src/utilities/shapes.pug @@ -4,7 +4,7 @@ block variables - var slug = 'shapes' - var parent = 'utilities' - var title = 'Shape utilities - Utilities - 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.' + - var description = 'Shape utilities are used for changing element shapes. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('shapes', 'Shape utilities') diff --git a/docs/src/utilities/text.pug b/docs/src/utilities/text.pug index d383128..cbb9700 100644 --- a/docs/src/utilities/text.pug +++ b/docs/src/utilities/text.pug @@ -4,7 +4,7 @@ block variables - var slug = 'text' - var parent = 'utilities' - var title = 'Text utilities - Utilities - 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.' + - var description = 'Text utilities are used for text alignment, styles and overflow things. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' block docs-content +docs-heading('text', 'Text utilities') |