# EdGEL: The University of Edinburgh Design System

> **EdGEL version <version>5.2.0</version>**

A [Bootstrap 5](https://getbootstrap.com) 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](https://developers.google.com/web/tools/chrome-devtools/javascript/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](https://popper.js.org/). 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](https://icons.getbootstrap.com/#usage) 
for the available class names and other methods of using the icons on your site.

To disable the cookie consent add
```js
<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:

```js
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](https://fonts.google.com/specimen/Source+Sans+Pro) and 
[Crimson Text](https://fonts.google.com/specimen/Crimson+Text) licensed under the
[Open Font License](https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL)
and the Bootstrap icon font (see below)

## Icons
This package uses [Bootstrap Icons](https://icons.getbootstrap.com),
licensed under the [MIT Licence](http://opensource.org/licenses/MIT)
