Eurostar Base Styles
The core package which majority if not all Eurostar components require in order to be consumed. This package should also be incorporated within all Eurostar Apps (Content, BPA, MYB etc.) as it defines the core design priniciples and assets to keep the consistent look and feel across the entire Eurostar stack.
The primary principle for the Base Styles is to be as lightweight as possible. Assets have single point of reference which must be adhered to in every App in order to optimise performance when users move across the site i.e. from Content to BPA to MYB. One key example of this are the fonts which are stored on the Eurostar shared S3 Bucket - this therefore should be be referenced at this location rather than individual Apps own src
directory.
Contents
Below are the key contents of Base Styles:
/base-styles
base-styles.js
_base-styles.scss
/fonts
/js
/common
/date
/dom
/form
/polyfill
/scss
/base
/utils
/svgs
/carriers
/icons
fonts
- Contains all the font files used within all Eurostar apps. This should not be used directly. The fonts are stored on the Eurostar shared S3 Bucket and must be referenced here in order to optimise performance when users move across apps. The S3 bucket is: https://static.eurostar.com/shared/fonts/js
- Contains utility and helper methods used across Eurostar components which are published. Consumers mustimport
/require
in thebase-styles.js
file into their App rather than calling individual files. Polyfills are also incorporated but only certain polyfills are brought in due to keeping the source as lightweight as possible.scss
- Contains variable declarations, settings and common mixins / functions used across Eurosrtar components. As withjs
Consumers mustimport
/require
in thebase-styles.scss
svgs
- Contains all the SVGs used on Eurostar. This will be updated on an ongoing basis. As with thefonts
this must not be used directly. One key difference is the split betweencarriers
andicons
. The SVGs foricons
are compiled into a single spritesheet incorporatingsymbol
tag thus allowing these to be consumed as inline SVGs by applyinguse
. For reference please read this article if you're unsure on how this works: https://css-tricks.com/svg-use-external-source/. The spritesheet is compiled by the Styleguide CI & CD pipeline - please review the Readme for further direction. Theicons
spritesheet is stored on Eurostar shared S3 Bucket and must be referenced here across all apps to optimise performance. The S3 bucket is: https://static.eurostar.com/shared/iconography/. Forcarriers
these are stored as individual files on the static S3 Bucket and must be referenced here: https://static.eurostar.com/shared/carriers/