Skip to content

Commit

Permalink
Merge branch 'feature/3.1.0' into develop
Browse files Browse the repository at this point in the history
  • Loading branch information
@saschadube
saschadube committed Apr 17, 2019
2 parents d8edc12 + 7b36013 commit 9977bfc
Show file tree
Hide file tree
Showing 10 changed files with 259 additions and 129 deletions.
18 changes: 18 additions & 0 deletions docs/images/strokes.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 32 additions & 0 deletions docs/pages/animation.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ Add one of the `.uk-animation-*` classes to any element. The animation is shown
| `.uk-animation-slide-top-medium`<br> `.uk-animation-slide-bottom-medium` `.uk-animation-slide-left-medium`<br> `.uk-animation-slide-right-medium` | The element fades and slides in from the top, bottom, left or right with a medium distance which is specified by a fixed pixel value. |
| `.uk-animation-kenburns` | The element scales very slowly up without fading in. |
| `.uk-animation-shake` | The element shakes. |
| `.uk-animation-stroke` | The SVG element strokes are drawn. |

To toggle an animation on hover or focus, add the `.uk-animation-toggle` class to a parent element. Also add `tabindex="0"` to make the animation focusable through keyboard navigation and on touch devices.

Expand Down Expand Up @@ -281,3 +282,34 @@ By default the animation starts on page load. In this example we used the [Scrol
</div>
</div>
```

***

## SVG Strokes

The Animation component can be used to animate SVG strokes. The effect looks like the SVG strokes are drawn before your eyes. The SVG image has to be injected into the markup as an inline SVG. This can be done manually or using the [SVG component](svg.md).

The following example shows how to add the inline SVG manually. Since you have to know the exact length of the stroke, UIkit requires you to set the length in the custom property `--uk-animation-stroke`. In this example the stroke length is `46`.

```html
<svg class="uk-animation-stroke" style="--uk-animation-stroke: 46;" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="#000" stroke-width="1" d=""/>
</svg>
```

A much easier way is to use the [SVG component](svg.md) by adding `uk-svg="animation-stroke: true"` to the image element. It will calculate the stroke length and add the `--uk-animation-stroke` custom property automatically.

```html
<img src="" uk-svg="animation-stroke: true">
```

```example
<div class="uk-child-width-1-2@m uk-text-center" uk-grid>
<div class="uk-animation-toggle" tabindex="0">
<img class="uk-animation-stroke" width="400" height="400" src="images/strokes.svg" alt="" uk-svg="stroke-animation: true">
</div>
<div class="uk-animation-toggle" tabindex="0">
<img class="uk-animation-stroke uk-animation-reverse" width="400" height="400" src="images/strokes.svg" alt="" uk-svg="stroke-animation: true">
</div>
</div>
```
45 changes: 21 additions & 24 deletions docs/pages/heading.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,35 @@

<p class="uk-text-lead">Define different styles for headings.</p>

## Heading primary
## Size modifiers

To emphasize a heading with an alternative styling, for example a larger font size or a different color, add the `.uk-heading-primary` class. Usually, you would use this class on a `<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.

```html
<h1 class="uk-heading-primary"></h1>
```

```example
<h1 class="uk-heading-primary">Heading Primary</h1>
```

***

## Heading hero

You can further enlarge or highlight a heading, for example when using it inside a hero section. Just add the `.uk-heading-hero` class.
| 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. |

```html
<h1 class="uk-heading-hero"></h1>
<h1 class="uk-heading-medium"></h1>
```

```example
<h1 class="uk-heading-hero">Heading Hero</h1>
<h1 class="uk-heading-small">Small</h1>
<h1 class="uk-heading-medium">Medium</h1>
<h1 class="uk-heading-large">Large</h1>
<h1 class="uk-heading-xlarge">XLarge</h1>
<h1 class="uk-heading-2xlarge">2XLarge</h1>
```

***

## Heading divider
## Divider modifier

To apply a divider to a heading, add the `.uk-heading-divider` class. You can combine this with one of the heading classes from the [Base component](base.md#headings).
To apply a divider to a heading, add the `.uk-heading-divider` class. You can combine it with any size modifier.

```html
<h1 class="uk-heading-divider"></h1>
Expand All @@ -44,9 +42,9 @@ To apply a divider to a heading, add the `.uk-heading-divider` class. You can co

***

## Heading bullet
## Bullet modifier

To apply a bullet to a heading, add the `.uk-heading-bullet` class. You can combine this with one of the heading classes from the [Base component](base.md#headings). This modifier also 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>
Expand All @@ -58,9 +56,9 @@ To apply a bullet to a heading, add the `.uk-heading-bullet` class. You can comb

***

## Heading line
## 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 this with one of the heading classes from the [Base component](base.md#headings). This modifier also 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>
Expand All @@ -73,4 +71,3 @@ To apply a vertically centered line to a heading, add the `.uk-heading-line` cla
<h1 class="uk-heading-line uk-text-right"><span>Heading Line</span></h1>
```

8 changes: 8 additions & 0 deletions docs/pages/image.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,14 @@ The `width` and `height` attributes are required so an empty placeholder can be
<img data-src="images/light.jpg" width="1800" height="1200" alt="" uk-img>
```

### Inline SVG

To lazy load SVG images which are injected as inline SVG using the [SVG component](svg.md), make sure to apply the `data-src` option in the component attribute and not as data attribute.

```html
<img width="" height="" alt="" uk-img="data-src:" uk-svg>
```

***

## Srcset
Expand Down
40 changes: 21 additions & 19 deletions docs/pages/margin.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
Add one or more of the following classes to any element to create the same vertical and/or horizontal margin that a paragraph usually has.

| Class | Description |
|:--------------------|:---------------------------------------------------------------------------------|
| :------------------ | :------------------------------------------------------------------------------- |
| `.uk-margin` | Adds top margin, if it is preceded by another element, and always bottom margin. |
| `.uk-margin-top` | Adds top margin. |
| `.uk-margin-bottom` | Adds bottom margin. |
Expand All @@ -30,7 +30,7 @@ Add one or more of the following classes to any element to create the same verti
Add one of the following classes to add small spacing to block elements.

| Class | Description |
|:--------------------------|:---------------------------------------------------------------------------------------|
| :------------------------ | :------------------------------------------------------------------------------------- |
| `.uk-margin-small` | Adds small top margin, if it is preceded by another element, and always bottom margin. |
| `.uk-margin-small-top` | Adds small top margin. |
| `.uk-margin-small-bottom` | Adds small bottom margin. |
Expand All @@ -49,7 +49,7 @@ Add one of the following classes to add small spacing to block elements.
Add one of the following classes to add medium spacing to block elements.

| Class | Description |
|:---------------------------|:----------------------------------------------------------------------------------------|
| :------------------------- | :-------------------------------------------------------------------------------------- |
| `.uk-margin-medium` | Adds medium top margin, if it is preceded by another element, and always bottom margin. |
| `.uk-margin-medium-top` | Adds medium top margin. |
| `.uk-margin-medium-bottom` | Adds medium bottom margin. |
Expand All @@ -68,7 +68,7 @@ Add one of the following classes to add medium spacing to block elements.
Add one of the following classes to add large spacing to block elements.

| Class | Description |
|:--------------------------|:-----------------------------------------------------------------------------------|
| :------------------------ | :--------------------------------------------------------------------------------- |
| `.uk-margin-large` | Adds large margin, if it is preceded by another element, and always bottom margin. |
| `.uk-margin-large-top` | Adds large top margin. |
| `.uk-margin-large-bottom` | Adds large bottom margin. |
Expand All @@ -87,7 +87,7 @@ Add one of the following classes to add large spacing to block elements.
Add one of the following classes to add very large spacing to block elements.

| Class | Description |
|:---------------------------|:------------------------------------------------------------------------------------|
| :------------------------- | :---------------------------------------------------------------------------------- |
| `.uk-margin-xlarge` | Adds larger margin, if it is preceded by another element, and always bottom margin. |
| `.uk-margin-xlarge-top` | Adds larger top margin. |
| `.uk-margin-xlarge-bottom` | Adds larger bottom margin. |
Expand All @@ -105,15 +105,17 @@ Add one of the following classes to add very large spacing to block elements.

Add one of the following classes to remove margin from block elements.

| Class | Description |
|:-----------------------------|:-----------------------------------------------------------|
| `.uk-margin-remove` | Removes all margins. |
| `.uk-margin-remove-top` | Removes top margin. |
| `.uk-margin-remove-bottom` | Removes bottom margin. |
| `.uk-margin-remove-left` | Removes left margin. |
| `.uk-margin-remove-right` | Removes right margin. |
| `.uk-margin-remove-vertical` | Removes all vertical margins. |
| `.uk-margin-remove-adjacent` | Removes the top margin of the directly succeeding element. |
| Class | Description |
| :------------------------------ | :--------------------------------------------------------- |
| `.uk-margin-remove` | Removes all margins. |
| `.uk-margin-remove-top` | Removes top margin. |
| `.uk-margin-remove-bottom` | Removes bottom margin. |
| `.uk-margin-remove-left` | Removes left margin. |
| `.uk-margin-remove-right` | Removes right margin. |
| `.uk-margin-remove-vertical` | Removes all vertical margins. |
| `.uk-margin-remove-adjacent` | Removes the top margin of the directly succeeding element. |
| `.uk-margin-remove-first-child` | Removes the top margin of the first child element. |


```html
<h1 class="uk-margin-remove"></h1>
Expand All @@ -126,7 +128,7 @@ Add one of the following classes to remove margin from block elements.
Add one of the following classes to set auto margin. This can be useful to center or otherwise align block elements with a fixed width as well as flex elements.

| Class | Description |
|:---------------------------|:------------------------------------------------------------------------------------|
| :------------------------- | :---------------------------------------------------------------------------------- |
| `.uk-margin-auto` | Sets left and right margin to auto, horizontally centering block and flex elements. |
| `.uk-margin-auto-top` | Sets top margin to auto, pushing block and flex elements to the bottom. |
| `.uk-margin-auto-bottom` | Sets bottom margin to auto, pushing block and flex elements to the top. |
Expand Down Expand Up @@ -176,10 +178,10 @@ To add spacing to stacking elements, for example inline elements that wrap on sm

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. [Learn more](javascript.md#component-configuration)

| Option | Value | Default | Description |
|----------------|--------|-----------------|------------------------------------------------------------------------------------------------------------|
| `margin ` | String | uk-margin-small-top | This class is added to items that break into the next row, typically to create margin to the previous row. |
| `first-column` | String | uk-first-column | This class is added to the first element in each row. |
| Option | Value | Default | Description |
| -------------- | ------ | ------------------- | ---------------------------------------------------------------------------------------------------------- |
| `margin ` | String | uk-margin-small-top | This class is added to items that break into the next row, typically to create margin to the previous row. |
| `first-column` | String | uk-first-column | This class is added to the first element in each row. |

***

Expand Down
Loading

0 comments on commit 9977bfc

Please sign in to comment.