curtains 2go logo
window icon
14 million windows covered
24 years of exceptional service
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


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 $heading-font-family


Main Heading 2.5rem


Sub Heading 2.25rem


Section Heading 2rem


Smaller Section heading 1.625rem
Notes Heading 1.375rem
Body Font: 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



Using grunticon, base64 background images are created from SVGs, and automatically added to assests/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


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


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


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



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



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


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 class="row top-xs">
	<div class="col-xs-6">
		<div class="box">



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



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



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>


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>



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


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


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

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]

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


Don't just take our word for it, read what our customers say
ideal home logo
house beautiful logo
your home logo
living etc logo
woman home logo
home gardens logo
up arrow icon BACK TO TOP