UIkit 3.1 – SVG Stroke Animation and Updated Heading Component
Today we are excited to introduce UIkit 3.1. It's the first feature release since UIkit 3 became stable and comes with two new features – SVG stroke animations and an updated Heading component. We also put some thoughts into how the upcoming releases will reflect the transition from UIkit 3 to UIkit 4.
Deprecated Variable
Since UIkit 3 is feature complete, our current focus is on refactoring and improving existing components. Unfortunately, this includes changing existing HTML classes. To make the transition as smooth as possible we introduced a deprecated variable.
By default, the deprecated variable is set to false, so all deprecated classes are not included in the CSS. If you want to update your markup later and use the deprecated classes along the new ones, set the variable to true in your custom UIkit theme. This makes it possible to add new classes without removing the old ones right away. The CSS file size will slightly increase, but it will also guarantee that nothing breaks, and you can update the markup in your own pace.
@deprecated: true;
Heading Component
The first component we refactored is the Heading component. In the past it only had two size modifiers, now there are five: Small, Medium, Large, Xlarge and 2Xlarge. The old Primary and Hero classes are deprecated. To update your markup, just replace the following classes.
| Deprecated | New |
|---|---|
uk-heading-primary |
uk-heading-medium |
uk-heading-hero |
uk-heading-xlarge |
SVG Stroke Animations
We added an option to animate SVG strokes to the Animation and the Parallax components. The stroke animation looks like the SVG is being drawn before your very eyes.
The SVG image has to be injected into the markup as an inline SVG. For the Animation component, simply add uk-svg="animation-stroke: true to the image element. The stroke length will be automatically calculated. If you animate strokes in the Parallax component, you can use the percent unit e.g.100% without knowing the exact length of the stroke.
What's Next
The focus on refactoring and improving existing components of the upcoming UIkit 3 releases is the first step towards UIkit 4. We recommend adapting deprecated markup regularly. This will help make the transition from UIkit 3 to UIkit 4 easier. Parts of UIkit 4 are already in the works, and the heavy development will start late summer.
We are always glad to receive feedback, so if you have any ideas or wishes for UIkit 4, please let us know in Discord chat or the comments below.
