Toolkit [ How To … ]

Main Navigation

Base Styles

12 Column Grid Code

Your starting point is a universal grid, divided into equal parts. It should be applied across all devices. This grid show is fluid and proportionally scales to fit any screen size.

Grid 974px

Use this grid if your website is not ready to move onto the new 1140px width, that is if most sites in your vertical are not using the this 'toolkit' version of the grid.

 
 
 
 
 
 
 
 
 
 
 
 

Wide Grid 1140px

 
 
 
 
 
 
 
 
 
 
 
 

lightbox Grid

 
 
 
 
 
 
 
 
 
 
 
 

Grid on a Portrait Tablet 696px

 
 
 
 
 
 
 
 
 
 
 
 

Colours Code

These colours are for designer reference only. For accessibility reasons, please also note the colour of the text being used.

Typography

Primary Main page text
#333333
Secondary Supporting text i.e. legal
#666666
Inactive
#999999
Error i.e. Warnings or form errors
#D21717
Links
#0070a5

Buttons + Icons

Primary Buttons or icons
#0073c5
Secondary Buttons only
#eaeaea
Success Icons only
#6dbb00
Sky Go Icons only
#44ad3a
Remote Record Icons only
#ed1c24
Never Miss Icons only
#0077ae

Backgrounds + Key Line

Dark Background
#eaeaea
Light Background
#f4f4f4
Key Line
#dcdcdc

Channels

Sky 1
#0076be
Sky Atlantic
#003663
Sky Arts
#734993
Sky Living
#87a0af
Sky Movies
#a51d4d

V3 Brand

Red
#ed1c24
Pink
#ed0677
Yellow Use primary text colour
#fdb913
Green Use primary text colour
#a6ce39
Blue Do not put text on top (it's not Accessible)
#00aeef

Shop

All text to be above 18px

Original
#d92231
Family
#ff6000
Movies
#78184c
Sports
#00549a
Complete
#00549a

Fonts Code

Sky-branded fonts.

  • Default Font
  • Medium Font
  • Instructions Font

Typography Code

  • Only a single 'Page Title' can exist on a page at one time. All other titles can be used multiple times.
  • Helvetica/Arial/Verdana should be used as fallback for when Sky fonts aren't available within the browser.
  • When mixing SkyTextMedium and skyTextRegular weights, Medium should always come first.
*Mobile size

Page Title (Sky Text Regular 52px 32px* )
Line-height 56px 36px*

Section Title (Sky Text Regular 44px 28px*)
Line-height 48px 32px*

Smaller Section Title (Sky Text Medium / Regular 36px 28px*)
Line-height 40px 32px*

Pod Title (Sky Text Medium / Regular 32px 28px*)
Line-height 36px 32px*

Smaller Pod Title (Sky Text Medium / Regular 28px 24px*)
Line-height 32px 28px*

Intro Copy (Sky Text Medium / Regular 24px 20px*)
Line-height 28px 24px*

Smaller Intro Copy (Sky Text Medium / Regular 20px)
Line-height 24px

Body text (Sky Text Medium / Regular 16px)
Line-height 20px

Smaller text (relative to container) Supportive text (fixed size) Legal copy

Instructional copy (Luna 24px)
Line-height 40px

  • List with grey bullet points
  • List with grey bullet points
  • List with grey bullet points

Error

Secondary

Inactive

Quotes

Add .medium to change font family to medium

'Strong' tags go to medium automatically

Text on dark background is white

Links next to normal text need chevrons

Text on light background is black

Links next to normal text need chevrons

Icons Code

Sprite

These are not likely to look good on Retina devices

Icon CSS Class How it looks
watch-now icon-watch-now
curved-arrow-bottom-left icon-curved-arrow-bottom-left
curved-arrow-down icon-curved-arrow-down
curved-arrow-right icon-curved-arrow-right
curved-arrow-top-right icon-curved-arrow-top-right
video-play icon-video-play

Skycons

These icons will look good on Retina devices and can be any size or (single) colour.

CSS Class How it looks with .colour with .hover-colour for designers
skycon-skyview
skycon-chevron-downview
skycon-infoview
skycon-arrow-rightview
skycon-plus-circleview
skycon-sky-plusview
skycon-tvview
skycon-twitter-replyview
skycon-arrow-down-leftview
skycon-chevron-upview
skycon-chevronview
skycon-facebookview
skycon-tickview
skycon-remote-recordview
skycon-warningview
skycon-carousel-playview
skycon-arrow-leftview
skycon-chevron-leftview
skycon-on-demandview
skycon-user-profileview
skycon-searchview
skycon-twitter-retweetview
skycon-atview
skycon-volumeview
skycon-twitter-favouriteview
skycon-expandview
skycon-carousel-pauseview
skycon-mouseview
skycon-shareview
skycon-never-missview
skycon-mailview
skycon-sky-goview
skycon-twitter-followview
skycon-pendingview
skycon-minifyview
skycon-twitterview
skycon-closeview
skycon-menuview
skycon-phoneview
skycon-cloudview
skycon-video-playview
skycon-google-plusview

Multi-Coloured SVGs

While there are only a few separate SVGs, we will serve these up separately

TBC

Buttons Code

Primary

Primary Link

Secondary

Secondary Link

Spinner Code

Components

Breadcrumbs Code

Forms Code

Select a payment type

- -
- -

In-Page Navigation Code

These modules are not yet complete. If you need them, please complete 'accessibility' checks an re-submit.

Sleek Nav

This module should be used when only a small section of the page changes after an item click.
If all of, or the majority of, the page changes please use 'classic navigation'.

This is a screenreader header for tabs

Screen reader header for First tab contents

beckham looking for help

Screen reader header for Second tab contents

something else

Screen reader header for Third tab contents

something else

Screen reader header for Fourth tab contents

something else

Screen reader header for Fifth tab contents

something else

Screen reader header for Sixth tab contents

something else

Screen reader header for Seventh tab contents

something else

Classic Tabs

This module should be used when only a small section of the page changes after an item click.
If all of, or the majority of the page changes please use 'In-Page Navigation'.

This is a screenreader header for tabs

Screen reader header for First tab contents

beckham looking for help

Screen reader header for Second tab contents

something else

Screen reader header for Third tab contents

something else

Screen reader header for Fourth tab contents

something else

Screen reader header for Fifth tab contents

something else

Screen reader header for Sixth tab contents

something else

Screen reader header for Seventh tab contents

something else

Lightbox Code

Show Lightbox | link that cant be tabbed to if lightbox is open

Large Lightbox

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Text:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Other Links

Accordion Code

The accordion is fully responsive.

  • First Accordion Item

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget commodo nulla. Sed nec magna pellentesque, aliquam orci eu, cursus augue. Morbi eget hendrerit nunc. Aliquam interdum non sem a scelerisque. In convallis est augue, eget dictum tortor posuere et. Vivamus neque dolor, elementum sed porttitor ac, aliquet sit amet lectus. Nullam libero arcu, auctor ut neque id, varius tempus arcu. Mauris rhoncus eros egestas facilisis convallis. Phasellus elementum elit eget ligula posuere malesuada

  • Second Accordion Item

    Second Accordion content

  • Third Accordion Item

    Third Accordion content

Carousel Code

The carousel is fully responsive, incorporates the video player and works on touch devices (not microsoft).

Default

Use a maximum of 4 lines of text in total (or 3 lines plus channel logo).

Skinny

Use a maximum of 2 lines of text in total (or 1 line plus channel logo).

Single Slide

This will behave like it isn't a carousel as there is only one slide.

Video Code

A wrapper for the Sky video player, The video will expand to fit the ratio of the video.

Share Code

A share component to share external articles.

Popup

Bar

Tooltip Code

A floating tooltip component, activated via a hover over a predefined element.
Hover
Remote Record Record Great Sky Content!

Utils

Toggle Code

Open Element

Hide

text with margins

1st content of 2 lines
2nd line Some more content for element toggling

Closed Element

Show

text with margins

1st content of 2 lines
2nd line Some more content for element toggling

Hash Manager Code

Change Hash | Change another Hash | unregistered Hash |

Responsive Images Code

Detect Code

View

  • current view:
  • is desktop:
  • is mobile:

Touch

  • Is touch supported:

Orientation

  • current orientation:
  • is landscape:
  • is portrait:

CSS

You can detect many css style capabilities, including:

  • transition:
  • transform: i.e. transform: translate(...)
  • support3D: i.e. transform: translate3d

External Libraries Versions

The toolkit provides static urls to a number of external libraries i.e jQuery + RequireJS.

Examples

Error Page Code

Below you will see a number of pages that use the Toolkit to build the page

The page you're looking for could not be found

The link you used may be out of date or the address (url) may have been typed incorrectly. Please check and try again.

Go to Sky.com

try one of these links