Learning how UIkit implements grids
UIkit describes itself as a lightweight and modular CSS framework for developing fast and powerful web interfaces. UIkit is developed by the people at YOOtheme, a Hamburg-based company that specializes in developing themes for WordPress and Joomla. Since the initial release of UIkit 3 in January 2017, it has received regular updates and is currently on version 3.16, as of February 2023.
We can see the landing page of UIkit’s website in the following screenshot:
Figure 8.11 – UIkit’s landing page
UIkit takes a drastically different approach to defining grids. Its usage of JS and attribute selectors allow us to build a grid with attributes defined on the container. To mark an element as a grid container, we apply the uk-grid attribute to the element:
<div uk-grid> <div>A</div> <div>B</div> <div>C</div> ...