From 3407502824ce9c701ab00625c8f72cd83996d087 Mon Sep 17 00:00:00 2001 From: itsMorte Date: Tue, 3 Dec 2019 21:51:07 +0100 Subject: [PATCH 1/3] fullfiled the avatars, ribbons and flags documentation --- pages/_docs/avatars.md | 83 ++++++++++++++++++++++++++---------------- pages/_docs/flags.md | 9 +++++ pages/_docs/ribbons.md | 18 +++++++++ 3 files changed, 78 insertions(+), 32 deletions(-) diff --git a/pages/_docs/avatars.md b/pages/_docs/avatars.md index d974fd63c..61b8e1c50 100644 --- a/pages/_docs/avatars.md +++ b/pages/_docs/avatars.md @@ -14,6 +14,50 @@ Create and group avatars of various shapes and sizes with one component. {% include ui/avatar.html person-id=3 %} {% endexample %} +### Avatar image + +Set an image as the background. + +{% example html wrapper=avatar-list %} +{% include ui/avatar.html person-id=1 %} +{% include ui/avatar.html person-id=3 %} +{% include ui/avatar.html person-id=4 %} +{% endexample %} + +### Initials + +You can easily use initials instead of images. + +{% example html wrapper=avatar-list %} +{% include ui/avatar.html placeholder="AB" %} +{% include ui/avatar.html placeholder="CD" %} +{% include ui/avatar.html placeholder="EF" %} +{% include ui/avatar.html placeholder="GH" %} +{% include ui/avatar.html placeholder="IJ" %} +{% endexample %} + +### Avatar icons + +You can also use icons in avatars. + +{% example html wrapper=avatar-list %} +{% include ui/avatar.html icon="user" %} +{% include ui/avatar.html icon="plus" %} +{% include ui/avatar.html icon="user-plus" %} +{% endexample %} + +### Avatar initials color + +Customize the color of the avatars' background. You can click You can click [here]({% docs_url colors %}) to see the list of available colors. + +{% example html wrapper=avatar-list %} +{% include ui/avatar.html placeholder="AB" color="green" %} +{% include ui/avatar.html placeholder="CD" color="red" %} +{% include ui/avatar.html placeholder="EF" color="yellow" %} +{% include ui/avatar.html placeholder="GH" color="blue" %} +{% include ui/avatar.html placeholder="IJ" color="purple" %} +{% endexample %} + ### 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. @@ -51,43 +95,18 @@ Change the shape of an avatar with the default Bootstrap image classes. {% include ui/avatar.html person-id=21 shape="rounded-lg" %} {% endexample %} -### Initials - -{% example html wrapper=avatar-list %} -{% include ui/avatar.html placeholder="AB" size="xl" %} -{% include ui/avatar.html placeholder="CD" size="lg" %} -{% include ui/avatar.html placeholder="EF" size="md" %} -{% include ui/avatar.html placeholder="GH" %} -{% include ui/avatar.html placeholder="IJ" size="sm" %} -{% endexample %} - - -### Avatar initials color - -[See more]({% docs_url colors %}) - -{% example html wrapper=avatar-list %} -{% include ui/avatar.html placeholder="AB" color="green" %} -{% include ui/avatar.html placeholder="CD" color="red" %} -{% include ui/avatar.html placeholder="EF" color="yellow" %} -{% include ui/avatar.html placeholder="GH" color="blue" %} -{% include ui/avatar.html placeholder="IJ" color="purple" %} -{% endexample %} - -### Avatar initials icons - -{% example html wrapper=avatar-list %} -{% include ui/avatar.html icon="user" %} -{% include ui/avatar.html icon="plus" %} -{% include ui/avatar.html icon="user-plus" %} -{% endexample %} - ### Avatars list +You can easily create a list of avatars. + {% example %} {% include ui/avatar-list.html %} {% endexample %} +### Stacked list + +Make the list stack when it reaches a certain length. + {% example %}
{% for person in site.data.people limit: 5 offset: 30 %} @@ -95,4 +114,4 @@ Change the shape of an avatar with the default Bootstrap image classes. {% endfor %} +8
-{% endexample %} +{% endexample %} \ No newline at end of file diff --git a/pages/_docs/flags.md b/pages/_docs/flags.md index 09e4fbd79..3928630c2 100644 --- a/pages/_docs/flags.md +++ b/pages/_docs/flags.md @@ -15,6 +15,13 @@ done: true ### Flag sizes +Change the flag size. + + {% example html %} {% include ui/flag.html flag="pl" class="flag-size-xl mr-1" %} {% include ui/flag.html flag="pl" class="flag-size-lg mr-1" %} @@ -24,6 +31,8 @@ done: true ### Types +To set the flag of the country you want add a class flag-(country name). For example to create a flag of Andorra your class should look like this: flag-ad. + {% for flag in site.data.flags %} diff --git a/pages/_docs/ribbons.md b/pages/_docs/ribbons.md index 5fe18237a..77e5a58b3 100644 --- a/pages/_docs/ribbons.md +++ b/pages/_docs/ribbons.md @@ -12,24 +12,42 @@ new: true ### Ribbon position +You can easily change the position of a ribbon by adding a class to the element. + +You can also use multiple classes at once for example:
moves the ribbon to the top left corner. + {% example html columns=1 %} {% include cards/ribbon.html top=true left=true %} {% endexample %} ### Ribbon color +Customize the ribbon's background color. You can click [here]({% docs_url colors %}) to see the list of available colors. + {% example html columns=1 %} {% include cards/ribbon.html color="red" %} {% endexample %} ### Ribbon text +Set your own text in a ribbon. + {% example html columns=1 %} {% include cards/ribbon.html color="green" text="-50%" %} {% endexample %} ### Ribbon style +Change the style of a ribbon. Available styles: + + {% example html columns=1 %} {% include cards/ribbon.html bookmark=true color="orange" text="-50%" %} {% endexample %} From b4fe4d1aacc6b58ca1fbfd5d33acf69c2202f355 Mon Sep 17 00:00:00 2001 From: Dawid Harat Date: Sun, 8 Dec 2019 19:57:35 +0100 Subject: [PATCH 2/3] flags docs correction --- pages/_docs/avatars.md | 2 +- pages/_docs/flags.md | 9 ++------- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/pages/_docs/avatars.md b/pages/_docs/avatars.md index 61b8e1c50..966329320 100644 --- a/pages/_docs/avatars.md +++ b/pages/_docs/avatars.md @@ -48,7 +48,7 @@ You can also use icons in avatars. ### Avatar initials color -Customize the color of the avatars' background. You can click You can click [here]({% docs_url colors %}) to see the list of available colors. +Customize the color of the avatars' background. You can click [here]({% docs_url colors %}) to see the list of available colors. {% example html wrapper=avatar-list %} {% include ui/avatar.html placeholder="AB" color="green" %} diff --git a/pages/_docs/flags.md b/pages/_docs/flags.md index 3928630c2..43394535c 100644 --- a/pages/_docs/flags.md +++ b/pages/_docs/flags.md @@ -15,12 +15,7 @@ done: true ### Flag sizes -Change the flag size. - +Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up to different sizes based on what’s needed. {% example html %} {% include ui/flag.html flag="pl" class="flag-size-xl mr-1" %} @@ -31,7 +26,7 @@ Change the flag size. ### Types -To set the flag of the country you want add a class flag-(country name). For example to create a flag of Andorra your class should look like this: flag-ad. +To set the flag of the country you want add a class `flag-(country name)`. For example to create a flag of Andorra your class should look like this: `.flag-ad`.
{% for flag in site.data.flags %} From 645b761c4c6a5fbb0f7a1aa1f25d29dfe0d2ec54 Mon Sep 17 00:00:00 2001 From: codecalm Date: Sun, 8 Dec 2019 19:58:25 +0100 Subject: [PATCH 3/3] ribbon and flags fixes --- pages/_docs/flags.md | 9 ++++----- pages/_docs/ribbons.md | 19 ++++++++----------- 2 files changed, 12 insertions(+), 16 deletions(-) diff --git a/pages/_docs/flags.md b/pages/_docs/flags.md index 3928630c2..832e627b4 100644 --- a/pages/_docs/flags.md +++ b/pages/_docs/flags.md @@ -16,11 +16,10 @@ done: true ### Flag sizes Change the flag size. - + +- `xl` - large +- `mr` - big +- `md` - medium {% example html %} {% include ui/flag.html flag="pl" class="flag-size-xl mr-1" %} diff --git a/pages/_docs/ribbons.md b/pages/_docs/ribbons.md index 77e5a58b3..5067c3ae5 100644 --- a/pages/_docs/ribbons.md +++ b/pages/_docs/ribbons.md @@ -13,13 +13,13 @@ new: true ### Ribbon position You can easily change the position of a ribbon by adding a class to the element. - -You can also use multiple classes at once for example:
moves the ribbon to the top left corner. + + `ribbon-top` - moves it to the top + `ribbon-right` - moves it to the right + `ribbon-bottom` - moves it to the bottom + `ribbon-left` - moves it to the lefg + +You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbon-left` moves the ribbon to the top left corner. {% example html columns=1 %} {% include cards/ribbon.html top=true left=true %} @@ -43,10 +43,7 @@ Set your own text in a ribbon. ### Ribbon style -Change the style of a ribbon. Available styles: - +Change the style of a ribbon. {% example html columns=1 %} {% include cards/ribbon.html bookmark=true color="orange" text="-50%" %}