From 3407502824ce9c701ab00625c8f72cd83996d087 Mon Sep 17 00:00:00 2001 From: itsMorte Date: Tue, 3 Dec 2019 21:51:07 +0100 Subject: [PATCH] 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 %}