From 0746172c7df932912f50494a1540cc091528b487 Mon Sep 17 00:00:00 2001 From: codecalm Date: Sun, 16 Feb 2020 21:30:44 +0100 Subject: [PATCH] docs fixes --- _config.yml | 1 + pages/_docs/alerts.md | 13 +- pages/_docs/autosize.md | 2 +- pages/_docs/avatars.md | 43 ++++--- pages/_docs/badges.md | 21 ++-- pages/_docs/breadcrumb.md | 17 ++- pages/_docs/buttons.md | 33 +++-- pages/_docs/cards.md | 3 +- pages/_docs/carousel.md | 4 +- pages/_docs/charts.md | 2 +- pages/_docs/countup.md | 20 +-- pages/_docs/cursors.md | 2 +- pages/_docs/divider.md | 22 +++- pages/_docs/dropdowns.md | 1 - pages/_docs/empty.md | 4 +- pages/_docs/flags.md | 6 +- pages/_docs/form-elements.md | 117 +++++++----------- pages/_docs/form-helpers.md | 2 +- pages/_docs/index.md | 6 +- pages/_docs/input-mask.md | 2 + pages/_docs/layout.md | 8 -- pages/_docs/payments.md | 6 +- pages/_docs/progress.md | 12 +- pages/_docs/range-slider.md | 18 +-- pages/_docs/ribbons.md | 10 +- pages/_docs/spinners.md | 10 +- pages/_docs/steps.md | 10 +- pages/_docs/tables.md | 4 +- pages/_docs/tabs.md | 24 ++-- pages/_docs/timelines.md | 4 +- pages/_docs/toasts.md | 6 +- pages/_docs/tooltips.md | 4 +- pages/_docs/typography.md | 24 ++-- pages/_includes/example.html | 6 +- pages/_includes/forms/form-elements-1.html | 17 +-- pages/_includes/forms/form-elements-2.html | 8 +- pages/_includes/forms/form-elements-3.html | 14 +-- pages/_includes/parts/form/input.html | 27 ++++ .../parts/form/validation-states.html | 6 + pages/_layouts/docs.html | 12 +- scss/_variables.scss | 2 +- scss/demo/_highlight.scss | 2 +- 42 files changed, 277 insertions(+), 278 deletions(-) delete mode 100644 pages/_docs/layout.md create mode 100644 pages/_includes/parts/form/input.html create mode 100644 pages/_includes/parts/form/validation-states.html diff --git a/_config.yml b/_config.yml index c4d027c1d..14bca799e 100644 --- a/_config.yml +++ b/_config.yml @@ -68,6 +68,7 @@ defaults: type: "docs" values: layout: docs + toc: true - scope: type: "components" values: diff --git a/pages/_docs/alerts.md b/pages/_docs/alerts.md index 3b02c8e1a..cc23cf914 100644 --- a/pages/_docs/alerts.md +++ b/pages/_docs/alerts.md @@ -3,10 +3,9 @@ title: Alerts menu: docs.alerts description: Bootstrap provides an easy way to create predefined alert messages. bootstrap-link: components/alerts/ -done: true --- -### Default markup +## Default markup {% capture code %} {% for variant in site.variants %} @@ -19,7 +18,7 @@ done: true {% include example.html code=code %} -### Alert Links +## Alert Links Add the `alert-link` class to any links inside the alert box to create "matching colored links": @@ -34,7 +33,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching {% include example.html code=code %} -### Dismissible Alerts +## Dismissible Alerts {% capture code %} {% for variant in site.variants %} @@ -46,7 +45,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching {% endcapture %} {% include example.html code=code %} -### Alerts with icons +## Alerts with icons {% capture code %} {% for variant in site.variants %} @@ -58,7 +57,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching {% endcapture %} {% include example.html code=code %} -### Alert with avatar +## Alert with avatar {% capture code %} {% for variant in site.variants %} @@ -70,7 +69,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching {% endcapture %} {% include example.html code=code %} -### Alert with buttons +## Alert with buttons {% capture code %} {% capture variant-text %} diff --git a/pages/_docs/autosize.md b/pages/_docs/autosize.md index 79333e82d..2dcf8389f 100644 --- a/pages/_docs/autosize.md +++ b/pages/_docs/autosize.md @@ -5,7 +5,7 @@ description: A small, stand-alone script to automatically adjust textarea height done: true --- -### Default markup +## Default markup {% capture code %} diff --git a/pages/_docs/avatars.md b/pages/_docs/avatars.md index cfdf5a07b..b58944cd7 100644 --- a/pages/_docs/avatars.md +++ b/pages/_docs/avatars.md @@ -2,19 +2,18 @@ title: Avatars menu: docs.avatars description: Create and group avatars of various shapes and sizes with one component. -done: true --- -### Default markup +## Default markup {% capture code %} {% include ui/avatar.html person-id=1 %} {% include ui/avatar.html person-id=2 %} {% include ui/avatar.html person-id=3 %} {% endcapture %} -{% include example.html code=code %} +{% include example.html code=code centered=true %} -### Avatar image +## Avatar image Set an image as the background. @@ -23,9 +22,9 @@ Set an image as the background. {% include ui/avatar.html person-id=3 %} {% include ui/avatar.html person-id=4 %} {% endcapture %} -{% include example.html code=code %} +{% include example.html code=code centered=true %} -### Initials +## Initials You can easily use initials instead of images. @@ -36,9 +35,9 @@ You can easily use initials instead of images. {% include ui/avatar.html placeholder="GH" %} {% include ui/avatar.html placeholder="IJ" %} {% endcapture %} -{% include example.html code=code %} +{% include example.html code=code centered=true %} -### Avatar icons +## Avatar icons You can also use icons in avatars. @@ -47,9 +46,9 @@ You can also use icons in avatars. {% include ui/avatar.html icon="plus" %} {% include ui/avatar.html icon="user-plus" %} {% endcapture %} -{% include example.html code=code %} +{% include example.html code=code centered=true %} -### Avatar initials color +## Avatar initials color Customize the color of the avatars' background. You can click [here]({% docs_url colors %}) to see the list of available colors. @@ -60,9 +59,9 @@ Customize the color of the avatars' background. You can click [here]({% docs_url {% include ui/avatar.html placeholder="GH" color="blue" %} {% include ui/avatar.html placeholder="IJ" color="purple" %} {% endcapture %} -{% include example.html code=code %} +{% include example.html code=code centered=true %} -### Avatar size +## Avatar size Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed. @@ -73,9 +72,9 @@ Using Bootstrap’s typical naming structure, you can create a standard avatar, {% include ui/avatar.html person-id=7 %} {% include ui/avatar.html person-id=6 size="sm" %} {% endcapture %} -{% include example.html code=code %} +{% include example.html code=code centered=true %} -### Avatar status +## Avatar status Add an online or offline status indicator to show user's availability. @@ -87,9 +86,9 @@ Add an online or offline status indicator to show user's availability. {% include ui/avatar.html person-id=15 status="info" %} {% include ui/avatar.html person-id=16 status="gray" status-text="5" %} {% endcapture %} -{% include example.html code=code %} +{% include example.html code=code centered=true %} -### Avatar shape +## Avatar shape Change the shape of an avatar with the default Bootstrap image classes. @@ -100,18 +99,18 @@ Change the shape of an avatar with the default Bootstrap image classes. {% include ui/avatar.html person-id=20 shape="rounded-0" %} {% include ui/avatar.html person-id=21 shape="rounded-lg" %} {% endcapture %} -{% include example.html code=code %} +{% include example.html code=code centered=true %} -### Avatars list +## Avatars list You can easily create a list of avatars. {% capture code %} {% include ui/avatar-list.html %} {% endcapture %} -{% include example.html code=code %} +{% include example.html code=code centered=true %} -### Stacked list +## Stacked list Make the list stack when it reaches a certain length. @@ -120,7 +119,7 @@ Make the list stack when it reaches a certain length. {% for person in site.data.people limit: 5 offset: 30 %} {% include ui/avatar.html person=person element="a" %} {% endfor %} - +8 + +8 {% endcapture %} -{% include example.html code=code %} +{% include example.html code=code centered=true %} diff --git a/pages/_docs/badges.md b/pages/_docs/badges.md index b7d13a3b8..57e13d8c1 100644 --- a/pages/_docs/badges.md +++ b/pages/_docs/badges.md @@ -3,19 +3,18 @@ title: Badges menu: docs.badges description: A small count and labeling component. bootstrap-link: components/badge/ -done: true --- -### Default markup +## Default markup {% capture code %} {% for color in site.colors %} {{ color[0] }} {% endfor %} {% endcapture %} -{% include example.html code=code %} +{% include example.html code=code centered=true %} -### Pill badges +## Pill badges To make a pill bagde (with rounded corners) add `.bagde-pill` class. @@ -24,10 +23,10 @@ To make a pill bagde (with rounded corners) add `.bagde-pill` class. {{ forloop.index }} {% endfor %} {% endcapture %} -{% include example.html code=code %} +{% include example.html code=code centered=true %} -### Soft badges +## Soft badges Creates a soft variant of a corresponding contextual badge variation. You can click [here]({% docs_url colors %}) to see the list of available colors. @@ -36,10 +35,10 @@ Creates a soft variant of a corresponding contextual badge variation. You can cl {{ color[0] }} {% endfor %} {% endcapture %} -{% include example.html code=code %} +{% include example.html code=code centered=true %} -### Links +## Links Make a badge work as a link by putting it into an `` element. @@ -48,10 +47,10 @@ Make a badge work as a link by putting it into an `` element. {{ color[0] }} {% endfor %} {% endcapture %} -{% include example.html code=code %} +{% include example.html code=code centered=true %} -### Empty badges +## Empty badges If you don't want your badge to contain any text you can do it by leaving the html element empty. @@ -60,4 +59,4 @@ If you don't want your badge to contain any text you can do it by leaving the ht {% endfor %} {% endcapture %} -{% include example.html code=code %} +{% include example.html code=code centered=true %} diff --git a/pages/_docs/breadcrumb.md b/pages/_docs/breadcrumb.md index d7f76e0df..d70b9d160 100644 --- a/pages/_docs/breadcrumb.md +++ b/pages/_docs/breadcrumb.md @@ -6,38 +6,37 @@ bootstrap-link: components/breadcrumb/ --- - -### Default markup +## Default markup The dividers are automatically created in the content of the `:before` pseudo-element of li tags. You can inform the current page using the `active` modifier in a `li` tag. It will disable the navigation of inner links. {% capture code %} {% include ui/breadcrumb.html %} {% endcapture %} -{% include example.html code=code %} +{% include example.html code=code centered=true %} -### Breadcrumb variations +## Breadcrumb variations You can add more variations by modify `$breadcrumb-variants` variable in Tabler config. {% capture code %} {% include ui/breadcrumb.html class="breadcrumb-dots" %} {% endcapture %} -{% include example.html code=code %} +{% include example.html code=code centered=true %} {% capture code %} {% include ui/breadcrumb.html class="breadcrumb-arrows" %} {% endcapture %} -{% include example.html code=code %} +{% include example.html code=code centered=true %} {% capture code %} {% include ui/breadcrumb.html class="breadcrumb-bullets" %} {% endcapture %} -{% include example.html code=code %} +{% include example.html code=code centered=true %} -### Alternate version +## Alternate version {% capture code %} {% include ui/breadcrumb.html class="breadcrumb-alternate" %} {% endcapture %} -{% include example.html code=code %} +{% include example.html code=code centered=true %} diff --git a/pages/_docs/buttons.md b/pages/_docs/buttons.md index 04b169ae8..024d140de 100644 --- a/pages/_docs/buttons.md +++ b/pages/_docs/buttons.md @@ -4,10 +4,9 @@ icon: fe fe-plus-square description: Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more. bootstrap-link: components/buttons/ done: true -toc: true --- -### Button tag +## Button tag The `.btn` classes are designed to be used with the `