Build and document SMACSS/BEM modules

Hi, we currently use a tool called Fractal at work. It essentially allows you to write reusable components with HTML/CSS and has a build process that allows for easy embedding and previewing. So for example, I could build a little “+ Create Topic” button and put it inside of a “Create a new Topic” form.

This tool is not under active development, has a lot of node module dependancies. It is basically a static site generator with a few bells and whistles.


I am willing to lose some bells and whistles.

How might I accomplish a similar development and user experience using hugo? Generating a documentation site from well organized SCSS files and HTML templates. And being able to reuse them inside each other.

Discourse! :slight_smile:

I think partials will help you with this. A quote from its doc

Partials are smaller, context-aware components in your list and page templates that can be used economically to keep your templating DRY.


Can you iterate over all the partials and get links to render them individually?

Can you give an example of what you mean?

Where “tabs” would be a partial that I could demonstrate.

I see. I think you could use local file templates for this

Thanks! This worked great for a bit but now I am getting this funny error when running hugo server (give it a go)

~/code/mauxy on master*
↪ hugo server
Total in 1 ms
Error: Error building site: "/Users/nnichols/code/mauxy/data/scss/button.scss:1:1": unmarshal of format "" is not supported
~/code/mauxy on master*

I have done some googleing and did not see any Icon? files on my mac.

What the heck is format ""? I think the directoryindex shortcode is causing this when reading the scss directory

The issue is line 1 of file

How is that file being called?

This file:

Get’s read by this shortcode: (readDir then range)

In use here:

After researching this, looks like that error may happen when reading a file in the data dir (which is a reserved dir for data files). So first try saving your code snippets under a new dir name (outside of data dir).

1 Like

This solved it. Thank you! Could you share your research? How does readDir behave differently in that directory?

Sure. I was away from my laptop so couldn’t clone your repo to test. So when I googled your error message I got

1 Like