Digital design guide

Guidelines for digital styling and introduction to CSS and JS assets

Flat html templates can be found here.

Table of Contents

 

Colours

Colours used by the RSC, with hex codes and SCSS variable names
Colours used on the RSC website, with hex codes and SCSS variable names
© RSC Browse and license our images

Typography

RSC online typefaces, with descriptions of use and pixel sizes
Typefaces for RSC website with pixel heights and weights
© RSC Browse and license our images

Breakpoints

The site is built 'Mobile First', with the following breakpoints:

  • Small - 480px
  • Smadium - 600px
  • Medium - 790px
  • Large - 1024px
  • Extra Large - 1440px

SCSS Table of Contents

We use SCSS (with Compass and Susy) to construct the CSS. All files are contained in a GIT repository, please contact IT Software Development for access.

There are two SCSS files with their own partials: styles.scss & shop.scss. Both files have their own -IE10 alternatives: ie.scss & shop-ie.scss. All processed CSS files are min'd manually.

For the Select Your Own Seat portion of the ticket buying process there is a separate vanilla CSS file called syos.css. This formatted differently from the other stylesheets and so is kept out of the SCSS workflow.

Styles.scss Partials

  1. _variables
  2. _mixins
  3. _base
  4. _global
  5. _layout
  6. _whatson
  7. _modules
  8. _simplebar
  9. _photoswipe

1. Variables

  1. Breakpoints
  2. Max Widths
  3. Margins + Spacing
  4. Colours
  5. Fonts
  6. Font Sizes
  7. Borders
  8. Letter Spacing
  9. Animation + Transitions speeds
  10. Animations
  11. (Baremetrics variables)

2. Mixins

  1. image-2x
  2. (Baremetrics) Strip unit
  3. (Baremetrics) Convert to REM
  4. (Baremetrics) REM
  5. Old IE

3. Base

  1. Font Setup
  2. Border Box
  3. Susy Grid Layout
  4. Body Setup + extra classes
  5. Headings + general headline/subtitle settings
  6. Icons
  7. Buttons, Links + Button Links
  8. Notices, Highlights
  9. Paragraphs, Captions + Font Styles (including some helper classes, centered copy etc)
  10. Images
  11. Background Colours
  12. Helper Classes
  13. Animations

4. Global

  1. Burger Menu
  2. Header (including Login & Search)(has experimental header layout included but not used)
  3. Nav
  4. Sub Nav
    1. Child/Parent based positioning for Sub Nav
  5. Search Box
    1. Search Buttons
  6. Footer
  7. Ticket Timer

5. Layout

  1. Main Container
  2. Articles, Headers + Section
  3. Hero/Main Image - Homepage, Section Hubs + Play Hub
    1. Main Image + Hero Image, all templates
    2. Homepage Section Intros (Hide Image, smaller sizes)
    3. Hero Images for Homepage + Section Hubs
    4. Video/Link Hero Image
  4. Play Hub Header
    1. Right Side Menu
    2. Main Play Hub image
    3. Default Header
    4. Media Header
  5. Main Container General Classes + Styles
    1. Copy + content styles
    2. Figure + Video Captions
    3. Photo Credits
  6. Grid Example Classes (instructions in SASS for where these classes are to be used)
  7. Grid Layouts
  8. Grid Helper Classes, Widget & Widget Containers

6. What's On

  1. Header
    1. Header setup styles
    2. Questions + Filters
    3. Questions Transport
    4. Filter Search Indicators
    5. Apply Filters
    6. Extra Questions (In cinemas, Search) + Filters
  2. Results Wrapper + Inner
  3. What’s On Grid Item
  4. View Selector Button
  5. Calendar View

7. Modules

  1. Search Results
  2. Video Holders
  3. Performance Lists
  4. Floating Menu
  5. Close Buttons + Dialog UI Close Buttons
  6. Cookies Bar & Info Pop Up
  7. Title Treatments
  8. Breadcrumbs
  9. Forms etc
  10. Basket + Tessitura Forms
    • There is a branch of the Git with a new updated Basket. Need to co-ordinate with IT to change this over
  11. Kendo Styling
  12. Extra Button/Checkbox styling
  13. Intro Boilerplate (May not be used)
  14. Quick Links
  15. Loading Animation
  16. Page Section Headers + Search Result Headers
  17. More + Less Buttons
  18. Priority Booking messages
  19. Social Sharing box
  20. On Tour + In Cinemas in Play Hubs
  21. Sponsors Logo
  22. Blogs Extra Styling
  23. JQuery Dialog UI
  24. Pikaday Calendar
  25. Banner LinksGalleries - Cast & Creative + Inline Galleries
    1. Slick Slider - Legacy, needs to be deleted when new galleries implemented
    2. Next + Prev Buttons - Legacy, needs to be deleted when new galleries implemented
    3. Cast & Creative Widget - Legacy, needs to be redesigned
    4. Cast Profile - Legacy, needs to be redesigned
    5. Cast Thumbnails - Legacy, needs to be redesigned
    6. Creatives - Legacy, needs to be redesigned
    7. Gallery Launcher
    8. Gallery Widget - Legacy, needs to be deleted when new galleries implemented
  26. Events Hub List Widget
  27. Sitefinity Resets
  28. Mix Blend Mode Fallbacks

Shop.scss Partials

  1. _shopstyles

1. Shopstyles

  1. Greedy Nav
  2. Shop Page Article, Initial Layout
  3. Shop Header
  4. Product Container + Elements
  5. Hero Containers
  6. Listing Containers
  7. Shop Featured Item
  8. In Focus Item
  9. Banner
  10. Footer
  11. Cart

Javascript, Table of Contents

The JS is broken into 6 files before being uglified and min'd. All files are contained in a GIT repository, please contact IT Software Development for access.

  1. main.js
  2. base-template.js
  3. play-hub.js
  4. whatson.js
  5. CAB_cast.js - Delete when new Cast Widget is designed + deployed
  6. CAB_gallery.js - Delete when new Gallery Widget is deployed

1. Main

  1. Global Variables
    1. Setup vars
    2. Play Hub vars
    3. What's On vars
    4. Base Template vars
    5. Module vars
  2. On Load
    1. Initial + Resizing (layouts and resets)
    2. Photoswipe setup (new galleries)
    3. Adding Modernizr Test for Mix Blend Mode
    4. Homepage QuickLinks Reveal
    5. ShowHidden setup
    6. Nav Functions
    7. Info Pop Up (Cookies) Set Up
    8. Search Functions
    9. Form Calendars
    10. Education Resource
    11. FAQ Contact Form Reveal
    12. What’s On Functions, inc Pikaday Calendars
    13. Horizontal Scrollers
    14. Play Hub Functions
    15. Hero Video Functions
    16. Performance List Filtering, inc Pikaday Calendars
    17. Social Sharing
    18. Conditional Forms
  3. Global Functions
    1. Expandable Modules Functions
    2. Horizontal Scroll Functions
    3. Show/Hide Function
    4. Query String Variables
    5. Break point setting
    6. Resize videos
    7. Play youtube video
    8. Touch Device testing
    9. Array Adding
    10. Info PopUp functions
    11. Photoswipe
    12. Conditional Forms (Vis Comms Request Form)

2. Base Template

  1. Sub Nav Toggle
  2. Global Search Toggle
  3. Education Resources Search Link

3. Play Hub

  1. Performance List Filters
  2. Compare Dates

4. What's On

  1. Open What’s On Question
  2. Close Question
  3. GimmeGo (scroll window)
    • ScrollTo
  4. Grid Item Click + Expand Function
  5. Update What’s On Link
  6. Show Grid/Calendar View
  7. Calendar Functions, animation

5. Cast & 6. Gallery

Scripts by external supplier to control image, multimedia and cast & creative galleries. These are being replaced by Photoswipe.

3rd Party Javascript Plugins

We use a number of plugins for various purposes across the site. On the live site these are included in either header.js or footer.js

  1. JQuery 1.11.3
  2. JQuery UI
  3. Greensock
    1. TweenLite
    2. CSS Plugin
    3. EasePack
  4. Magnific Popup (Used in shop but should be gotten rid of)
  5. Sharrre (Social Sharing)
  6. Photoswipe & Photoswipe UI (RSC template by Andrew O'Regan)
  7. Pikaday & Pikaday Responsive (Calendars)
  8. Simplebar (Scrollbars across the site, needs to be updated)
  9. SlickSlider (Old Galleries, needs to be removed from the site)
  10. Modernizr & RespondJS

Grid Examples

C-WB

Centered Content, Widgets Below

Used for main copy/content when cross promotional + related content widgets are below.

Evil noble christian inexpedient war hope against grandeur chaos dead truth deceptions moral. Burying truth transvaluation justice gains. Zarathustra salvation horror hatred joy law fearful faith prejudice derive marvelous. Pious deceptions reason enlightenment evil fearful abstract law hatred. Dead ascetic justice spirit convictions oneself gains.

L-WR

Left Content, Widgets Right

Used for main copy/content when cross promotional + related content widgets are in an aside to the right on larger sizes.

Virtues justice ocean of derive. Holiest play pinnacle play endless holiest prejudice chaos ascetic. Mountains holiest moral will god. Christian oneself sea self free victorious strong deceptions marvelous justice prejudice morality. Faithful ocean philosophy decieve philosophy law.

Twelfths

 
 
 
 
 
 
 
 
 
 
 
 

Sixths

 
 
 
 
 
 

Quarters

 
 
 
 

Thirds

 
 
 

Halves

 
 

Full

 

Thirds to Twelfths

These items are a 3rd of the width at small sizes, growing to 6ths from medium size and finally 12ths at the largest sizes

 
 
 
 
 
 
 
 
 
 
 
 

Halves to Sixths

These items are a half of the width at small sizes, growing to 3rds from medium size and finally 12ths at the largest sizes

 
 
 
 
 
 

Full to Quarters

These items are full width at small sizes, growing to halves from medium sizes and finally 4ths at the largest sizes

 
 
 
 

Sidebars

Main content will generally float to the left of the page. In this example, two items of a sidebar in red are shown beneath the main content, but to the right from medium sizes and up.

 
 
 

You may also like