On the front end, the project uses npm as package manager and task runner (with tasks as npm scripts) and webpack as a module and asset bundler. In addition, relevant webpack plugins perform common build tasks, e.g. autoprefixing and minification.
The packages and tasks employed are defined in package.json file. The webpack configuration is broken down into two files: webpack.parts.js which specifies various build tasks (mostly using plugins) and webpack.config.js which combines the tasks into two main workflows: development and production.
The project uses HTML5 as well as template engines specific to CMS, framework or other back-end technology it is used with, e.g. Twig for Craft CMS.
Additionally, this styleguide uses Markdown for Guidelines pages, Twig for documenting components and JavaScript for configuration files.
The project uses Tailwind CSS for styling the templates and this styleguide.
In addition, it uses Sass primarily to enable modularised structure and allow for wildcard inclusions of CSS partials.
The project uses JavaScript which is available in its most recent editions, thanks to Babel compiler. On top of this and mostly for legacy purposes, jQuery is available.
The project uses a customised version of Fractal design system generator. Documentation is divided into four major areas: Guidelines, Elements, Blocks and Templates.
The styleguide can be run in two modes: development, as a standalone application running on http://localhost:3000 (or the next available port - refer to the command line information when running Fractal in the development mode), and build that compiles all the pages into static HTML and outputs them in web/styleguide folder.
For details on how to set up and run the styleguide see Setup section.