EdGEL: The University of Edinburgh Design System

EdGEL version 5.2.5

A Bootstrap 5 theme implementing the University of Edinburgh Design System.

This is still pre-release and not yet ready for production use.

What's included

.
├── custom-elements  # Custom elements to add a range of EdGEL components to the page. 
├── dist             # The compiled CSS, JS and other page assets 
├── js               # The source Javascript.  Requires Bootstrap source JS.
└── scss             # Source Dart Sass files.  Requires Bootstrap source SCSS.

We provide compiled CSS and JS (dist/css/edgel-*.css, dist/js/edgel-*.js), as well as compiled and minified CSS and JS (dist/css/edgel-*.min.css, dist/js/edgel-*.min.js).

Source maps (*.map files) are available for use with certain browsers' developer tools.

Bundled JS files (dist/js/edgel.bundle.js and minified dist/js/edgel.bundle.min.js) include Popper. Popper is used for Bootstrap's dropdowns. If not using the bundled versions of the JS files you will have to load these libraries to the page to use these features.

We also include the Bootstrap Icons font and supporting classes. See the Bootstrap Icons usage documentation for the available class names and other methods of using the icons on your site.

To disable the cookie consent add

<script>
  EdGEL.Consent.Default.disabled = true
</script>

To use custom elements, you would normally import them to your JS project, but this has to be done after including the EdGEL CSS:

import '@uoe/edgel/css/edgel-purple.css'
import '@uoe/edgel/custom-elements/edgel-alert.js'

Compiled versions (modules) of custom elements are provided to include in static HTML pages: eg dist/custom-elements/edgel-alert.js. Again you need to load the EdGEL CSS first.

Fonts

This package includes the fonts Source Sans Pro and Crimson Text licensed under the Open Font License and the Bootstrap icon font (see below)

Icons

This package uses Bootstrap Icons, licensed under the MIT Licence