Oxford Brookes University Pattern Library

This digital pattern library has been created by the Marketing and Communications web team to help create a consistent look and feel for all web projects at Oxford Brookes University. It is primarily for designers and developers but also for colleagues who are responsible for the layout and styling of web pages.

The library is a collection of reusable modular components that will ensure a consistent use of design patterns, provide guidance and how to incorporate accessibility for disabled users. If you are in the process of starting a new project, please let us know, we can also help you get up and running.

This is a “living document” and generated from the same CSS and HTML used to display content on the live website. The library will be updated regularly when there are code changes and new patterns introduced. If you run into any problems, have a suggestion or a new pattern we could use, please share them with us.

How do I use it?

The guide is split into pages based on the type of element / styling. From basic elements, to building blocks and more complex components. There are also sections for layouts and templates. Each pattern includes usage and accessibility tips.

What do I need to know to make best use of it?

You will need to have a reasonable grasp of HTML and an understanding of CSS to make use of this library. If you would like training in either of these there are various online tutorials you can take view our resources page.

Will it work with my website?

If your website is hosted in Ektron, you can make use of these styles right away. This guide should be used in conjunction with the Ektron user guides (all linked from the main login page of the staging server).

If your website is not hosted in Ektron, you will need to link to Ektron’s main style sheet (standard.css) to make use of these styles.

Top of page