curtains 2go logo
window icon
14 million windows covered
23 years of exceptional service
customer reviews icon
Over 200,000 reviews
We're rated as 'Excellent'
tag icon
Everyday Low Prices
Made to measure just for you

Style Guide

A style guide/pattern library containing all the basic elements we currently implement on our site. Many questions will be answered here, so give it a read and all shall become clear. Enjoy! If something isn't here let me know and I'll just have to add it in I suppose.

Typograghy & Logos


Logo usage

Logos are added to the page using a class. This adds a base64 version of our SVG logo. Size must be explicly stated when adding to an empty element

.icon-b2g-logo-purple-nostrap .icon-b2g-logo-purple-strap .icon-b2g-logo-white-nostrap .icon-b2g-logo-white-strap
.icon-c2g-logo-purple-nostrap .icon-c2g-logo-purple-strap .icon-c2g-logo-white-nostrap .icon-c2g-logo-white-strap

Typograghy

Fonts are controlled via a base size of 16px and are then resized with rems. Heading fonts have a negative letter spacing of -0.05rem and are to be used sparingly. note: Raleway shows numbers badly.

Head Font: Raleway
https://www.fontsquirrel.com/fonts/raleway $heading-font-family

H1

Main Heading 2.5rem

H2

Sub Heading 2.25rem

H3

Section Heading 2rem

H4

Smaller Section heading 1.625rem
H5
Notes Heading 1.375rem
H6
1.25rem
Body Font: Avenir
https://www.myfonts.com/fonts/linotype/avenir/ $base-font-family
Smallerest 8px $smallerest
smallest 10px $smallest
smaller 12px $smaller
small 14px $small
smallish 15px $smallish
normal 16px $normal
big 18px $big
bigger 20px $bigger
biggest 22px $biggest
biggerest 24px $biggerest

Brand Colours


$brand-purple-dark
$brand-purple
$brand-light-purple
$brand-lightest-purple
$brand-orange
$brand-green
$brand-teal
$brand-blue
$brand-red
$brand-dark-grey
$brand-mid-grey
$brand-light-grey

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:

<div class="icon-3yrguarantee_banner" data-grunticon-embed></div>

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

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

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.

Example
<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.

<button class="btn btn-orange cart"> Add to your basket </button>

Teal or "Post Purchase Button"

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

<button class="btn btn-teal van"> Track Your Order </button>

Green or "Quote Button"

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

<button class="btn btn-green calculator"> Get an instant price </button>

Blue or "General Purpose Button"

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

<button class="btn btn-blue"> Search </button>

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

<div class="embed-responsive" data-youtube-id="_oEA18Y8gM0"></div>

In Page Video - Small

<div class="embed-responsive" data-youtube-id="_oEA18Y8gM0" data-size="small"></div>

Video via modal (show thumbnail)

<div class="embed-responsive" data-youtube-id="_oEA18Y8gM0" data-modal="true"></div>

Video via modal (show thumbnail) - Small

<div class="embed-responsive" data-youtube-id="_oEA18Y8gM0" data-modal="true" data-size="small"></div>

Video via modal (anchor link)

<div class="embed-responsive" data-youtube-id="_oEA18Y8gM0" data-modaltext="Watch Video"></div>

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

Offers are added via Product Admin. You search existing offers or create a new one on. essential fields when creating an offer:
Title Shown on the buy page
Internal Name how the offer is displayed in product admin
Swatch Image This is the offer icon, does not need html, does need extension. If left blank will be offer default (take from % off product)
images prefix if swatch image left blank, you can prefix the offer icon i.e. 'shnigles-' - offer name will be shingles-50off.png
type ignore
country should be ireland and united kingdom
visibilty Sets the visibilty of the offer, should be 'test' while creating the offer, 'all' when offer goes live
lining only applicaable for blackout lining offers
position location of the offer icon on each product
start / end as expected

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
I'd like to order one large phone with extra phones please. cell phone, no no no rotary... and payphone on half. Awww! Not toda! Ohh yea, you gotta get schwifty.
Prepare to be emancipated from your own inferior genes! I just wanna die! This is Principal. No relation. Awww!
Ew, Grandpa, so gross! You're talking about my mom! Man, that guy is the Red Grin Grumbold of pretending he knows what's going on. Oh you agree huh? You like that Red Grin Grumbold reference? Well guess what, I made him up. You really are your father's children. Think for yourselves, don't be sheep. I can finally go on that trip I've been talking about. Morty! The principal and I have discussed it!
<div id="accordion" class="accordian" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Red Grin Grumbold </a> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <span> I'd like to order one large phone with extra phones please. cell phone, no no no rotary... and payphone on half. Awww! Not toda! Ohh yea, you gotta get schwifty. </span> </div> </div> </div>

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:

node -v

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:

grunt --version
Initialise

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

grunt serve
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:

bower install [package]
Build

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

grunt build
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

Don't take our word for it,
we've got over 200,000 great reviews
5 Star

Curtains to change your outlook

I have just bought these really good curtains for our church hall and they have transformed the building.

5 Star

Curtains

Absolutely delighted with my curtains, thanks.

5 Star

Does exactly what it says on the tin

Have now ordered several items blinds and curtains, very easy instruction for measuring, loads of choice , very easy website...

5 Star

First Class Service

Clear easy to use ordering website and very fast delivery. The curtains are very well made and hang beautifully.

5 Star

Great value for money

Fast delivery, fitted great, very good value for money. I have also had curtains from you and previously have had made to...

5 Star

Blinds2go

Easy pleasant transaction. Quality merchandise.

5 Star

An excellent experience and quality goods

The order was dispatched promptly and emails kept me informed of progress. They arrived within the suggested timeframe and...

5 Star

Brilliant service!

I am extremely pleased with these two sets of curtains. I was looking for two pairs of inexpensive curtains and these fit...

5 Star

The process was very user friendly and speedy delivery

You must try this company. they have a great selection of products on an easy to use site. They kept me informed of delivery...

5 Star

Good quality, good service, good prices

Curtains purchased were of a good quality and their colour and description online were accurate unlike another company I...

5 Star

Made to measure curtains delivered 8 days from order

I am very pleased with the curtains I ordered, they hang beautifully and I would have no hesitation in recommending this...

ideal home logo
house beautiful logo
your home logo
living etc logo
woman home logo
home gardens logo
up arrow icon BACK TO TOP