Construct page layouts with content blocks that extend the Scottish Government Design System.
If you need any help or want to give any feedback you can e-mail the Design System team at: designsystem@gov.scot.
We recommend installing the package using node package manager (npm).
To install your own local copy of the package follow these steps:
- Ensure you have node.js installed. We recommend using the latest Long Term Support (LTS) version, or a minimum of version 8.10.0.
- Run the command
npm install @scottish-government-design-system/content-blocks
in your chosen directory. This will install the project and its dependencies.
We recommend importing the Sass for content blocks separately, along with the Sass from the Scottish Government Design System.
If you already are using the Scottish Government Design System in your project then you only need to import the additional Sass for content blocks. To import the content block Sass into your project's Sass use:
@import "/path/to/node_modules/@scottish-government-design-system/content-blocks/src/content-blocks/all-content-blocks";
This must be imported after the Scottish Government Design System Sass.
Alternatively you may wish to generate a single CSS file to include in your project. These optimised CSS assets can be included in your project and they include the Scottish Government Design System CSS in the generated CSS files. You therefore don't need to include the design system separately in your project.
Run:
npm run sass-min
This will compile the various Sass files and update the contents of the /dist
directory with the newly generated compressed CSS file.
To create a non-compressed CSS file, run:
npm run sass