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 must import / require in the base-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 with js Consumers must import / require in the base-styles.scss
• svgs - Contains all the SVGs used on Eurostar. This will be updated on an ongoing basis. As with the fonts this must not be used directly. One key difference is the split between carriers and icons. The SVGs for icons are compiled into a single spritesheet incorporating symbol tag thus allowing these to be consumed as inline SVGs by applying use. 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. The icons 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/. For carriers these are stored as individual files on the static S3 Bucket and must be referenced here: https://static.eurostar.com/shared/carriers/