Amiable Theme Notes and Discussion

Submitted by micahw156 on Sat, 08/01/2020 - 02:42

Here are my original notes regarding the Amiability theme for Human Kindness Online. Both current project platforms have (the same) base theme in web/themes/custom/amiability and their own site theme under web/sites/default/themes which would be the themes you'd want to enable.

I chose the name Amiability for the base theme, because amiable is a synonym for kindness, and we want our base theme to be kind and friendly to developers trying to build on top of it.

The idea behind Amiability is that it should provide all the basic structure we need, but not have any opinionated styles in it. I got that word from the pull request that removed the base font-family from normalize.css. In the past, we've discussed and debated css file naming and structure quite a bit, and it's still an open question. In the past, I've mentioned the Zen theme as a possible guide, but I'm not sold on it any more.

The structure I created tonight is loosely based on Bartik. It is the default theme in Drupal, and it's got a lot going for it. The other theme in core, Umami, has some interesting choices, too. They're both based on Classy, which wants to go away. Before we go too far in any direction, we should take a peek at the structure defined by the libraries files for these two themes. They kinda make sense.

Also, while researching tonight, I found out two cool things about theme libraries files:

  • If you define a library in this file and don't mention it in the info.yml file, it won't load globally. (Which kinda turned out to be my problem with stable9/normalize.) You can load your non-global libraries from twig or a hook, so that's cool.
  • I noticed that the Umami theme loads its web fonts in a separate library from its global style definitions. Based on my muddling around with library-overrides the past few days (which wasn't my solution for normalize) it makes total sense to break things up like this and not dump all your setup in one library. Each library defined in a base theme can be completely overridden in a sub-theme.

Ok, so that's a lot for 2:30am, but it's starting to make sense to me.

Comments

micahw156

Wed, 08/05/2020 - 09:42

See my note (and the commit to normalize.css that I linked above) for what I mean about "opinionated."

I went looking for that, because while trying to make stable and stable9 work as base themes in both Drupal 8 and Drupal 9, I noticed that normalize.css 3.0.3 sets a base font (sans-serif) and normalize.css 8.0.1 does not, so I went looking to find out why.

That commit really helped me clarify what normalize.css does, and why stuff we've added to our own normalize.css in previous themes actually belongs somewhere else. Given the examples from Bartik and Seven, I'd say anything you're tempted to put in normalize.css for Amiable belongs in elements.css instead.