Sky Web Toolkit v2.0.0alpha.rc1

Last Updated: 20-12-2013

Using the Toolkit

<script src='//web-toolkit.global.sky.com/2.0.0alpha.rc1/scripts/toolkit.js'></script> <link rel="stylesheet" href="//web-toolkit.global.sky.com/2.0.0alpha.rc1/stylesheets/toolkit.css"/> <link rel="stylesheet" href="//web-toolkit.global.sky.com/2.0.0alpha.rc1/fonts/skycons.css"/>

Getting Started

Please look in the console for full developer notes

Please take a look here for anything that is not documented below. Global Guidelines

Components that need javascript initialised can be initialized for everything, or individual modules can be turned off. e.g. everything: toolkit.modules.init(); e.g. only Skycons toolkit.modules.init({skycons: true});

Please add the following classes to the html tag: lt-ie10, lt-ie9 and lt-ie8

Please add the following into you head tag:

Contributing

The source code is available in a private repository on Github, along with instructions for building/running the project locally. https://github.com/skyglobal/web-toolkit/

When adding comments to be seen by developers only you can use the following classes: developer-notes for hints and tips dependencies for external files required init for javascript

Feature Requests
Please check here to see if there is already a similar request. If not, create a New Issue and flag it as an 'enhancement'
Bug Reporting
Please check here to see if there is already a similar request. If not, create a New Issue and flag it as a 'bug'

Accessibility

'Tabbing 'will make the elements background blue and text and icons white.

For page text that is needed only for screen readers, add the class 'speak'.

Don't forget to add about half a day to each client-side card to give you time to use VoiceOVer on your page, check colour contrast and 'tabbing'!

Please go to the Nomensa Accessibility Page …

Coding Practice

As a rule we try to follow the following practices:

CSS
Use hyphens '-' within all class, ID and name attribute. Never camelCase or underscore.
JS
Where possible, use 'camelCase' for function/variable names.
Files / Directories
Where possible, use 'camelCase'.

Base Styles

12 Column Grid

Note how classes now never have underscores '_' but only hyphens '-' instead.

To get any of the following classses to work on mobile only, add -mobile to the end of the class name.

The grid is wrapped with 'skycom-container' which should be used to contain all your contents, or to contain modules individually .

The container is made up of up 12 columns 'skycom-1' through to 'skycom-12'. By default these float on the left.

To float a column on the right, add the class 'right'.

If too many floats have caused you container to have zero height, add the class 'clearfix'.

For older browsers, the first column in a row should also have the class 'alpha'.

To 'stick' headers to the top of the page when scrolling, use the class 'sticky'.

When links don't go to a new page, i.e. changing tabs please, use the class 'internal-link'.

To make some text for screen readers only, use the class 'speak'.

To hide an element, use the class 'hidden'.

To show an element, use the class 'visible'.

When the text shouldn't touch the edges of the columns (i.e. when they have a distinct background colour) use 'cushioned' class for padding.

Grid (974)

By default the grid is 974px wide.

 
 
 
 
 
 
 
 
 
 
 
 

Wide Grid (1140)

Add class grid-1140 to the parent of your containers i.e. to the body.

 
 
 
 
 
 
 
 
 
 
 
 

lightbox Grid

the 'skycom-offset1' class is used to centre the lightbox.

We also use another 'skycom-container' to create a new 12 column grid.

 
 
 
 
 
 
 
 
 
 
 
 

Grid on a Tablet (Portrait: 696)

 
 
 
 
 
 
 
 
 
 
 
 

Colours

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

The classes used here, starting with 'demo-' are NOT part of the toolkit.

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

Channel Colours

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

V3 Brand Colours

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 Colours

All text to be above 18px

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

Typography

When Sky Text fonts aren't available within the browser Helvetica/Arial/Verdana should be used.

All these headers work with or without the corresponding xxx-title classes. You can optionally add a smaller class to the headers too.

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

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

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

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

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

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

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

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

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

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

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

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.

Dont forget to include http://web-toolkit.global.sky.com/2.0.0alpha.rc1/fonts/skycons.css

Ensure aria-hidden is used on your skycon tags.

To make the icon have a colour, add the class colour to the icon.

To make the icon have a colour on hover, add the class colour-hover to the parent.

To Create Fonts: • save font into /static/font-svgs folder • Run `grunt fonts` • copy the icons JS from the skycons.css over the icons var in skycons.js • Run `grunt`

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

Multi-Coloured SVGs

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

SVG How it looks
TBC

Buttons

All buttons need the class btn. Submit buttons should be coded as button type=submit (not input type=submit)

Primary

Add the class primary.

Primary Link

Secondary

Add the class secondary

Secondary Link

Spinner

Add the class spinner-blue to get an ajax-style spinner icon.

Components

Breadcrumb

Forms

Add class sky-form to the container.

Add required attribute to field and a required class to the relevant label.

You can also use the attribute pattern for more detailed 'regex' validation.

You can customise error messages using a span class=feedback. see the date examples.

Dates only need the class 'date-picker' for the calendar to work. Optionally you can call $(selector).datePicker().

For a grey background, add class sky-well to the sky-form container.

Select a payment type

- -
- -

In-Page Navigation

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

If reinitialising tabs (e.g. after transition in a single-page app), call 'toolkit.hashManager.resetHash()' first.

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'.
Add Class 'page-nav'.
$('#demo-inpage-nav-tabs').inPageNav();

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'.
Add Class 'classic'.

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

Dont forget to think about things like stopping carousels when people open lightboxes.

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

Bind lightboxes to links using the href=#!lightbox/ then the ID of the element to be shown.

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

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

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

for videos: you also need RequireJS.

3:1 Carousel

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

Add the class hero-3-1.

Skinny Carousel

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

Add the class hero-skinny.

Video

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

Share

A share component to share external articles.

Popup

Ensure that href for all the social links match the 'share' urls as per the example e.g. https://twitter.com/intent/tweet?url=

Bar

Ensure that href for all the social links match the 'share' urls as per the example e.g. https://twitter.com/intent/tweet?url=

Examples

Error Page

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