I’m currently using tachyons (functional css library) for a project. With a library like tachyons, you basically write styles inline (this isn’t 100% accurate, but that’s generally how it works). You can imagine this may yield a lot of redundant styles. Thus, it’s highly encouraged that you build composable wrappers similar to React components.
How can I achieve this in Hugo? Specifically in a layout? I have taken a look at partials, but they don’t support wrapping. Blocks work, but it’s limited in terms of choosing multiple templates from anywhere, anyhow. It’s not that composable.
In Hugo like you said there are block templates, partials and if you need to call special classes on a per post basis there are also frontmatter parameters that you can call in a template if they exist.
Unless you mean that you’re not a fan of functional css, this workflow is actually standard when working with tachyons.
A good example is sharing link styles. Instead of having to copy and paste the class names for multiple anchor tags, in React, we create a component that holds these styles and render out the text that we put in. I think you can already do this with partials, but they fall short when we try to pass in elements (if someone could verify this, it would be great) for container/wrapper styles.
I’ve considered content types as well, but it’s still fairly limited. Something like shortcodes for templates is what I’m looking for. Something composable and not limited to a page.
@bryankang I’m not certain at what you’re looking for, but I’m a big fan of Tachyons. Here are a few things I do with them (which are not specific to Tachyons, but are beneficial to using them):
One: Assign sets of classes in a data file or config. Arguably, you could do this with a post-processing workflow, but I find this is simple and flexibile:
For example, in data/globals.yaml or in your config:
box_styles: "bg-white gray mb3 ph4 pv3"
and in a template, something like: {{.Site.Data.globals.box_styles}}
Two: Assign class names through the dict function in a partial:
In a partial (I often create a folder in my partials called “components” and put stuff like this in it):
Of course, you can create simple variables with class names to reuse them, or whatever works best for you. Overall, the combination of Hugo and Tachyons makes for an extremely efficient workflow. Hope that helps!
@budparr Your first approach sounds incredibly awesome. It actually inspired me to think of another approach using @extend in sass. The only issue I see with these, or css in general, is that accidentally overriding a class name may yield unexpected results due to how cascading works in css. But that’s a different story altogether, although worth nothing.
I work with Tachyons as well and solved it this way:
In my config.yml I have under params: a section combos:
combos:
message: bg-navy pa4 white tc lh-large
codeblock: bg-maroon white-40 center br3
code: bg-yellow ph1
code_w_bg: bg-gray pa1
article: bg-dark-blue w-50 center
I call these in the template, partial or shortcode with class="{{ .Site.Params.combos.code }}".
Works like a charm. Important to know: In the combos should be only the absolut general styles so that you can for example use class="{{ .Site.Params.combos.code }} mt0 pl2". That’s just more flexible.
You can name the parts in config.yml also like their HTML pendants (e. g. h1, h2, p etc.).