Deprecated: Please use sky-uk/toolkit

Toolkit [ Getting Started … ]

Main Navigation

Base Styles

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.

974

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

Colours must be accessible, i.e. foreground and background must have high contrast

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

A full list of available colours.

Typography

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

A full list of typography examples.

Icons

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
skycon-facebook
skycon-gallery
skycon-google-plus
skycon-home

A full list of available Skycons.

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

Buttons

A full list of available buttons.

Spinners

All available Spinners.

Components

Accordion Code

  • 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

  • Fourth Accordion Item

    Fourth Accordion content with picture

Breadcrumbs

Detailed usage and examples of the breadcrumb component .

Carousel Code

Currently doesn't work on microsoft touch devices (pointer events)

Default

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

Single Slide

Skinny

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

Form Code

Select a payment type

- -
- -

In-page Nav 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.

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

Whole Page Nav

This module should be used when the entire (or most of) the page changes after an item click.

This is a screenreader header for tabs

Lightbox Code

A lightbox should be used when providing auxiliary information that needs to focus the all of the users attention. The Lightbox is centered and covers 10 columns of the grid. The lightbox should then contain a new 12 column grid. The lightbox goes full-width in mobile view.

Default Lightbox (Large)

If the content goes below the fold (on a desktop (fold considered 768) then use a new page.

Show Lightbox from DOM | Show Lightbox with callback

Lightbox using AJAX

This example allows the content of an external page be shown in a lightbox.

Show external content in Lightbox

Small Lightbox (under 350x350 pixels)

The lightbox fades in to the centre of the browser.

Show a small Lightbox from DOM

Share

A full list of available share options.

Tooltip Code

A tooltip should be used when providing auxiliary information that doesn't need all of the users attention. Activated via a hover over or a touch on an element.

Hover
Remote Record Record Great Sky Content!

Video Code

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

Utils

Detect

The .detect object allows you to check for a number of browser features and states.
  • Css (css style capabilities)
  • Touch (touch device support)

Detailed usage and examples of the detect component.

Event

  • .off Remove event listeners that were previously applied.
  • .on Add listeners for standard and custom events
  • .ready Detect when the document has finished loading (everything except images)
  • .trigger Trigger standard and custom events
  • 'resizeend' Know the moment a user has finished resizing the browser.

Detailed usage and examples of the event component .

Hash Manager

Change Hash | Change another Hash | unregistered Hash | wild card Hash 1 | wild card Hash 2 |

Libraries Code

The toolkit provides static urls to a number of external libraries.

jQuery

You can include jQuery of different versions.

RequireJS

You can include RequireJS.

BackboneJS

You can include BackboneJS.

UnderscoreJS

You can include UnderscoreJS.

Other

We also host versions of SessionCam and Test & Target javascript files.

Responsive Images Code

Toggle Code

Closed Element

Show

text with margins

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

Open Element

Hide

text with margins

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

Examples

Error Page Code

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