ID7 is the 7th iteration of the University of Warwick corporate identity. This library provides CSS, JavaScript and sample HTML in order to use the corporate identity on your site.
ID7 is available under an OSS license so that the open-source community can benefit from the various UI components and JavaScript functionality we have implemented.
- Quick start
- Bugs and feature requests
- Documentation
- Breaking changes
- Upgrading from 1.x to 2.x
- Copyright and license
Three quick start options are available:
- Install with npm:
npm i @universityofwarwick/id7 - Download the latest release.
- Clone the repo:
git clone https://github.com/UniversityofWarwick/id7.git.
Read the Getting started page for information on the framework contents, templates and examples, and more.
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
id7/
├── css/
│ ├── id7.css
│ ├── id7-default-theme.css
│ └── id7-wide.css
├── js/
│ ├── id7-bundle.js
│ └── id7-bundle.js.map
├── images/
│ ├── logo.png
│ ├── masthead-logo-bleed-sm.svg
│ ├── masthead-logo-bleed-sm.png
│ ├── masthead-logo-bleed-xs.svg
│ ├── masthead-logo-bleed-xs.png
│ └── (and others)
├── fonts/
│ └── (font files)
└── templates/
└── base.html
As of v2.0.0, we only provide compiled and minified CSS and JS. See upgrading from 1.x to 2.x for more information.
JS source maps (id7*.map) are available for use with certain browsers' developer tools. The FontAwesome 5 free icon font is included, as is an optional ID7 theme.
The id7-bundle.js file includes dependencies such as jQuery and Bootstrap. These dependencies are:
- jQuery 3.4.1
- Bootstrap 3.4.1
- bootstrap-3-typeahead 4.0.3
- headroom.js 0.10.3
- jqDoubleScroll 0.7.0
Icons are provided by the Font Awesome 5 library. Because our license prevents distribution, this project by default includes Font Awesome 5 Free, which has a good selection of icons built in. If you are a Creator with a license and want to build ID7 with Font Awesome 5 Pro, first set up NPM with the token, then install the @fortawesome/fontawesome-pro package, and then instead of importing id7, import id7-no-fa and font-awesome-pro under the same path.
We don't include the FA4 compatibility layer by default. It can be imported within LESS with:
@import '@fortawesome/fontawesome-free/less/v4-shims';Replacing fontawesome-free with fontawesome-pro if necessary.
Have a bug or a feature request? Contact [email protected].
See CONTRIBUTING.md.
Documentation, included in this repo in the root directory, is built with Jekyll and publicly hosted by Netlify at http://id7.warwick.ac.uk. The docs may also be run locally.
- Install Ruby and run
gem install bundler. - Install node.js.
- In the root
/id7directory:- Run
bundle installto install dependent gems. - Run
npm cito install webpack and other node.js dependencies. - Run
npm run dev(ornpm run watch) to build a copy of static assets. - Run
npm run startin the command line.
- Run
- Open http://localhost:8080 in your browser, et voilà.
Learn more about using Jekyll by reading its documentation.
From version 2.0.0, ID7 is built with webpack and a slightly different set of resources are delivered with the bundles. In your application you will need to do the following:
- Replace references to
id7.min.csswithid7.css - Replace references to
id7-default-theme.min.csswithid7-default-theme.css - Replace references to
id7-bundle.min.jswithid7-bundle.js id7-standalone.jswas removed from the distribution; you should build your own bundle if you are using this
From version 2.9.7 onwards, you can apply the new "ID7.1" styling to the site masthead in your app. To do so:
- Add the
id7-point-1class to the<body>element in your templates - Replace the logo image
logo.pngwithlogo.svgin your templates - Update anything app-specific that needs updating - the whole masthead region should have a white background
- 1.2.0 - Now uses a custom Modernizr build (see What's included above) with a minimal range of tests. If your application relies on other tests or shims which were included in previous versions, they will likely fail.
- 1.4.0 - Support for Internet Explorer 8 was removed, and a reduced range of Modernizr tests is used as a result.
- 1.6.0 - Font Awesome v5 is now used by default instead of v4. Icon identifier references may need to be updated, or the shim included.
- 2.0.0 - Now built with Webpack instead of Grunt. Removed non-minified resources from packages. Moved from typeahead.js to bootstrap-3-typeahead.
- 2.3.0:
- Modernizr was removed and replaced with a shim just containing the tests used in ID7.
- lodash is no longer exposed as
_in order to reduce the bundle size
- 2.6.0:
- Internet Explorer 11 is no longer fully supported
- Headroom.js was updated to 0.10.3 which no longer supports IE11 without a polyfill for
Object.assign. To enable this in IE11, include anObject.assignpolyfill and then adddata-fixed-header="true" data-fixed-nav="true"to the.id7-navigationelement.
- 2.8.0:
- Bootstrap typeahead now adds aria- attributes to parent elements. If you use typeahead directly, ensure your input field is inside a reasonable container element (a Bootstrap column or
.form-groupis fine)
- Bootstrap typeahead now adds aria- attributes to parent elements. If you use typeahead directly, ensure your input field is inside a reasonable container element (a Bootstrap column or
- 2.9.0:
- The
id7-site-footerandid7-app-footerelements now require a nested content element,id7-site-footer-contentandid7-app-footer-contentrespectively. The template has been updated to reflect this.
- The
- 2.9.10:
- Using the 7.1 design requires the
id7-point-1class to be on the<body>element. - If building your own CSS, LESS must be at least version 3.5.
- Using the 7.1 design requires the
Bootstrap is licensed under the MIT license.
ID7 is licensed under the ISC license.
Note that Access to the University web-site is subject to the separate, published copyright notice.