diff --git a/_config.yml b/_config.yml index 5339f3a630b87de0feb773c2f1e2a42f1de524c7..6f184817e418013957d4627e17e45dcc3b52cf67 100644 --- a/_config.yml +++ b/_config.yml @@ -111,14 +111,3 @@ socials: [facebook, twitter, google, youtube, vimeo, dribbble, github, instagram months_short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] months_long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - - -docs-menu: - intro: - title: Getting started - pages: [index] - components: - title: Components - pages: [alerts, avatars, badges, buttons, cards, carousel, ribbons, spinners, steps, tabs, toasts, tooltips, typography] - - diff --git a/pages/_data/docs.yml b/pages/_data/docs.yml new file mode 100644 index 0000000000000000000000000000000000000000..99595998368d9a9d7a95b82e0b9d833c22b3b858 --- /dev/null +++ b/pages/_data/docs.yml @@ -0,0 +1,14 @@ +- page: alerts +- page: avatars +- page: badges +- page: buttons +- page: cards +- page: carousel +- page: ribbons +- page: spinners +- page: steps +- page: tabs +- page: toasts +- page: tooltips +- page: typography +- page: form-helpers diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml index 587ad8662446c5cad55e82002c9fef503262f7d9..e87f87ff171b6f09b83ab14b49d58eb3eb27975f 100644 --- a/pages/_data/menu.yml +++ b/pages/_data/menu.yml @@ -20,7 +20,7 @@ level-1: docs: title: Documentation icon: file-text - docs: components + docs: true changelog: url: changelog.html diff --git a/pages/_docs/alerts.md b/pages/_docs/alerts.md index f1a7c8ab02bef23de5dc229453f29d96044346cc..e81bd611ee1d802691d0ea969de09cdbeaeb651e 100644 --- a/pages/_docs/alerts.md +++ b/pages/_docs/alerts.md @@ -7,7 +7,7 @@ Bootstrap provides an easy way to create predefined alert messages. ## Default markup -{% example html %} +{% example %} {% for variant in site.variants %} {% capture variant-text %} This is a {{ variant.name }} alert — check it out! @@ -21,7 +21,7 @@ Bootstrap provides an easy way to create predefined alert messages. Add the `alert-link` class to any links inside the alert box to create "matching colored links": -{% example html %} +{% example %} {% for variant in site.variants %} {% capture variant-text %} This is a {{ variant.name }} alert — check it out! @@ -33,7 +33,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching ## Closing Alerts -{% example html %} +{% example %} {% for variant in site.variants %} {% capture variant-text %} This is a {{ variant.name }} alert — check it out! @@ -44,7 +44,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching ## Alerts with icons -{% example html %} +{% example %} {% for variant in site.variants %} {% capture variant-text %} This is a {{ variant.name }} alert — check it out! diff --git a/pages/_docs/avatars.md b/pages/_docs/avatars.md index a0f2f44c83650c172c37e62797f16458238376f8..d36ae94f60aaecd3c17ddfa9583ed0445aa2ed8a 100644 --- a/pages/_docs/avatars.md +++ b/pages/_docs/avatars.md @@ -83,7 +83,7 @@ Change the shape of an avatar with the default Bootstrap image classes. ## Avatars list -{% example html %} +{% example %}
{% for person in site.data.people limit: 5 offset: 20 %} {% include ui/avatar.html person=person %} @@ -91,7 +91,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
{% endexample %} -{% example html %} +{% example %}
{% for person in site.data.people limit: 5 offset: 30 %} {% include ui/avatar.html person=person element="a" %} diff --git a/pages/_docs/badges.md b/pages/_docs/badges.md index 3241ef2ae80a6fb098c3be6812aae0d3abd4ceee..058233c9d3d8a3d0544f5d03f066e6c497f0720a 100644 --- a/pages/_docs/badges.md +++ b/pages/_docs/badges.md @@ -7,7 +7,7 @@ A small count and labeling component. Please read the [official Bootstrap docume ## Default markup -{% example html %} +{% example %} {% for color in site.colors %} {{ color[0] }} {% endfor %} @@ -15,7 +15,7 @@ A small count and labeling component. Please read the [official Bootstrap docume ## Pill badges -{% example html %} +{% example %} {% for color in site.colors %} {{ forloop.index }} {% endfor %} @@ -24,7 +24,7 @@ A small count and labeling component. Please read the [official Bootstrap docume ## Soft badges -{% example html %} +{% example %} {% for color in site.colors %} {{ color[0] }} {% endfor %} @@ -33,7 +33,7 @@ A small count and labeling component. Please read the [official Bootstrap docume ## Links -{% example html %} +{% example %} {% for color in site.colors %} {{ color[0] }} {% endfor %} @@ -42,7 +42,7 @@ A small count and labeling component. Please read the [official Bootstrap docume ## Empty badges -{% example html %} +{% example %} {% for color in site.colors %} {% endfor %} diff --git a/pages/_docs/form-helpers.md b/pages/_docs/form-helpers.md new file mode 100644 index 0000000000000000000000000000000000000000..9b380478f74bc28dcb5195b85dc7213c235d8a53 --- /dev/null +++ b/pages/_docs/form-helpers.md @@ -0,0 +1,9 @@ +--- +title: Form helpers +--- + +## Input help + +{% example %} +? +{% endexample %} diff --git a/pages/_docs/spinners.md b/pages/_docs/spinners.md index 683184a72486984d3e8530618e42c18e09c72ec5..feedbf916752a4e77165395f6d6f28f328016b13 100644 --- a/pages/_docs/spinners.md +++ b/pages/_docs/spinners.md @@ -5,14 +5,14 @@ menu: docs.spinners ## Default markup -{% example html %} +{% example %} {% include ui/spinner.html %} {% endexample %} ## Colors -{% example html %} +{% example %} {% for color in site.colors %} {% assign c = color[0] %} {% include ui/spinner.html color=c %} @@ -21,18 +21,18 @@ menu: docs.spinners ## Size -{% example html %} +{% example %} {% include ui/spinner.html %} {% include ui/spinner.html size="sm" %} {% endexample %} ## Growing spinner -{% example html %} +{% example %} {% include ui/spinner.html type="grow" %} {% endexample %} -{% example html %} +{% example %} {% for color in site.colors %} {% assign c = color[0] %} {% include ui/spinner.html color=c type="grow" %} diff --git a/pages/_docs/steps.md b/pages/_docs/steps.md index 2f43988f0655473b28498d480360524d5fc71ea5..5ad605bac22501164d395c088d85d2a316a533f4 100644 --- a/pages/_docs/steps.md +++ b/pages/_docs/steps.md @@ -7,31 +7,31 @@ Steps are progress indicators of a sequence of task steps. ## Default markup -{% example html %} +{% example %} {% include ui/steps.html show-title=true %} {% endexample %} ## Tooltips -{% example html %} +{% example %} {% include ui/steps.html show-title=true show-tooltip=true %} {% endexample %} ## Color -{% example html %} +{% example %} {% include ui/steps.html color="green" show-title=true %} {% include ui/steps.html color="red" show-title=true %} {% endexample %} ## Steps without title -{% example html %} +{% example %} {% include ui/steps.html show-tooltip=true %} {% endexample %} ## Steps with numbers -{% example html %} +{% example %} {% include ui/steps.html count=5 active=2 numbers=true color="lime" %} {% endexample %} diff --git a/pages/_docs/tables.md b/pages/_docs/tables.md index 6cc7e58a6ba19ab396566d894d2edf35a5920dc4..9e2a2613d61f54cddc3dd69e41a2d717a25b58e3 100644 --- a/pages/_docs/tables.md +++ b/pages/_docs/tables.md @@ -9,7 +9,7 @@ A basic Bootstrap table has a light padding and only horizontal dividers. The `.table` class adds basic styling to a table: -{% example html %} +{% example %} {% include ui/table.html %} {% endexample %} @@ -17,6 +17,6 @@ The `.table` class adds basic styling to a table: Prevents table cell content from wrapping to another line. -{% example html %} +{% example %} {% include ui/table.html nowrap=true responsive=true %} {% endexample %} diff --git a/pages/_docs/toasts.md b/pages/_docs/toasts.md index ca5118c789d2d80077a7aa7d17a196b68aa1707a..f88b4842230c2802ca281faa7d95d6862d78226b 100644 --- a/pages/_docs/toasts.md +++ b/pages/_docs/toasts.md @@ -7,6 +7,6 @@ The toast component is like an alert box that is only shown for a couple of seco ## Default markup -{% example html %} +{% example %} {% include ui/toast.html %} {% endexample %} diff --git a/pages/_docs/typography.md b/pages/_docs/typography.md index 307d2d1ab6d17a18e6d7c0f02d76f05421fc004e..c7e562c9fdb44898c099cfe912b4e98dbfc1c889 100644 --- a/pages/_docs/typography.md +++ b/pages/_docs/typography.md @@ -8,7 +8,7 @@ description: Documentation and examples for common text utilities to control ali Easily realign text to components with text alignment classes. -{% example html %} +{% example %}

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

@@ -19,7 +19,7 @@ Easily realign text to components with text alignment classes. Transform text in components with text capitalization classes. -{% example html %} +{% example %}

Lowercased text.

Uppercased text.

Capitalized text.

@@ -29,7 +29,7 @@ Transform text in components with text capitalization classes. Utilities for controlling the tracking (letter spacing) of an element. -{% example html %} +{% example %}

Lorem ipsum dolor sit amet. Tight letter spacing.

Lorem ipsum dolor sit amet. Normal letter spacing.

Lorem ipsum dolor sit amet. Wide letter spacing.

@@ -39,18 +39,29 @@ Utilities for controlling the tracking (letter spacing) of an element. Utilities for controlling the leading (line height) of an element. -{% example html %} +{% example %}

Lorem ipsum dolor sit amet.
Dolor sit amet.

Lorem ipsum dolor sit amet.
Dolor sit amet.

Lorem ipsum dolor sit amet.
Dolor sit amet.

Lorem ipsum dolor sit amet.
Dolor sit amet.

{% endexample %} -## Basic elements +## Antialiasing + +Utilities for controlling the font smoothing of an element. + +Use the `.antialiased` utility to render text using subpixel antialiasing or use the `.subpixel-antialiased` render without antialiasing. + +{% example %} +
Text with antialiasing
+
Text without antialiasing
+{% endexample %} + +## Markdown elements When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `.markdown` as container. It can handle almost any HTML tag. -{% example html %} +{% example %}

Hello World

Lorem ipsum[1] dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Subscript works as well!

diff --git a/pages/_includes/layout/menu.html b/pages/_includes/layout/menu.html index e388f8e006f9c3001e5bc8e586679963460bf965..8817d503a0b2c3f8a7e11f197e8833225e649a9e 100644 --- a/pages/_includes/layout/menu.html +++ b/pages/_includes/layout/menu.html @@ -19,9 +19,9 @@