# EdGEL: The University of Edinburgh Design System

> **EdGEL version <version>5.0.0-alpha.7</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

```
.
├── 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.
```

If using the EdGEL source JS or SCSS files you will need the
[bootstrap@5.1.3](https://www.npmjs.com/package/bootstrap/v/5.1.3)
package.

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`). 

The *-gf.css version reference the Google Fonts API to load fonts for the
page instead of using locally hosted files.

[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/) and [Nunjucks](https://mozilla.github.io/nunjucks/).
Popper is used for Bootstrap's dropdowns and Nunjucks is used for templating 
the cookie consent banner and overlay notices. If not using the bundled 
versions of the JS files you will have to load these libraries to the page 
to use these features. 

The full SVG sprite is included, however there are a lot of SVGs in it and 
making it an excessively large file, so you may wish to build you own with 
only a subset of the available icons. You can load an SVG sprite with:
```js
<script>
  EdGEL.Icons.spriteLoader('/edgel/dist/media/icons.svg')
</script>
```
and then use as below.  Note all the icon ids in the provided sprite are 
prefixed `edgel-` to namespace them:
```html
<svg class="icon">
  <use xlink:href="#edgel-chevron-right"></use>
</svg>
```

See the Bootstrap Icons [usage documentation](https://icons.getbootstrap.com/#usage) 
for other methods of using the icons on your site.

To disable the cookie consent add
```js
<script>
  EdGEL.Consent.Default.disabled = true
</script>
```

## 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)

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