Overview

Starting the project

Development


// Install
yarn install

// Compile all components and generate all assets
build:styleguide:dev

// Open styleguide at localhost:3000 & watch for changes
start:styleguide

Production


// This will get rid of superfluous javascript files automatically generated by webpack
// as well as minify the CSS
prepare:prod

Node scripts list

  • clean:CSSchunks: Gets rid of JS superfluous files generated by webpack. Used for production only.
  • clean:assets: Empties public directory.
  • generate:tokens: Generates Design Tokens in SCSS and JSON formats.
  • generate:CSSDocs: Generates a fully functioning CSS documentation using SASSDOC.
  • zip:assets: Zips everything in the public folder.
  • build:assets:dev: Regenerates the public folder.
  • build:styleguide:dev: Regenerates the public folder and builds fractal DIST for development
  • prepare:prod": Regenerates the public folder, cleans unused webpack JS files, minifies CSS, zips everything and builds Fractal DIST for production
  • start:styleguide: Fires up fractal and watch for changes.

Adding features

If you are to add certain features to this styleguide, consider adding your scripts in the config/helpers/ folder.
Assets zip and SASSDOC generation scripts, for instance, are located there.

Config paths

At the root of the project, inside the config folder, the config.js file contains a "paths" object with folder names of all major folders used throughout the styleguide and its documentation. 


paths : {
	configFolder: "config",
	tokensFolder: "design-tokens",
	generatedTokensFolder: "design-tokens-generated-config",
	...
 }

This is used to build paths in all config files, from the webpack config to the token documentation and is also referenced in fractal's component configs.
Please add any folder used throughout the styleguide to the "paths" object and use it to build paths.

Building paths

Use nodejs's "path" module to build a path to an asset.
For convenience, a local path object was created inside the webpack.config.js and docs.config.js files.

Referencing paths in components

See adding a component for more info.

Adding resources through Webpack.

Find the webpack.config.js file at the root of the project, find CopyPlugin inside the plugins array and add your resources.

Resources can be added by defining a glob pattern or as single files.
The from property are the files to copy.
The to property is the output path, relative to the public folder. 


new CopyPlugin({
	patterns: [
		{ from: PATHS.MEDIA_PATH, to: config.paths.mediaFolder },
		{ from: PATHS.FONTS_PATH, to: config.paths.fontsFolder },
		{ from: PATHS.LIBS_PATH, to: config.paths.libsFolder },
		{ from: path.join(config.paths.nodeModules, "prismjs/themes/prism.min.css"), to: 'sassdoc/assets/css/prism.min.css' },
		{ from: path.join(PATHS.JS_PATH, "styleguide-overrides"), to: path.join(config.paths.scriptsFolder, "styleguide-overrides") }
	]
})
Webpack plugin page.

Adding assets to fractal UI

All resources have to be added to the public folder through webpack. For more info or a refresher on that see the webpack section.

All resource paths are relative to the public folder.

Resources
Javascript Go to fractal.config.js, find the myCustomisedTheme constant and add the needed resources inside the script tag.
CSS Go to fractal.config.js, find the myCustomisedTheme constant and add the needed resources inside the styles tag.
compilation issues (to be resolved)

Changelog

To be added later.