bbc/rmp-shared-assets

Name: rmp-shared-assets

Owner: BBC

Description: null

Created: 2016-05-04 07:48:59.0

Updated: 2017-10-10 14:45:13.0

Pushed: 2018-02-28 09:30:41.0

Homepage: null

Size: 966

Language: CSS

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

RMP Assets

An attempt to centralize assets that are used accross all RMP products, avoiding duplication where possible

NB This repo is public

• Logos
• Network brand colours

Installation

npm

npm install --save https://github.com/bbc/rmp-shared-assets

composer

{
    "repositories": [
        {
            "type": "vcs",
            "url": "git@github.com:bbc/rmp-shared-assets.git"
        }
    ],
    "require": {
        "bbc-rmp/shared-assets": "0.0.2"
    }
}

Usage - Network brand colours in sass

In order to use the networks.json you should add node-sass-json-importer to your package.json

• Include the _networks.scss file into your project.

  ort '../../../../../vendor/bbc-rmp/shared-assets/assets/sass/networks';
  

• Declare a mixin which applied brand specific styles

  in customBranding($colour1, $colour2, $colour3, $gradient) {
  tle {
  background-color: rgba($colour2, 0.75);
  
  
  

• Call @include applyBranding($prefix: '.', $wrapper: ''); to loop through the custom branding

Colours

• Colour1 - Schedule, keylines
• Colour2 - CTA lvl 1
• Colour3 - CTA lvl 2
• Gradient - Used for the large splash image

Network logos

All logos and variants are found in /assets/img/network-logos/{sid}{name}. Where name is changed for the variant you are using.

Type | Description | Example — | — | — Standard | Large, white and found on the network home pages | bbc_radio_one | Colour | Used against light backgrounds, such as those used on lower breakpoints of the network homepages | bbc_radio_one_colour Colour Alternative | Used against dark backgrounds, such as the radio nav (on hover) | bbc_radio_one_alt_colour Filled | White and almost identical to their “Standard” counterparts, but are always contained within filled circles; used against dark backgrounds, such as the radio nav | bbc_radio_one_filled Extended | Includes the BBC Radio logo and is found on the radioplayer console | bbc_radio_one_extended

Twig Helper

Register the extension in the app and inject your project composer.lock file. This allows the helper to get the version of the assets you are using in composer

['twig']->addExtension(
new RMPAssetExtension($useSSl = false, $composerLock = '../../composer.lock')

rmpAsset('path/to/the/image') helper allows you to get the current version of the asset you require. Logos are being used in your current release and will return a protocol-less path.

Example: //rmp.files.bbci.co.uk/rmp-shared-assets/{VERSION}/img/network-logos/national/bbc_radio_one.svg

Version is tied to the current tag of the repo.

Releasing new assets

If you add a new tag to the repo you should also build rmp-shared-assets in rmp jenkins Otherwise builds are auto deployed nightly