Replacing Ruby with CSS Grid on shivjm.name
As I mentioned when I explained how I built shivjm.name, the Ruby elements I used are limited in their styling. I always ignored the fact that Firefox exhibits an annoying deviation:
For all I know, however, this is correct. Since Ruby doesn’t offer much flexibility anyway, I switched to using CSS Grid. Here’s the HTML I wrote (the BEM approach isn’t necessary, just habitual):
HTML<p class="name">
<span class="name__name name__name--given">Shiv</span>
<span class="name__punctation"> </span>
<span class="name__annotation name__annotation--given">(given name)</span>
<span class="name__punctation"> </span>
<span class="name__name name__name--family">Jha-Mathur</span>
<span class="name__punctation"> </span>
<span class="name__annotation name__annotation--family">(family name)</span>
</p>
Because of the name__punctuation
span
s, this produces readable text without CSS:
Shiv (given name) Jha-Mathur (family name)
I wanted it to become a 2×2 grid with the annotations coming first. Changing visual order is usually
inadvisable, but it seems acceptable in this simple scenario. Screenreaders read it in the source
order, which might at most momentarily confuse a sighted user watching the focus zig-zag across the
four cells of the grid. I laid it out using grid-template-rows
and grid-row
:
CSS.name {
display: grid;
grid-template-rows: [annotation] auto [name] auto;
}
.name__annotation {
grid-row-start: annotation;
}
.name__name {
grid-row-start: name;
}
And I was done! Well, I also had to add font sizes, borders, alignment, and padding like in the Ruby version. But then I was done:
This doesn’t hide the parentheses and tweaks the spacing and sizing, in line with my current
preferences. Other than that, I believe I’ve achieved the same effect. Note that my initial Merge
Request unnecessarily went to great
lengths to hide the spacing span
s. I later removed those rules.
On an unrelated note, the TinyCSS Eleventy plugin that I use to inline the CSS no longer works after upgrading from Eleventy v0.12.1 to v1.0.2. The error from the deploy logs is:
[Error: ENOENT: no such file or directory, open '_site/assets/styles/index.css'] { errno: -2, code: 'ENOENT', syscall: 'open', }
I believe it’s trying to access the referenced file before the output directory is created. That doesn’t make a lot of sense, since I didn’t touch my configuration and I’m following the example in the README. I also upgraded the plugin itself from v1.5.0 to v2.0.0, to no avail. I ended up removing the plugin altogether.