There are a few easy ways to get started with ID7.
Install with npm
ID7 is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.
Once downloaded, unzip the compressed folder to see the structure of (the compiled) ID7.
ID7 source code
fonts/ are the source code for our CSS, JS, and icon fonts (respectively). The
dist/ folder includes everything listed in the precompiled download section above. The
docs/ folder includes the source code for our documentation. Beyond that, any other included file provides support for packages and development.
ID7 uses Webpack for its build system, with convenient methods for working with the framework.
- Navigate to the root
/id7/directory, then run
npm i. npm will look at the
package.jsonfile and automatically install the necessary local dependencies listed there.
When completed, you'll be able to run the various npm commands that wrap webpack provided from the command line.
npm run start (Serve)
Serve the documentation website via Jekyll, and watch the Less and JS source files and automatically recompile them whenever you save a change.
npm run test (Run tests)
Should you encounter problems with installing dependencies or running webpack commands, first delete the
/node_modules/ directory generated by npm. Then, rerun
npm i. If you change the version of node, you will need to run
Start with this basic HTML template.
Copy the HTML below to begin working with a minimal ID7 layout.
It's important to include strong security headers when serving content to provide defence-in-depth against client-side attacks.
Content Security Policy is an effective measure to protect your site from XSS attacks. By whitelisting sources of approved content, you can prevent the browser from loading malicious assets.
In order for ID7 to work correctly, the following policy areas must be set:
||By default, only allow loading resources from the same hostname|
||We need to allow
||We load the Lato webfont from fonts.googleapis.com via a CSS import|
||Domain that the Lato webfont is downloaded from|
||This is for the account popover when clicking on the signed in users' name; on small screens this is loaded from websignon, on larger from My Warwick|
||To allow the My Warwick popover to work|
||Shouldn't be required; note that you will need to set this to
Feature Policy is a new header that allows a site to control which features and APIs can be used in the browser.
In order for the functionality of the My Warwick popover to work, a minimal
Feature-Policy header is:
feature-policy: accelerometer 'self' https://my.warwick.ac.uk; camera 'none'; geolocation 'none'; gyroscope 'self' https://my.warwick.ac.uk; magnetometer 'none'; microphone 'none'; payment 'none'; usb 'none'
There are a number of security headers that can be sent, securityheaders.com is an excellent auditing tool for them. A full set of security headers would look something like:
content-security-policy: default-src 'self'; img-src 'self' data:; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; script-src 'self'; frame-src 'self' https://websignon.warwick.ac.uk https://my.warwick.ac.uk; connect-src 'self' https://my.warwick.ac.uk; object-src 'none' feature-policy: accelerometer 'self' https://my.warwick.ac.uk; camera 'none'; geolocation 'none'; gyroscope 'self' https://my.warwick.ac.uk; magnetometer 'none'; microphone 'none'; payment 'none'; usb 'none' referrer-policy: strict-origin-when-cross-origin x-frame-options: DENY x-xss-protection: 1; mode=block x-content-type-options: nosniff x-permitted-cross-domain-policies: master-only
Browser and device support
ID7 is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.
Specifically, we support the latest versions of the following browsers and platforms. On Windows, we support Internet Explorer 9-11. More specific support information is provided below.
|Mac OS X||Supported||Supported||Supported||Supported|
Unofficially, ID7 should look and behave well enough in other browsers though they are not officially supported.
Internet Explorer 9
Internet Explorer 9 is also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by it.
|Feature||Internet Explorer 9|
|| Supported, with
Visit Can I use... for details on browser support of CSS3 and HTML5 features.
Even in some modern browsers, printing can be quirky. Our aim when printing is to give the most readable version of the content. We don't aim to represent the layout of the page exactly when it prints, which means that columns will stack on top of each other.