This project uses node.js and npm scripts to automate build processes. I tried to keep the number of dependencies low. Here are the node packages I found useful:
- node-sass compiles the SCSS files into CSS for distribution.
- postcss allows post-processing of the compiled CSS.
- autoprefixer is the only post-compile process used on the CSS.
- nodemon makes it possible to run a watch script during stylesheet development.
- The SCSS files are linted prior to compilation using stylelint. The specific style rules I use are defined in the package.json file.
- The webfont package converts individual SVG icon files into the tyicons font.
- I use glob with terser to minify all files in a directory location.
Build Tools for Documentation
In addition to the tools used to build Tyfy, there are packages I chose to create these documentation pages.
- I wanted simple HTML files for documentation. However, to make development easier I needed the ability to create HTML includes for common page elements like the header and footer. The templatesjs package, while capable of much more, allows me compile page fragments with include statements into finished HTML files.
- I use fractal to implement the design of the documentation pages. Fractal is a tool for creating a component library for a design system. I wanted to learn about Fractal so I decided to use it for this project.