April 17, 2019
Data attributes on HTML elements can be very handy for targeting certain elements with CSS and/or Javascript.
Let's say, for example, we have a site with a menu whose links have a different background colour depending on what category they belong to, cats or dogs. The HTML might look like this:
<ul class="menu"> <li class="menu-item"> <a…
Continue reading How to add title as data attribute to menu links in Drupal 8 and Twig
August 4, 2016
(Note that this technique is totally deprecated by Flexbox and CSS Grid, but it's interesting for historical purposes, I guess).
If you've ever tried to do it, you know that vertically centring elements in CSS is notoriously difficult. Horizontal centring is a relative breeze, but vertical is another story.
I often have a use-case where I want to vertically centre some text on top of an image,…
Continue reading How to vertically center text in an absolutely-positioned div over an image