diff --git a/package.json b/package.json
index 7823f0a22..a20f7af26 100644
--- a/package.json
+++ b/package.json
@@ -73,19 +73,19 @@
"bundlesize": "0.18.0",
"clean-css-cli": "4.3.0",
"cross-env": "6.0.3",
- "eslint": "6.7.1",
+ "eslint": "6.7.2",
"eslint-config-xo": "0.27.2",
"eslint-plugin-import": "2.18.2",
- "eslint-plugin-unicorn": "13.0.0",
+ "eslint-plugin-unicorn": "14.0.1",
"glob": "^7.1.6",
- "http-server": "0.11.1",
+ "http-server": "0.12.0",
"icon-font-generator": "2.1.10",
"node-sass": "4.13.0",
"node-sass-package-importer": "5.3.2",
"nodemon": "^2.0.1",
"npm-run-all": "4.1.5",
"postcss-cli": "6.1.3",
- "rollup": "1.27.5",
+ "rollup": "1.27.7",
"rollup-plugin-babel": "4.3.3",
"rollup-plugin-babel-minify": "9.1.1",
"rollup-plugin-commonjs": "10.1.0",
@@ -95,7 +95,7 @@
"stylelint": "12.0.0",
"stylelint-config-twbs-bootstrap": "1.0.0",
"svgo": "1.3.2",
- "terser": "4.4.0",
+ "terser": "4.4.1",
"yaml": "1.7.2"
},
"dependencies": {
diff --git a/pages/_docs/avatars.md b/pages/_docs/avatars.md
index d974fd63c..966329320 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 [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..43394535c 100644
--- a/pages/_docs/flags.md
+++ b/pages/_docs/flags.md
@@ -15,6 +15,8 @@ done: true
### Flag sizes
+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" %}
{% include ui/flag.html flag="pl" class="flag-size-lg mr-1" %}
@@ -24,6 +26,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..5067c3ae5 100644
--- a/pages/_docs/ribbons.md
+++ b/pages/_docs/ribbons.md
@@ -12,24 +12,39 @@ new: true
### Ribbon position
+You can easily change the position of a ribbon by adding a class to the element.
+
+ `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 %}
{% 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.
+
{% example html columns=1 %}
{% include cards/ribbon.html bookmark=true color="orange" text="-50%" %}
{% endexample %}