CCS-Frontend-Kit

Npm package that contains all the styles and assets of the CCS website.
This is so that any new projects can import the same css and keep the styles consistent across all applications in CCS.

 

$3

``
$ mkdir [name of your project]
$ cd [name of your project]
$ npm init
$ npm install sass
`
 

$3

`
$ npm install ccs-frontend-kit
`
`
check node_modules to find ccs-frontend-kit package
`
 

$3

At the root of your project:
`
$ mkdir Assets
`

Copy fonts, images and scripts into your Assets folder:
`
$ cp -R ./node_modules/ccs-frontend-kit/Assets/fonts ./Assets/fonts
$ cp -R ./node_modules/ccs-frontend-kit/Assets/images ./Assets/images
$ cp -R ./node_modules/ccs-frontend-kit/Assets/scripts ./Assets/scripts
`
(You can also add a script for this copy to package.json)

 




$3


`
$ cp -R ./node_modules/govuk-frontend/govuk ./Assets/scripts/govuk
`
 

$3

`
$ cd Assets && mkdir styles
$ cd styles
$ touch main.scss
`
Add the following line inside main.scss:
`
@import "../../node_modules/ccs-frontend-kit/Assets/styles/styles.scss";
`
If needed, modify this path so that it correctly points to the imported file.

 

$3

Add the following script to package.json:
`
"compile": "cd ./Assets/styles && sass main.scss main.css"
`
`
$ npm run compile
`

If there are errors during this compile
edit the import for govuk-frontend/govuk/all
from inside the ./node_modules/ccs-frontend-kit/Assets/styles/styles.scss,
so that it points to the file correctly.

 




$3


At the root of your project
`
$ touch index.html
`

Inside the tag, add a link tag pointing to your compiled main.css:
`

`

Add these scripts at the bottom of the tag:
`

...





``
Find and test a component by copying its markdown from https://gov.uk website.