update docs

docs/pages/heading.md

@@ -4,15 +4,15 @@
 
 ## Size modifiers
 
-Add one of the following classes to modify the size and style of headings. Usually, you would use these classes on heading elements but they work also with any other element like a `div` element. Note that this classes extend the heading classes from the [Base component](base.md#headings) upward and the smallest modifier picks up the size after `h1` element.
+Add one of the following classes to modify the size and style of headings. Usually, these classes would be used on heading elements but they work also with any other element like a `div` element. Note that these classes extend the heading classes from the [Base component](base.md#headings) upward, and the smallest modifier picks up the size after `h1` element.
 
 | Class                 | Description                                      |
 | :-------------------- | :----------------------------------------------- |
-| `.uk-heading-small`   | Add this class to apply a small sized heading.   |
-| `.uk-heading-medium`  | Add this class to apply a medium sized heading.  |
-| `.uk-heading-large`   | Add this class to apply a large sized heading.   |
-| `.uk-heading-xlarge`  | Add this class to apply a xlarge sized heading.  |
-| `.uk-heading-2xlarge` | Add this class to apply a 2xlarge sized heading. |
+| `.uk-heading-small`   | Add this class to apply a small-sized heading.   |
+| `.uk-heading-medium`  | Add this class to apply a medium-sized heading.  |
+| `.uk-heading-large`   | Add this class to apply a large-sized heading.   |
+| `.uk-heading-xlarge`  | Add this class to apply a xlarge-sized heading.  |
+| `.uk-heading-2xlarge` | Add this class to apply a 2xlarge-sized heading. |
 
 ```html
 <h1 class="uk-heading-medium"></h1>
@@ -44,7 +44,7 @@ To apply a divider to a heading, add the `.uk-heading-divider` class. You can co
 
 ## Bullet modifier
 
-To apply a bullet to a heading, add the `.uk-heading-bullet` class. You can combine it with any size modifier and it works well with text alignment.
+To apply a bullet to a heading, add the `.uk-heading-bullet` class. You can combine it with any size modifier, and it works well with text alignment.
 
 ```html
 <h1 class="uk-heading-bullet"></h1>
@@ -58,7 +58,7 @@ To apply a bullet to a heading, add the `.uk-heading-bullet` class. You can comb
 
 ## Line modifier
 
-To apply a vertically centered line to a heading, add the `.uk-heading-line` class and place a `<span>` element inside the heading element. You can combine it with any size modifier and it works well with text alignment.
+To apply a vertically centered line to a heading, add the `.uk-heading-line` class and place a `<span>` element inside the heading element. You can combine it with any size modifier, and it works well with text alignment.
 
 ```html
 <h1 class="uk-heading-line"><span></span></h1>

docs/pages/parallax.md

@@ -44,13 +44,13 @@ You can use the following options to animate a number of CSS property.
 | `sepia`            | Animate the sepia filter.          | `%`               | `0`           |
 | `stroke`           | Animate strokes within SVG images. |                   | `0`           |
 
-The value can define any allowed unit type, e.g. `x: 20vw`. For some options, the unit of a value can be left out. It will be mapped to the default unit. For example, `x: 200` is the same like `x: 200px`.
+The value can define any allowed unit type, e.g. `x: 20vw`. For some options, the unit of a value can be left out. It will be mapped to the default unit. For example, `x: 200` is the same as `x: 200px`.
 
 ***
 
 ## Start and end values
 
-Options are always animated from their default start value to the target value you set in the option. However, you can also define a start value yourself. This is done by passing two values separated by comma.
+Options are always animated from their default start value to the target value set in the option. However, you can also define a start value yourself. This is done by passing two values separated by comma.
 
 ```html
 <div uk-parallax="opacity: 0,1">...</div>
@@ -67,7 +67,7 @@ Options are always animated from their default start value to the target value y
 
 ### Multiple steps
 
-You can define multiple steps for a property by using a comma separated list of values.
+Define multiple steps for a property by using a comma separated list of values.
 
 ```html
 <div uk-parallax="x: 0,50,150">...</div>
@@ -164,7 +164,7 @@ To adjust the easing of the animation, add the `easing` option. `0` transitions
 
 ## Colors
 
-You can also transition from one color to another, for example for borders, backgrounds or text colors. Define colors using `rgb()` definitions, color keywords or hex values.
+Transition from one color to another, for example for borders, backgrounds or text colors. Define colors using `rgb()` definitions, color keywords or hex values.
 
 ```html
 <div uk-parallax="border-color: #00f,#f00">...</div>

docs/pages/scrollspy.md

@@ -4,7 +4,7 @@
 
 ## Usage
 
-The Scrollspy component listens to page scrolling and triggers events based on the scroll position. For example, if you scroll down a page and an element appears in the viewport for the first time, you can trigger a smooth animation to fade in the element. Just add the `uk-scrollspy` attribute which takes the following options.
+The Scrollspy component listens to page scrolling and trigger events based on the scroll position. For example, if you scroll down a page, and an element appears in the viewport for the first time, you can trigger a smooth animation to fade in the element. Just add the `uk-scrollspy` attribute which takes the following options.
 
 Typically, classes from the [Animation component](animation.md) are used together with the Scrollspy component.
 

docs/pages/svg.md

@@ -24,9 +24,9 @@ Using the `uk-svg` attribute also allows you to inject a symbol from the SVG fil
 <img src="../assets/uikit/tests/images/icons.svg#cloud-upload" width="40" height="40" uk-svg>
 ```
 
-**Note** SVGs will adapt the current color for their stroke and fill color. To prevent this behavior, you can add the `.uk-preserve` class to the SVG itself or the elements inside the SVG.
+**Note** SVGs will adapt the current color for their stroke and fill color. To prevent this behavior, add the `.uk-preserve` class to the SVG itself or the elements inside the SVG.
 
-Inline SVG images can also be loaded lazy using the the [Image component](image.md#inline-svg).
+Inline SVG images can also be lazy loaded using the the [Image component](image.md#inline-svg).
 
 ***
 

docs/pages/toggle.md

@@ -72,8 +72,6 @@ The Toggle component allows you to add animations to items when toggling between
 <div id="toggle-animation" class="uk-card uk-card-default uk-card-body uk-margin-small">Animation</div>
 ```
 
-***
-
 ### Multiple animations
 
 You can also apply multiple animations from the [Animation component](animation). That way you can add different in and out animations.
@@ -88,8 +86,6 @@ You can also apply multiple animations from the [Animation component](animation)
 <div id="toggle-animation-multiple" class="uk-card uk-card-default uk-card-body uk-margin-small">Animation</div>
 ```
 
-***
-
 ### Queued animations
 
 When toggling multiple items with an animation, you might want to wait until the first animation has run through before animating the second item in. To do so, just add the `queued: true` option to the `uk-toggle` attribute.
@@ -130,11 +126,9 @@ A toggle can be triggered in different ways. Just add the `mode` option to the `
 <p id="toggle-hover">What's up?</p>
 ```
 
-***
-
 ### Media
 
-When using the `media` mode, the `media` option with one of possible values has to be added as well. For example, add a number in pixel, e.g. `640`, or a breakpoint, e.g. `@s`, `@m`, `@l` or `@xl`. Without the `target` option, the toggle applies the toggled state to itself. So it will switch between the different states that are defined in the `cls` option depending on the viewport width that it is displayed on.
+When using the `media` mode, the `media` option with one of possible values has to be added as well. For example, add a number in pixels, e.g. `640`, or a breakpoint, e.g. `@s`, `@m`, `@l` or `@xl`. Without the `target` option, the toggle applies the toggled state to itself. This means it will switch between the different states that are defined in the `cls` option depending on the viewport width that it is displayed on.
 
 ```html
 <!-- The primary modifier will only be applied on large screens -->