css kit for ccs projects
npm install ccs-frontend-kit
$ 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:
`
...
``