Skip to main content
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, develop 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

See style-kit-testing.web.bas.ac.uk for the latest pre-release (but largely 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 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).

When ran locally, the testbed uses a development build of the Style Kit (locally compilled CSS/JS) to give a short feedback loop when interating new features or fixing bugs. Hosted versions allow changes developed in feature branches, or finished but unreleased in the master branch, to be reviewed by others.

  • numbers assigned to samples have no implied order or grouping, they may not be continuous but will be unique
  • some samples are intentionally invalid and expected to fail, experiment samples may not be updated
  • related samples may be listed together in one or more sample collections
  • some samples may not be listed in any sample collections, such as experiments

All samples

Sample collections

Samples by collection

core--lists

core--typography

core--typography-utilities

core--code

core--grid

core--layout

core--tables

core--buttons

core--colours

core--forms

core--images

components--alerts

components--badges

components--labels

components--headers

components--footers

components--pagination

components--breadcrumb

components--page-headers

components--responsive-embeds

components--thumbnails

components--social-media

components--drop-downs

components--media-objects

components--button-groups

components--image-copyright

components--navs

components--icons

components--progress-bars

components--navbars

components--input-groups

components--sidebars

components--logos

components--tooltip

core--favicon

components--modal

components--popover

core--meta

Feedback

The BAS Style Kit uses Trello to manage development and collecting feedback for all Style Kit components (including this Testbed, templates and documentation) whether positive and negative.

As a public open-source project, feedback is welcome from anyone, whether reporting bugs/issues or suggestions for additions/improvements. This project is inheriently related to branding websites as part of the British Antarctic Survey, and therefore some choices are beyond our control.

View Trello Board