I’m working on a Hugo theme based on the Bulma CSS framework. This framework works with “CSS classes only”, i.e. although it’s possible to use standard HTML tags its concept is to use a Bulma-specific CSS class for styling the content.
HTML <h1>My heading</h1>
Bulma <h1 class="title is-1">My heading</h1>
Now if Hugo processes this markdown in a content file…
The only way I have been able to achieve this is to target the h1 (or other classes) inside the container class. Basically, copy the title and is-1 classes’ css, and paste that code into a new css class that targets “container h1”.
In a few cases, I’ve just written the content of the markdown file in whatever HTML I needed.
I probably didn’t explain well at all. In my opinion, recent css libraries like tachyons and probably others, cover the bases for most of classes and functions you’d need, for a basic site.
If I could cause hugo to add a specific class to some elements within my markdown pages, that would be really helpful.
For instance, if the library has a way to color text and background by adding classes like “red” and “bg-green” or something like that, it would be great if I could somehow say hugo, for any h1 here, add the class string “red bg-green”.
It is easy enough, though, to simply make a container div with some class, figure out what “red bg-green” from your library is doing, and make another custom class that applies to h1’s inside your container div.
Ok, had a few minutes to look at this. Conceptually, those “nested classes” are the same as the technique I mentioned. The ones included in Tachyons are a basic set, like a “starter kit”, but, you could easily add ones with similar naming convention, then bake them in, in the css build pipeline.
To wit, in case anyone needs the info, here’s what I do:
I put my cloned tachyons repo under a src folder in my project. Then after installing the npm modules inside there, I add any edits to:
… and edit /path/to/my/project/src/tachyons/package.json to write files to the right location under hugo’s static folder. Something like:
"start": "npm run build:watch",
"mutations": "immutable-css src/tachyons.css --strict",
"build": "npm run build:css && npm run build:minify && npm run build:css2 && npm run build:minify2",
"build:css": "tachyons src/tachyons.css > css/tachyons.css",
"build:css2": "tachyons src/tachyons.css > /path/to/my/project/static/css/tachyons.css",
"build:minify": "tachyons src/tachyons.css -m > css/tachyons.min.css",
"build:minify2": "tachyons src/tachyons.css -m > /path/to/my/project/static/css/tachyons.min.css",
"build:watch": "watch \"npm run build\" ./src/"
Then, an npm start lets me edit the css I mentioned, and it will re-build the end result file and save it (and a minified copy for production) to the right location under the hugo project. This way, you’re only referencing one file in your site’s source, instead 2 or 3.