Skip to main content

ID7 Reference Site

Getting started

There are a few easy ways to get started with ID7.

Download

Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.

Download ID7

Source code

Source Less, JavaScript, and font files, along with our docs. Requires a Less compiler and some setup.

Download source

Install with npm

You can also install and manage ID7's Less, CSS, JavaScript, and fonts using npm:

$ npm i @universityofwarwick/id7@v2.9.11 --save

What's included

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.

Precompiled ID7

Once downloaded, unzip the compressed folder to see the structure of (the compiled) ID7.

ID7 source code

The ID7 source code download includes the precompiled CSS, JavaScript, images and font assets, along with source Less, JavaScript, and documentation. More specifically, it includes the following and more:

id7/
├── less/
├── js/
├── fonts/
├── images/
├── dist/
│   ├── css/
│   ├── js/
│   ├── fonts/
│   ├── images/
│   └── templates/
└── docs/

The less/, js/, and 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.

Compiling CSS and JavaScript

ID7 uses Webpack for its build system, with convenient methods for working with the framework.

Installing Webpack

To install webpack, you must first download and install node.js (which includes npm). npm stands for node packaged modules and is a way to manage development dependencies through node.js.

Then, from the command line:
  1. Navigate to the root /id7/ directory, then run npm i. npm will look at the package.json file 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.

Available commands

npm run build (Compile CSS and JavaScript)

Regenerates the /dist/ directory with compiled and minified CSS and JavaScript files. As an ID7 user, this is normally the command you want.

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)

Runs QUnit tests headlessly in PhantomJS.

Troubleshooting

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 npm rebuild.

Basic template

Start with this basic HTML template.

Copy the HTML below to begin working with a minimal ID7 layout.

<!DOCTYPE html>
<html lang="en-GB" class="no-js"> <!-- class="id7-non-branded" to remove Warwick branding -->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Include any favicons here -->
  <meta name="theme-color" content="#5b3069">
  <!-- Use the brand colour of the site -->

  <title>Your page title</title>

  <!-- Lato web font -->
  <link href="//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic&amp;subset=latin,latin-ext"
      rel="stylesheet" type="text/css">

  <!-- ID7 -->
  <link href="css/id7.min.css" rel="stylesheet">

  <!-- Default styling. You will probably want to replace with your own site.css -->
  <link href="css/id7-default-style.min.css" rel="stylesheet">

  <script src="js/id7-bundle.min.js"></script>
</head>
<body class="id7-point-1">
  <div class="id7-left-border"></div>
  <div class="id7-fixed-width-container">
    <a class="sr-only sr-only-focusable" href="#main">Skip to main content</a>
    <!-- If navigation component is used -->
    <a class="sr-only sr-only-focusable" href="#primary-nav">Skip to navigation</a>

    <header class="id7-page-header">
      <div class="id7-utility-masthead">
        <nav class="id7-utility-bar" aria-label="Utility bar">
          <!-- Include the utility bar component here if used -->
        </nav>

        <div class="id7-masthead">
          <div class="id7-masthead-contents">
            <div class="clearfix">
              <div class="id7-logo-column">
                <!-- Don't include the logo row on non-branded sites -->
                <div class="id7-logo-row">
                  <div class="id7-logo">
                    <a href="http://warwick.ac.uk" title="Warwick homepage">
                      <img src="images/shim.gif" alt="Warwick">
                    </a>
                  </div>
                  <nav class="id7-site-links" aria-label="Site links">
                    <ul>
                      <li><a href="https://warwick.ac.uk/study">Study</a></li>
                      <li><a href="https://warwick.ac.uk/research">Research</a></li>
                      <li><a href="https://warwick.ac.uk/business">Business</a></li>
                      <li><a href="https://warwick.ac.uk/alumni">Alumni</a></li>
                      <li><a href="https://warwick.ac.uk/news">News</a></li>
                      <li><a href="https://warwick.ac.uk/engagement">Engagement</a></li>
                    </ul>
                  </nav>
                </div>
              </div>
              <div class="id7-search-column">
                <div class="id7-search">
                  <form action="//search.warwick.ac.uk/website" role="search">
                    <input type="hidden" name="source" value="http://warwick.ac.uk/"> <!-- Replace with the current page URL -->
                    <div class="form-group">
                      <label class="sr-only" for="id7-search-box">Search</label>
                      <div class="id7-search-box-container">
                        <input type="search" class="form-control input-lg" id="id7-search-box" name="q" placeholder="Search Warwick" data-suggest="go">
                        <i class="fas fa-search fa-2x"></i>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>

            <div class="id7-header-text clearfix">
              <h1>
                <!-- Parent site link often excluded -->
                <span class="id7-parent-site-link"><a href="#">Parent site name</a></span>
                <span class="id7-current-site-link"><a href="#">Current site name</a></span>
              </h1>
            </div>
          </div>
        </div>
      </div>

      <!-- Docs master nav -->
      <div class="id7-navigation" id="primary-nav">
        <!-- Include the navigation component here if used -->
      </div>
    </header>

    <!-- Page content of course! -->
    <main class="id7-main-content-area" id="main">
      <header class="id7-main-content-header">
        <div class="id7-horizontal-divider">
          <svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" version="1.1" width="1130" height="40" viewBox="0, 0, 1130, 40">
  <path d="m 0,0.5 1030.48, 0 22.8,39.5 16.96,-31.4 16.96,31.4 22.8,-39.5 20,0" stroke="#383838" fill="none" class="divider"></path>
</svg>
        </div>

        <div class="id7-page-title">
          <h1>Your page title</h1>
        </div>
      </header>

      <div class="id7-main-content">
        Your page content goes here. Use layouts if desired
      </div>
    </main>

    <footer class="id7-page-footer id7-footer-coloured"> <!-- one of id7-footer-coloured or id7-footer-divider -->
      <div class="id7-site-footer">
        <!-- Only included when footer class="id7-footer-divider"
          <div class="id7-horizontal-divider">
          <svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" version="1.1" width="1130" height="40" viewBox="0, 0, 1130, 40">
  <path d="m 0,0.5 1030.48, 0 22.8,39.5 16.96,-31.4 16.96,31.4 22.8,-39.5 20,0" stroke="#383838" fill="none" class="divider"></path>
</svg>
          </div>
        -->

        Your site footer content
      </div>
      <div class="id7-app-footer">
        <!-- Only include the id7-logo-bleed for footer class="id7-footer-coloured" -->
        <div class="id7-logo-bleed"></div>

        <div class="id7-footer-utility">
          <ul>
            <li>Powered by <a href="http://warwick.ac.uk/sitebuilder">App name</a></li>
            <li><a href="http://warwick.ac.uk/copyright">© MMXV</a></li>
            <li><a href="http://warwick.ac.uk/terms">Terms</a></li>
            <li><a href="http://warwick.ac.uk/privacy">Privacy</a></li>
            <li><a href="http://warwick.ac.uk/cookies">Cookies</a></li>
            <li><a href="http://warwick.ac.uk/accessibility">Accessibility</a></li>
          </ul>
        </div>
      </div>
    </footer>
  </div>
  <div class="id7-right-border"></div>
</body>
</html>

Security headers

It's important to include strong security headers when serving content to provide defence-in-depth against client-side attacks.

Content-Security-Policy

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:

Area Minimum configuration Reason
default-src 'self' By default, only allow loading resources from the same hostname
img-src 'self' data: We need to allow data: image URIs in order to perform WebP feature detection
style-src 'self' https://fonts.googleapis.com We load the Lato webfont from fonts.googleapis.com via a CSS import
font-src 'self' https://fonts.gstatic.com Domain that the Lato webfont is downloaded from
script-src 'self'  
frame-src 'self' https://websignon.warwick.ac.uk https://my.warwick.ac.uk 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
connect-src 'self' https://my.warwick.ac.uk To allow the My Warwick popover to work
object-src 'none' Shouldn't be required; note that you will need to set this to 'self' for Chrome and Firefox's PDF viewer to work when serving PDFs inline

Feature-Policy

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'

Other headers

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.

Supported browsers

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.

Chrome Firefox Internet Explorer Edge Opera Safari
Android Supported Supported N/A N/A Not Supported N/A
iOS Supported N/A Not Supported Supported
Linux Supported Supported Supported N/A
Mac OS X Supported Supported Supported Supported
Windows Supported Supported Supported Supported Supported Not 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
border-radius Supported
box-shadow Supported
transform Supported, with -ms prefix
transition Not supported
placeholder Not supported

Visit Can I use... for details on browser support of CSS3 and HTML5 features.

Printing

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.