Digital pattern library – streamlining Bootstrap
The alert pattern is used to provide contextual feedback messages for typical user actions and convey important information for users. For example:
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.
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:
- Conditionally revealing content
- Fieldsets and legends
- File upload
- Hint text
- Input fields
- 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.
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.
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.
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 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.
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.