How to guides - Adding CSS, javascript and images

The prototype kit comes with standard HS2 frontend styles and components for you to use in your prototypes.

If you need to add your own CSS (Cascading Style Sheets), JavaScript or images, use the /app/assets folder.

The prototype kit processes all the files in the /app/assets folder, and puts the processed files in /public.

Do not change files in the /public folder because it’s deleted and rebuilt every time you make a change to your prototype.

CSS

CSS lets you change how web pages look, for example text sizes, colours or spacing.

To add universal styles use:

/app/assets/sass/main.scss

Styles can also be added to individual templates via the "customStyles" template block:

 <STYLE type="text/css"> body { background-color: pink; } </STYLE> 

Do not edit the file /public/styles/main.css because it’s deleted and rebuilt every time you make a change to your prototype.

The prototype kit uses Sass, which adds extra features to CSS.

Using import

If you have a very long main.scss file, you can split it up into multiple files and import those into main.scss. Use an underscore (_) at the start of the import file filenames, for example:

/app/assets/sass/_admin.scss

Import this file into your main.scss file without the underscore:

@import "admin";

JavaScript

You can use JavaScript to make changes to a web page without loading a new one. For example a user could enter some numbers, then JavaScript displays the results of a calculation without loading a new page.

To add JavaScript use:

/app/assets/javascripts/main.js

Do not edit the file /public/javascript/main.js because it’s deleted and rebuilt every time you make a change to your prototype.

Images

If you add images to /app/assets/images the prototype kit will copy them to /public.

For example if you add an image:

/app/assets/images/user.png

Use it in your page like this:

<img src="/images/user.png" alt="User icon">

Use ‘alt’ text to describe the image for screen readers.

Do not put files directly in /public because it’s deleted and rebuilt every time you make a change to your prototype.

Other files

If you need to use other files in your prototype, you can add them to /app/assets and the prototype kit will copy them to /public. You can use sub-folders in the assets folder.

For example if you add a PDF:

/app/assets/downloads/report.pdf

Link to it like this:

 <a href="/downloads/report.pdf">Download the report</a>

Do not put files directly in /public because it’s deleted and rebuilt every time you make a change to your prototype.