JCU CookBook

JCU CookBook (formerly JCU Web Framework) is the HTML, CSS, and JS framework for building responsive, mobile-first web projects with University styling.

Get started

Currently v3.2.2 · All releases · Based on Bootstrap

Install from CDN

Want to use the styles in a static website? All compiled and minified styles and JavaScript are available from the JCU CDN.

See it in action on projects like the ORCID iD Linker, the HPC File Explorer or JCU Research Portfolio v2 (PoC).

View Bootstrap's docs

<!-- CSS -->
<link href="https://cdn.jcu.edu.au/cookbook/3.2/css/cookbook.min.css" rel="stylesheet" crossorigin="anonymous">

<!-- Fonts -->
<link href="https://cdn.jcu.edu.au/cookbook/3.2/css/fonts.min.css" rel="stylesheet" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jcu.edu.au/cookbook/3.2/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

<!-- Or include separately. Popper is optional but must come first -->
<script src="https://cdn.jcu.edu.au/cookbook/3.2/js/popper.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jcu.edu.au/cookbook/3.2/js/bootstrap.min.js" crossorigin="anonymous"></script>

Install from npm

Install the source Sass styles and compiled CSS from npm with your favourite package manager.

Package managed installs don’t include documentation or our full build scripts. You can also download the source code if you need to customise JCU CookBook.

npm install @jcu/cookbook

yarn add @jcu/cookbook

Material Design Icons

Looking for icons to go along with your website? Material Design Icons has a large library of icons that will satisfy your needs.

Material Design Icons are easy to use and install. They are also tested and actively used on sites that use JCU CookBook as its base framework.

Explore icons

<!-- Material Design Icons -->
<link href="https://cdn.jcu.edu.au/cookbook/3.2/css/materialdesignicons.min.css" rel="stylesheet" crossorigin="anonymous">

npm install @mdi/font

yarn add @mdi/font