The component library consists of components, each of which have their own Sass file. All these Sass files are compiled and combined into the css file used in production, so that the library is always up to date with the site itself.
In the root of the project folder, run npm install to install the dependencies.
To compile CSS, run gulp build.
Use gulp while developing.
This will compile the Sass files in both /src/scss/ and components/*/*. The former directory includes the base CSS (resets, settings, typography) and latter includes component specific CSS.
Autoprefixer is configured to the last 2 versions, and writes source maps for easier debugging.
Edit /src/scss/fractal.scss for pattern library specific CSS (such as displaying site colours).
You’ll find the Sass files in /src/scss. It uses the following structure:
Component specific CSS is found in components/*/*.
Source javascript files are located in /src/js/. Use gulp js to run jshint, concat and uglify them before outputting to scripts.min.js in /assets/js/.