UIkit 3.1 – SVG Stroke Animation and Updated Heading Component

  • Sascha
  • UIkit

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 making 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.


Join Now