As the focus of my work has shifted in large part from working on a WordPress website to designing the UI and writing the front-end code for web-based software I realised I’d need a single source of truth to document the components.
I started out just using a simple Gulp setup I’d cobbled together but having worked on a couple of projects I thought it was a good time to take stock of where I was and what I could improve, Key things were how to deal with versions and making the code more modular. After some reasearch I settled on Fractal.
Why Use Fractal?
Fractal is basically a static site generator geared up for creating component libraries. It’s fairly light touch and doesn’t feel like it enforces any particular work flow, I run Gulp side-by-side with it to process my CSS, JS and SVG icon files for each component into Fractal’s static folder, where it can be picked up using Fractal’s build command.
One of the coolest things Fractal does is allow you to build variations of a component without duplicating the code, it uses Handlebars and a .yml config file where you can specify the content or context of your component, meaning you can decouple the content from the code which makes things cleaner. Each component can be tagged, so you can mark them as WIP (Work in Progress) or Ready, this helps with communicating whether a component is safe to use. These statusses are configurable so you can make up your own. I added a Todo so I could build out the index of the component library first and make it obvious what components had no code yet at all.
Each component is stored in its own folder, to create a component you only need to create an .hbs file as a minimum but generally you’ll want more. The structure of my components mostly looks like this:
component-name
component.hbs
component.config.yml
__component.css
__component.js
_init.js
I prefix my CSS and JS files with a double underscore so that I can more easily sweep them up with Gulp for concatinating into single files.
It’s still early days but I feel this software will be immensely helpful in managing the components of our UI.