Digital pattern library – streamlining Bootstrap

The digital pattern library is built upon Bootstrap, an HTML, CSS and JavaScript framework that comes with a large number of components. While everything is possible, not everything is permissible which is why we have been focusing on creating patterns that we do endorse using Bootstrap in our library.


Alerts

The alert pattern is used to provide contextual feedback messages for typical user actions and convey important information for users. For example:

Thank you! Your application has been successfully submitted.

Buttons

Buttons are calls to action that link to other pages. We have simplified the choice of buttons available. The following are examples of the secondary and tertiary buttons using our colour palette.


Form elements

There are a myriad of form element options in Bootstrap. We have created a new page for form elements that identifies the ones we endorse along with instructions on their use. They include the following:

  • Checkboxes
  • Conditionally revealing content
  • Fieldsets and legends
  • File upload
  • Hint text
  • Input fields
  • Labels
  • Radio buttons
  • Select boxes

We have also improved the way checkboxes and radio buttons can be used on mobile devices by making them a lot larger than the default Bootstrap components.
Radio button example


Form validation

Hand-in-hand with the use of forms is how to clearly let the user know when a form has not been completed correctly. As the digital pattern library is agnostic of platform we don’t give instructions on how to validate a form, just how to format error messages to the user. We have taken inspiration from the way GOV.UK implements their form validation messages.

Validation example


Glyphicons

Bootstrap has a large number of icons but we don’t need all of them for the University website. The digital pattern library now has a list of approved icons.

Glyphicon example


Pagination

Pagination is typically used in web applications where there are a large number of pages or search results. The only modification we have made is to remove the option for the smallest pagination links.


Responsive embed

The responsive embed pattern allows browsers to determine video or map dimensions based on the width of their containing block by creating a responsive ratio that will properly scale on any device.


Tables

Tables can be the most complex HTML on a web page. Within Bootstrap there are many options for styling tables. We have decided to keep tables as simple as possible, offering only the striped row option. Also, where tables have more than one column we allow the use of the jQuery DataTables plugin to allow users to search the table and sort columns.

Email Address Name
abc@domain.com Bob McBoberson
def@domain.com Pat McPaterson
ghi@domain.com Jo McJoerson


Typography

The correct use of HTML tags ensures that content is accessible and has the potential to improve the way search engines index content on a site. We have created a simple guide on how to use the correct typography on a website.

Leave a Reply

Your email address will not be published. Required fields are marked *