DHL Front End and AMP Templates

Working the very wonderful and talented Abigail Norris to complete the front end build using SASS and BEM to create an extendible and easily maintainable front end code base. Created a large selection of responsive and fast templates using modular HTML components, SCSS files and ES6 classes for a high-demand multi-lingual site.

Front end

The hero section of a lovely DHL Discover article page. A graphic representation of a logistics centre lends context to the bold and engaging article headline. — The DHL hero component, in situ on an article page template.

Features

Semantic HTML
ES6 classes
Modular SASS using the BEM technique
VMWare, Webpack and node build tools used to create a fast and replicable front end build stack

Visit the DHL website

AMP Templates

After the success of the DHL front end build, I extended the modular HTML and SASS code base to create AMP compliant HTML templates and stylesheets. This was my first experience with AMP and required research into the benefits and restrictions to ensure the new markup was AMP valid and integrated properly into the CMS.

The top half of a special accelerated mobile page on DHL's website. — The DHL accelerated mobile page template for articles.

Development

research into AMP restrictions and requirements
extension of existing code base to provide AMP valid stylesheets
implementation of standardised AMP modules to provide navigation, carousel and accordion functionality
implementation of correct head meta tags

See an example of an AMP template for DHL