Code setup

Setting up your web pages to use the Framework

For an initial setup follow these steps:

  1. Check the version of Framework being used by your project.

    If you are not currently running the latest version, then enquire about the possibility of upgrading either the page or journey you are working on; lead front-end developers will be able to advise on this.

    Also ensure that any designs supplied are compliant with the version of Framework available to you – for example, while this should have been addressed earlier in the process, if designs supplied are to v4 standards, and you only have v3 available, then the designs should be pushed back for review.

  2. Using the HTML structure as specified in the base template, insert the CDN folder path for the version of the Framework you are using.

    Important note: All of the files that you will need are available to link to on the CDN, please do not take any copies and store them locally.

  3. Following the designs you have been supplied with, or using the existing page being upgraded as a reference, use the Element Library documentation to find the components and accompanying HTML structures you need.

    Within the code examples provided (under the 'Code' tab), '...' is used where values can be filled in or where more content can be placed. Please ensure all these are removed when used; if there is no value available or required, remove the attribute or element completely.

    Tags such as [ Modifier ] have been used within the code examples to show where modifier classes can be added to change the style and/or behaviour of a component; please either replace the [ Modifier ] tags with the appropriate variant class(es) or remove them completely when creating your own markup.

    Important note: Always base your mark up on the code example, and do not copy and paste from any developer tools window or similar, as the latter is likely to include code restructured by JavaScript, so will not work as expected.

  4. Keep up to date on new releases. Please see our release log for details of any changes to the versions available for use.