npm install @holidayextras/brand-am-flughafen@2.5.1


Branding quick start

Brand Version
Airparks npm version
Alton Towers npm version
BCP npm version
Budget Family Breaks npm version
Chessington npm version
Default npm version
Essential Travel npm version
Facebook npm version
Globals npm version
Harry Potter npm version
Holiday Extras npm version
Legoland npm version
Peppa Pig npm version
Paultons npm version
Show and Stay npm version
Thorpe Park npm version
Warwick npm version

In order to create less ambiguity you only need to cherry pick from the brand instead of having to worry about brand-globals or bootstrap. Your application should only need to install brand-* and no other CSS frameworks.

Installing a brand into your application

npm install @holidayextras/brand-hx

An example compiling file that you might include in your app:

Each of the import statements you see below bring in their corresponding counterpart in the globals brand, this then references its counterpart in bootstrap. This enables us to make changes in the brand that directly relate to the same structure set out by bootstrap.

// ---------------------------------------------------------------------------------
// Core variables and mixins
@import '../node_modules/@holidayextras/brand-hx/src/less/variables';
@import '../node_modules/@holidayextras/brand-hx/src/less/mixins';

// CSS Reset and dependencies
@import '../node_modules/@holidayextras/brand-hx/src/less/normalize';
@import '../node_modules/@holidayextras/brand-hx/src/less/print';
@import '../node_modules/@holidayextras/brand-hx/src/less/glyphicons';

// Core CSS
@import '../node_modules/@holidayextras/brand-hx/src/less/scaffolding';
@import '../node_modules/@holidayextras/brand-hx/src/less/type';
@import '../node_modules/@holidayextras/brand-hx/src/less/code';
@import '../node_modules/@holidayextras/brand-hx/src/less/grid';
@import '../node_modules/@holidayextras/brand-hx/src/less/tables';
@import '../node_modules/@holidayextras/brand-hx/src/less/forms';
@import '../node_modules/@holidayextras/brand-hx/src/less/buttons';
// ---------------------------------------------------------------------------------

Referencing the assets CDN

All references to the assets contained within this repo can be accessed via the following S3 URL.




Important notes about referencing assets

Please note that if you're referencing these assets inside your application you will need to cloudfront the S3 path to benefit from a CDN. Do not just reference the S3 path as this will dramatically reduce your page speed.

The holidayextras specific cloudfront URL has already been created with the appropriate caching setup. This can be found here.


*Only used to be for .holidayextras.co.uk. Seek assistance from INF if you wish to use these deployed assets on a different domain



An example image reference might be:

<img class="img-responsive" src="http://d17s4kc6349e5h.cloudfront.net/legoland/assets/Images/bricks/blue-bricks.png" alt="Legoland blue brick" itemprop="image">

Brand CSS Deployment

Upon merge to master, Circle will now build a minfied CSS file for every /brand/theme-deployment/ LESS file. This will be deploy a versioned file to the Brands S3 Bucket here. If you need to access the filename for the recently compiled and deployed theme you need to review the Circle CI logs for the recent merge. Here's an example, scroll down to $ ./scripts/deploy.sh to view the filename.

Example URLs that will provide you with the compiled branding + source maps.

http://d17s4kc6349e5h.cloudfront.net/holidayextras/stylesheets/3.0.0/theme.css http://d17s4kc6349e5h.cloudfront.net/holidayextras/stylesheets/3.0.0/theme.min.css http://d17s4kc6349e5h.cloudfront.net/holidayextras/stylesheets/3.0.0/theme.map.css

More information on brand development

Brand Screenshot Tests

It is possible to run screenshot tests against live URLs upon pull request builds. Read for more info