Xerte Template Introduction

DigEd Xerte Themes

Project Background

Principles

• Easy to navigate

• Content with clear structure

• Resource/Links are easy to find

• Across device

• Accessible

• Visually appealing and engaging

• Consistency format so that the visual appearance inline with the University guidelines

Development Process

Apps I use

• Xerte

• Notion

• Figma

• VS Code

• Browser based development tools

Xerte

• Free

• Sustainable

  • Reusable

  • Easy to update and maintain

  • Sharable and exportable

  • Collaborate authoring

  • Instant updating

flexibility

• Type in or upload your own CSS stylesheet

• Add urls for a JavaScript library

• Enter your own script directly

Xerte Bootstrap

• Responsive design

• Navigation

• Media

• Navigators (Tabs, Pills, Accordion,  Carousel)

• Embedded content

• Bootstrap components

REsources

Colours

• Cardiff University Colour Palette
• https://www.instagram.com/colours.cafe/
• https://www.colorhexa.com/088190 shades and tints

Fonts

• https://fontjoy.com/
• https://www.fontpair.co/

Icons

• Font Awesome
• Google material icons
• Iconify

Images/illustrations

• https://storyset.com/work

Title Text

Project Demo