Sass & CSS

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.

Installing Dependencies

In the root of the project folder, run npm install to install the dependencies.

Compiling Sass into CSS

To compile CSS, run gulp fractal:build.

Use gulp fractal:start 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).

Sass Structure

You’ll find the Sass files in /src/scss. It uses the following structure:

  • Utilities - for things like variables, mixins and helper classes
  • Legacy - includes older CSS from modmore.com
  • Base - CSS reset and base typography styles
  • Elements - global CSS for things like forms and tables
  • Layout - layout related CSS

Component specific CSS is found in components/*/*.

Compiling JavaScript

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/.