EdGEL Pattern Library
A reference library of all the EdGEL components built in Bootstrap 5. EdGEL is distributed as the NPM package @uoe/edgel. This NPM package is available for use in PHP via Composer projects via Asset Packagist
This does not provide an exhaustive list of all the Bootstrap components, instead in concentrates on those components specifically extended for or new to EdGEL. You should therefore read this in conjunction with the Bootstrap 5 documentation.
This follows the principles of atomic design - there are dropdown menus at the top of the screen to navigate to the Atoms, Molecules, Organisms and Templates.
These patterns are used for the basis of visual regression testing, and to quickly allow testing when adding or altering components. It is not intended as a guide to how to use EdGEL.
Icons
The official icons to use with EdGEL are the
Bootstrap Icons.
The icon font is included so you can just use the empty <span>/<i> tags with the
appropriate bi- class to include an icon on the page. The icon will take the current text colour
if included this way. Note, to ensure assistive technology does not try and read the icon character
you should always use aria-hidden="true" and of course separately include descriptive text in the
page if you are relying on the icon to convey meaning, for example
<span class="bi-house-door-fill" aria-hidden="true"></span>
<span class="visually-hidden">Return to homepage</span>
If you want to use an icon sprite, there is a loader available together with an example icon sprite with the main icons currently in use across UoE websites.
<a class="btn btn-lg btn-info">
<svg class="icon" aria-hidden="true"><use xlink:href="#edgel-info-circle"></use></svg>
Further information
</a>
...
<script>
EdGEL.Icons.spriteLoader('/dist/media/icons.svg')
</script>
Web components
To ease templating we provide custom elements for the main EdGEL components such as header, footer and content menu.
Legacy version
EdGEL v4 is built on Bootstrap v3.4. Bootstrap 3 has been end of life since July 2019 so we encourage those still using EdGEL 4 to migrate to EdGEL 5 when possible.
The old EdGEL 4 documentation is hosted here for reference: