Merge remote-tracking branch 'origin/dev' into dev

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": {

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 %}
 <div class="avatar-list avatar-list-stacked">
   {% 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 %}
   <span class="avatar" element="a">+8</span>
 </div>
-{% endexample %}
+{% endexample %}

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`.
+
 <table>
 {% for flag in site.data.flags %}
 <tr>

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 %}