achisholm

$turqouise:     #1abc9c;
$green-sea:     #16a085;
$emerald:       #2ecc71;
$nephritis:     #27ae60;
$peter-river:   #3498db;
$belize-hole:   #2980b9;
$amethyst:      #9b59b6;
$wisteria:      #8e44ad;
$wet-asphalt:   #34495e;
$midnight-blue: #2c3e50;

achisholm

ZE2 9AW - Perrie Beanie's, Skaw, Shetland
M1 5AN - Manchester
W13 8DL - The Duke of Kent, London

achisholm

//******************************************************************************
// Page Header.
//
// Styles for the main <header> section and including the main banner, main 
// search form and social media links.
//******************************************************************************

//==============================================================================
// Section Heading.
//

achisholm

.block {
    // Declarations for `.block`

    &__element {
        // Declarations for `.block__element`
    }

    &--modifier {
        // CSS declarations for `.block--modifier`

achisholm

Note: Don't just copy & paste this. ADAPT THE WIDTHS TO SUIT THE CONTENT.

TODO notes to self:

• Decide and articulate where you stand with most appropriate unit. em, px, or something else?
• Naming system – is mobile, tablet, desktop really the best method for naming the main horizontal divisions?
• Add sets of -up and -only suffixed mixins.

achisholm

{
    "productCount": "2",
    "total": "£ 106.00",
    "signedIn": true,
    "customerName": "Alan",
    "related_products_html": "<tr class=\"atb-confirmation js-atb-confirmation template\"><td colspan=\"6\"><div class=\"atb-confirmation-header\"><span class=\"atb-confirmation-header__icon icon icon--check\"></span><h1 class=\"atb-confirmation-header__title\">1 item add to <a href=\"/tcl/order.html\">your basket</a>.</h1><div class=\"atb-confirmation-header__close-control js-atb-close\">Dismiss <span class=\"icon icon--cross-2\"></span></div></div><div class=\"atb-related is-hidden\"><div class=\"atb-related__title\">Related items you may need</div><div class=\"atb-related__sub-title\">Lamps</div><table class=\"atb-related__table product-table p-t-0 product-table--ex-vat\"><tbody class=\"product-table__tbody\"><tr class=\"product-table__tr product\"><td class=\"product-table__td product__image\"><a href=\"\"><img src=\"https://www.tlc-direct.co.uk/Images/Products/size_1/LTFGL8ESCL.JPG\" width=\"1

achisholm

const path = require('path');
const webpack = require('webpack')
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = env => {
    return {
        mode: env.mode,
        entry: {

achisholm

extends /_includes/_layout

block vars
  - 
    var options = {
      pageTitle: "Christmas & Bank Holiday Opening Times",
      htmlClasses: "smooth-scroll"
    }

block append stylesheets

achisholm

// set/initialise app-scope vars
var productData
var orderData

isEmpty() - // Checks if an object is empty;

document 'keypress' listener // For some elements, simulate a click when enter key is pressed during focus.

var steps

achisholm

var app = {
    STEPS: [],
    DOM_ELEMENTS: {
        buttonBack,       // #buttonBack element
        buttonContinue,   // #buttonContinue element
        buttonPlaceOrder, // #buttonPlaceOrder element
        colourSelect,     // #colour element
        componentList,    // #componentList element
        inputFields,
        lengthInputFieldTemplate, // #templateLengthInputField element