UIkit 3.8 – Reworked Focus Style
Today we are happy to introduce UIkit 3.8. In this release we fundamentally changed the general focus style in UIkit. Additionally, we improved the usability of the Transition component in combination with the Position or Cover components. Let's jump right in.
Focus Style
The basic focus concept in UIkit was to use the same style when the element is focused as when it is hovered. But often the hover effect is subtle, so it was very hard to see which element is focused. With UIkit 3.8 we removed all individual focus styles across all components and instead added a general focus style to the Base components. It is a clearly visible dashed outlined border. We used the :focus-visible pseudo-class so the style is only applied when using the keyboard navigation. We have a nice fallback for the Safari browser which does not support this pseudo-class yet. Since we removed the individual focus styles, UIkit got 6% smaller in file size (gzipped) which is a nice side effect.
Transition, Position and Cover
It was not possible to use a transition class together with position center or cover classes on the same element. To make them work, two nested elements were needed in the HTML markup which was bugging us for quite some time. We refactored these components using custom properties which these days are available across all browsers. Now you can transition and center or cover the same element.
Next Steps
We know everyone is eagerly waiting for a life sign of UIkit 4, and we can't wait to share more details about it, but we still need some time. Many CSS components have been already prototyped for a long time, and we are currently working on the best strategies for UIkit in a CMS or page builder context, for example, in regard to loading times. We still have two YOOtheme Pro releases coming up this year, but once done, the whole team will focus on UIkit 4.
That's it for today. But we are always looking for your feedback, so let us know what you think about this release in the comments below.
