Getting Started
Add the following lines to your HTML:
<link rel="stylesheet" href="//cdn.toolkit.illinois.edu/3/toolkit.css">
<script type="module" src="//cdn.toolkit.illinois.edu/3/toolkit.js"></script>
This will get you the latest production version of the toolkit.
Builder
The Component Builder is a way to see components that have been designed by the WIGG Web Components group and other areas that have submitted components to the builder. This includes both production and development versions.
Other links
There are a few other links that are recommended.
- Illinois Branding CDN, which has the campus stylesheet, header, and footer. The campus stylesheet is required for the toolkit to work effectively. Starting with version 3.1.0 of the toolkit, the campus stylesheet is automatically added via an include statement in the toolkit.css.
- Campus skip-to link, an accessibility "nice-to-have" that allows users to go specifically to a section of a page.
- GDPR cookie banner, a security requirement to meet privacy standards.
Alternate versions of the toolkit
If you need to hit a specific version of the toolkit due to maintenance reasons or technology concerns, you can do so by replacing the 3 with the specific version (either minor or patch). For example:
<link rel="stylesheet" href="//cdn.toolkit.illinois.edu/3.0/toolkit.css">
<script type="module" src="//cdn.toolkit.illinois.edu/3.0/toolkit.js"></script>
<link rel="stylesheet" href="//cdn.toolkit.illinois.edu/3.0.0/toolkit.css">
<script type="module" src="//cdn.toolkit.illinois.edu/3.0.0/toolkit.js"></script>
Note the implications of pointing to a specific version of the toolkit.
If you want to hit the latest beta version of the toolkit, you can do so by connecting to our development server. For example:
<link rel="stylesheet" href="//dev.toolkit.illinois.edu/latest/toolkit.css">
<script type="module" src="//dev.toolkit.illinois.edu/latest/toolkit.js"></script>
If you want to hit a specific beta version of the toolkit, you can do so by replacing the latest with the specific beta version. For example:
<link rel="stylesheet" href="//dev.toolkit.illinois.edu/3.0.0-beta/toolkit.css">
<script type="module" src="//dev.toolkit.illinois.edu/3.0.0-beta/toolkit.js"></script>
You should not use the beta version on a production system. The development / beta versions are not stable and can be removed at any time.