@bbc/grandstand-webpack
Advanced tools
The BBC Grandstand CSS Framework is used by Sport and Live components
A collection of common CSS abstractions and utility helper classes.
BBC Grandstand
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.
This library is built and maintained by the BBC Sport team and used by various components on BBC Sport website and within the BBC Live product.
Grandstand can be installed using Bower:
$ bower install --save bbc-grandstand
// your-app/main.scss
@import 'bower_components/bbc-grandstand/grandstand';
### Script support
In addition to the Latin script defaults, Grandstand includes typographic and text direction overrides for a number of other scripts, including Arabic and Chinese.
The value of the $script SASS variable, if set, is used to determine whether any script-specific overrides are applied when Grandstand is imported. See the file _l10n.scss for allowed values.
Grandstand has a number of key architectural points which when combined work together to produce CSS which is fast to develop, scalable, performant, DIY and reusable.
The architectural principles behind Grandstand are arguably more important than the code provided in this library. Without knowing and adhering to these architectural principles you will not get the full benefits of working with Grandstand. The code alone is not enough.
The overarching architecture of Grandstand is very much inspired by the great work of Harry Roberts, his ITCSS architecture and Inuit CSS.
ITCSS (Inverted Triangle CSS) is specifically designed for managing CSS at scale and is a diagrammatical representation of an entire projects CSS. The ITCSS structure is not rigid and can be adapted to suit different projects, with that in mind Grandstand uses the following architecture:
Following this approach a component should be primarily constructed using common objects and abstractions, the GEL Foundations and utility classes. The purpose of the code this library is to manage these common styles. A component should then only require a small amount of bespoke styling.
Resources
We apply the Block, Element, Modifier naming convention when creating components with Grandstand.
Resources
OOCSS
Our approach to writing and applying CSS very much promotes adding classes in the DOM. This creates two distinct problems for other developers working with this code:
There is loads more information about this in Harry Roberts post about: More Transparent UI Code with Namespaces
We add specific namespaces to our classes to help alleviate the problems of working with multiple classes:
o-: Object - may be used in any number of unrelated contexts to the one you can currently see it in. Making modifications to these types of class could potentially have knock-on effects in a lot of other unrelated places. Tread carefully.c-: Component - This is a concrete, implementation-specific piece of UI. All of the changes you make to its styles should be detectable in the context you’re currently looking at. Modifying these styles should be safe and have no side effects.u-: Utility - It has a very specific role (often providing only one declaration) and should not be bound onto or changed. It can be reused and is not tied to any specific piece of UI.t-: Theme - This class is responsible for adding theming to a view. It lets us know that UI Components’ current cosmetic appearance may be due to the presence of a theme.Here are a few examples of what these namespaces might look like in practice:
// our media object pattern
.gs-o-media {}
.gs-o-media__img {}
.gs-o-media__body {}
// a sample component
.gs-c-my-component {}
.gs-c-my-component--large {}
.gs-c-my-component__title {}
// visually hidden utility
.gs-u-vh {}
// apply the sport theme to a component
.gs-t-sport {}
With sharing of code in mind, all classes and output within this library is prefixed with gs- prefix. This will help us mitigate any potential clash of classname within other products.
Grandstand is built on top of Grandstand Sass Tools, a collection of common Sass variables, functions and mixins. This component has no CSS output, it exists purely to expose a number of tools for you to use when developing components following the Grandstand architecture.
If you are building your own component with component specific CSS then you should include the Sass Tools within your component to expose the tools contained within.
The GEL Foundations are an un-opinionated code implementation of the GEL Foundational guidelines. Grandstand is built on top of these foundations adding a layer of opinion about how they should be used.
Grandstand outputs helper utility classes for both the GEL Typography and GEL Grid libraries. For more information on either of these libraries refer to their respective README files.
Grandstand include a number of CSS abstractions allowing you to solve common layout and structural problems in a consistent way without duplicating code throughout your codebase.
Grandstand includes the following abstractions:
color property to fillThese abstractions are designed to follow the single responsibility principle and the open/closed principle. Where possible you should separate the concerns of objects and your components. This allows your styles to become much more predicable and less prone to bugs caused by as a result of trying to combine object styles with component specific style.
For example, instead of this:
<div class="my-component gs-o-media">
<div class="my-component__image gs-o-media__img">
</div>
<div class="my-component__text gs-o-media__body">
</div>
</div>
You could separate the concerns between your component specific styles and the objects:
<div class="my-component">
<div class="gs-o-media">
<div class="gs-o-media__img">
<div class="my-component__image" />
</div>
<div class="gs-o-media__body">
<div class="my-component__text" />
</div>
</div>
</div>
Whilst this does introduce slightly more markup the effect it would have on performance is negligible and the value you this brings you for a maintainability point of view is massive.
Utilities are low level helper classes designed to solve common problems which do not warrant full object abstractions.
Commonly they will only apply a single declaration e.g. align text to the right: gs-u-align-right, or simple multiline patterns: e.g. hide an element visually: gs-u-vh.
The scope of utility classes is only ever one element i.e. utilities can't affect any child elements of the element they're being applied too.
As with Objects, utilities follow the single responsibility principle and the open/closed principle.
Grandstand includes the following helper utilities:
box-sizing: border-box; to an elementdisplay property at different breakpointsmargin and padding utility classes to control the spacing of elementsAll utility classes carry the !important tag on every property to ensure our utility classes always work.
Utility classes are very specific in their intentions. For example if you applied a utility class to add 8px margin on the bottom of an element you never want to override this. If you didn't want this behaviour, you should not have used the class in the first place.
The pro-active use of !important guarantees this way of thinking.
This 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.
The MIT License (MIT)
Copyright 2016 British Broadcasting Corporation
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
FAQs
The BBC Grandstand CSS Framework is used by Sport and Live components
The npm package @bbc/grandstand-webpack receives a total of 44 weekly downloads. As such, @bbc/grandstand-webpack popularity was classified as not popular.
We found that @bbc/grandstand-webpack demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 170 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.