Build and document SMACSS/BEM modules

support
1

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.

Examples: http://styleguides.io/examples.html

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:

2

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.

3

Thanks.

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

4

Can you give an example of what you mean?

5

https://www.lightningdesignsystem.com/components/tabs/

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

6

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

7

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

8

The issue is line 1 of file https://github.com/nqthqn/mauxy/blob/master/data/scss/button.scss

How is that file being called?

9

This file:

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

In use here:

10

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
11

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

12

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