Branding quick start
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.
http://s3-eu-west-1.amazonaws.com/uxui-assets/brand/assets/
e.g.
http://s3-eu-west-1.amazonaws.com/uxui-assets/legoland/assets/Images/bricks/blue-bricks.png
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.
http://d17s4kc6349e5h.cloudfront.net/brand/assets/
*Only used to be for .holidayextras.co.uk. Seek assistance from INF if you wish to use these deployed assets on a different domain
e.g.
http://d17s4kc6349e5h.cloudfront.net/legoland/assets/Images/bricks/blue-bricks.png
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