Grandstand is a scalable front end architecture and a lightweight Sass framework. Consisting of a collection of common CSS abstractions and utility helper classes, Grandstand allows you to quickly development components in a reusable, performant manner.

The framework is named after Grandstand a British television sport programme. Broadcast between 1958 and 2007, it was one of the BBC's longest running sports shows, alongside BBC Sports Personality of the Year.

Grandstand consumes and builds upon GEL Foundations by adding a defined architecture with more opinionated code abstractions.

This framework is maintained and used by the BBC Sport engineering team.

Architecture

Grandstand's architecture consists of three core elements: BEM, OOCSS, ITCSS.

The combination of these three techniques provides a solid, scalable foundation from which to build components or an entire site.

Beyond the three core elements there are a number of other architectural points applied to Grandstand that ensure some of the most common problems and challenges with Front End Development are avoided.

Code

Grandstand is built upon the GEL Foundations of Typography, Grid and Iconography.

Grandstand's code is available in two parts:

Grandstand Sass Tools

A collection of Sass variables, mixins and functions, which can be used to create Sass in a consistent manner which aligns to GEL Guidelines.

On its own the Sass Tools does not produce any output. It simply exposes common Sass tools such as:

  • Spacing variables
  • Colour variables
  • Math functions & unit conversion mixins
  • Access to Grid and Typography tools
  • Media query management via Sass MQ

Grandstand Framework

The Grandstand framework consists of a collection of common CSS objects, abstractions and utility helper classes.

By combining the GEL Foundations with these abstractions and utility classes you should be able to construct 80% of a component. A minimal amount of component specific styling should needed to complete the component.