Experimental This website is used for testing, your feedback will help us to improve it.

BAS Style Kit Testbed

This website is used by developers to test, samples and demonstrate parts of the BAS Style Kit

This website is not designed to explain how to use the Style Kit, use the end-user documentation instead.

See style-kit.web.bas.ac.uk for the latest stable end-user documentation

Patterns

Patterns are best practice design solutions for specific user-focused tasks and page types. They combine the low level styles, components and interactive elements provided by the Style Kit into higher level solutions.

The Testbed provides examples of how each pattern can be used. Guidance to using these patterns is available through the Style Kit Documentation.

All patterns

Samples

Each part of the Style Kit is represented as one or more samples which together check that styles and features work correctly in various scenarios and edge cases.

Most samples focus on a single CSS class (such as a single button variant), however some test how multiple classes interact together (such as ensuring the cookie notice lines up with navbars).


Samples by Category

core--lists

core--typography

core--typography-utilities

core--typography-code

core--grid

core--layout

core--tables

core--buttons

core--colours

core--forms

core--images

components--alerts

components--badges

components--cards

components--embeds

components--labels

components--header

components--footers

components--pagination

components--breadcrumb

components--jumbotron

components--social-media

components--dropdowns

components--button-groups

components--navs

components--progress-bars

components--navbars

components--input-groups

components--sidebars

components--logos

components--tool-tip

components--modal

Samples - A to Z