Typograghy & Logos

Logo usage

Typograghy

Brand Colours

Icons

Using grunticon, base64 background images are created from SVGs, and automatically added to assests/css/icons.data.svg.css. they are then accessible via the .icons-{filename} selector. It is important to set width and height to the element.

If you require access to the SVG in the document please add data-grunticon-embed:

This will automatically insert the SVG (not the backgorund image) and make the class .st0 availble for css styles.

grunticon also provides a script, which handles PNG fallbacks which are automatically generated

Why?

There are 100+ icons, which obviously adds many extra requests - grunticon means you can create and edit SVGs as normal - without having to edit spritesheets, create fallbacks and handle imageswapping for unsupported browsers whilst still having the benefit of making only one server request!

Grid System

We use the flexboxgrid.com grid system, placed on top of the bootstrap (4.0) flexbox grid. Both follow the same syntax. It is essential to add the .row element for flexbox to be activated

Alignment

Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column

.start-

<div class="row start-xs">
	<div class="col-xs-6">
		<div class="box">
			start
		</div>
	</div>
</div>

		

.center-

<div class="row center-xs">
	<div class="col-xs-6">
		<div class="box">
			start
		</div>
	</div>
</div>

		

.end-

<div class="row end-xs">
	<div class="col-xs-6">
		<div class="box">
			end
		</div>
	</div>
</div>

		

Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes.

<div class="row center-xs end-sm start-lg">
	<div class="col-xs-6">
		<div class="box">
			All together now
		</div>
	</div>
</div>

    

.top-

<div class="row top-xs">
	<div class="col-xs-6">
		<div class="box">
			top
		</div>
	</div>
</div>

		

.middle-

<div class="row middle-xs">
	<div class="col-xs-6">
		<div class="box">
			center
		</div>
	</div>
</div>

		

.bottom-

<div class="row bottom-xs">
	<div class="col-xs-6">
		<div class="box">
			bottom
		</div>
	</div>
</div>

		

Buttons

When using buttons we use the "pretty button" mixin with a range of colour variables and icons depending on the button. All of which can be found in the _buttons.scss file located within the scss folder. The 3 main uses of buttons and their styling are as follows;

Orange or "Buy Button"

Used for anthing that involves purchasing or customers journey when buying to guide the customer through the process.

Teal or "Post Purchase Button"

Used for informational direction on such pages as the order tracking page.

Green or "Quote Button"

Used only for getting a instant price on the buy page.

Blue or "General Purpose Button"

Used when none of the above are applicable, e.g. "Continue Shopping" and "Search".

Video

We use the LazyYT.js script to embed youtube videos either in page or via a modal. Script will grab the thumbnail, title and video time to present in page. On click thumbnail is swapped for real video.

n.b. script has been edited - so don't update it!

In Page Video

In Page Video - Small

Video via modal (show thumbnail)

Video via modal (show thumbnail) - Small

Video via modal (anchor link)

Newsletters

Offers

We currently undertake 2 types of offers, both of which we need to add a slider, offer icon and snip to the site.

1) Individual products / ranges / collections

Products are selected via the 'Offer Items' tab, however this is best left to Max

Accordian

Our Accordian is based on the class Bootstrap version. Key notes where we differentiate:

• Panel Heading does not need the H4 tag
• Direction arrows have been added and are now automatic
• you MUST wrap content in a span. Otherwise Jquery won't take into account the padding of the panel-collapse element and the animation will jutter

Carousel

Carousel by owlcarousel. No changes made. This component is used on the homepages, the trust widget and the buy page product slider. Style can be esily overriden with a new ID, initiated via JS and then styled

Image 123

Placeholder text 123

Image 124

Placeholder text 124

Image 125

Placeholder text 125

Image 126

Placeholder text 126

Image 127

Placeholder text 127

HTML

Jquery

Grunt Workflow

Install

Grunt and Grunt plugins are installed and managed via npm, the node.js package manager. Node.js install package can be downloaded from the Node.js website.

Once node.js has been installed, you can check it is working correctly by asking node what version it is running:

Once node.js is installed, to get grunt.js on your Mac you can run in the terminal: sudo npm install -g grunt-cli

Check the installation and version:

Initialise

To initialise Grunt, navigate to the necessary folder using terminal and run the command:

Grunt serve overview

The grunt file is set up to watch website files and automatically do the following when any changes are made and grunt is initialised.

• Check JS - Make sure js code styles are up to par and there are no obvious mistakes.
• Inject Bower - Inject Bower components into the HTML file
• Process SASS/SCSS - Converts SASS/SCSS to CSS.
• Prefix CSS - Adds vendor prefixes for browsers up to 2 versions behind.
• BrowserSync - Gives URL for synchronised browser testing.
• Watch - Watches files for changes. See watch overview below.

Adding external libraries

Bower manages all the frameworks, libraries, assets, and utilities on the website and keep them up-to-date. You can search for packages on Bower and install using the following replacing [package] with the package name:

Build

To build the site to deploy, navigate to the necessary folder using terminal and run the command:

Grunt build overview

The grunt file is set up to go through a more rigorous procedure upon build following the process below.

• Clean - Cleans out /dist/ folder ready for newly built files.
• Prepare Minify - Reads HTML for usemin blocks to enable smart builds that automatically concat, minify and revision files. Creates configurations in memory so additional tasks can operate on them.
• Clean JS - Make sure js code styles are up to par and there are no obvious mistakes.
• Process SASS/SCSS - Converts SASS/SCSS to CSS.
• Prefix CSS - Adds vendor prefixes for browsers up to 2 versions behind.
• Concatenate files - Join multiple JS/CSS files together into 1.
• Uglify - Process JS files to compress variable and function names.
• Modernizr - Include Modernizr
• Minify JSON - Minify JSON files
• Add File Revisions - Adds file revision to image filename to stop caching issues.
• Minify - Commits configurations in memory.
• Unused images - Outputs a list of images not used in HTML, CSS & JS files to: unused-images.txt
• Check pages - Checks built files for broken links, compression, response times and others.
• Watch - Watches files for changes. See watch overview below.

Grunt watch overview

Grunt watches website files and automatically does the following when any changes are made and grunt is watching.

• Bower - The bower.json file governs all js packages in the project and keeps packages up-to-date.
• ESLint - Make sure js code styles are up to par and there are no obvious mistakes.
• SASS/SCSS - CSS preprocessor allowing you to use SASS/SCSS which outputs as CSS.
• svgmin - Minifies SVG Files in Icons folder.
• GruntIcon - Creates PNG backups for SVG files in Icons folder and CSS file to load in what works.
• imagemin - Minifies all images in project

SCSS