Global News Style Guide

Global News Style Guide

Source: assets/src/css/2-tools/_2-readme.scss, line 1

2 Tools

Includes all the public mixins and helper functions. These globally-available tools should make our development flow easier.

Source: assets/src/css/2-tools/_functions.scss, line 1

2.1 Functions

Functions to aid development

Source: assets/src/css/2-tools/_functions.scss, line 7

2.1.2 z( $layer )

Maps to predefined z-index value (e.g. z('hill') => z-index: 100)

  • Named z-index layer from $z-layers

    $layer

Source: assets/src/css/2-tools/_mixins.scss, line 1

2.2 Mixins

Simple mixins to aid development. Use @include over @extend as it is simpler and compresses better.

Source: assets/src/css/2-tools/_mixins.scss, line 156

2.2.1 animate

Include this mixin to set up a CSS animation

  • Name of the CSS @keyframes animation

    $name

  • Animation direction (normal, reverse, etc.)

    $direction

  • Animation duration in seconds (e.g. 0.35s)

    $duration

  • Animation easing function (e.g. ease-out)

    $ease

  • Number of times to iterate animation (infinite to animate continiously)

    $count

  • Specifies whether or not animation styles should be applied before or after the animation

    $fill-mode

Source: assets/src/css/2-tools/_mixins.scss, line 198

2.2.2 aspect-ratio

Include this mixin to force an element to maintain an aspect ratio of $width x $height

  • Width used to calculate aspect ratio

    $width

  • Height used to calculate aspect ratio

    $height

  • Set to 'height' or 'width' to maintain image aspect ratio

    $maintain-ratio-by

  • Specify name of the element you wish to expand to fill the container if it's not the first-child

    $type

Source: assets/src/css/2-tools/_mixins.scss, line 475

2.2.3 bodyPadding

Standardized padding for full-width layout elements

Source: assets/src/css/2-tools/_mixins.scss, line 271

2.2.4 chevron

Include this mixin to add a chevron icon via a pseudo-element

  • The pseudo element, either before or after

    $pseudo

  • Color code variable or hex value defining the chevron color

    $color

  • Size of the chevron icon in px (default: 2px)

    $size

  • The direction the chevron should be pointing (right, left, up, down) $animated = Whether or not the chevron is to be animated, either true or false

    $direction

Source: assets/src/css/2-tools/_mixins.scss, line 334

2.2.5 elevation

Standardize box-shadows and drop-shadows for the rebrand

$level: one of "s", "m", "l" $filter: add a drop-shadow filter rather than a box-shadow

Source: assets/src/css/2-tools/_mixins.scss, line 177

2.2.6 fit-by

Fit image by width or height without changing the image's aspect ratio

  • width or height

    $side

Source: assets/src/css/2-tools/_mixins.scss, line 7

2.2.7 grid-medium

Include this mixin to define a 9 column CSS grid

Source: assets/src/css/2-tools/_mixins.scss, line 19

2.2.8 grid-wide

Include this mixin to define a 12 column CSS grid

Source: assets/src/css/2-tools/_mixins.scss, line 31

2.2.8 grid-columns

Include this mixin to define a row with a fixed number of columns using flexbox

  • Number of columns you want to define

    $numCols

  • Class name to identify the column element

    $elementSelector

Source: assets/src/css/2-tools/_mixins.scss, line 316

2.2.9 gridItem

Include this mixin to calculate and set the width of a grid item in multi-column layout. Removes right margin from last item in row

  • Percentage width of each column in the grid

    $width

  • Amount of margin offset required for each column, calculated based on required margin

    $widthOffset

  • Index of last item in row, which should not have a right margin

    $lastItemIPerRow

Source: assets/src/css/2-tools/_mixins.scss, line 494

2.2.10 impactLabel

Creates a label with pink background and red text Ex: used in high-impact top story treatment and on posts in Editors Picks carousel

Source: assets/src/css/2-tools/_mixins.scss, line 392

2.2.11 lineClamp

  • number of lines until elipses get applied to truncated text

    $numLines

Source: assets/src/css/2-tools/_mixins.scss, line 126

2.2.12 outline

Include this mixin to add an outline to the outside of an element Used for showing focus on element

  • Color code variable or hex value defining the color of the underline

    $color

  • Top offset

    $top

  • Right offset

    $right

  • Bottom offset

    $bottom

  • Left offset

    $left

Source: assets/src/css/2-tools/_mixins.scss, line 258

2.2.13 pattern

Include this mixin to apply pattern background image

  • Pattern type, must correspond to a PNG file of format: images/pattern-${type}.png

    $type

Source: assets/src/css/2-tools/_mixins.scss, line 49

2.2.14 underline

Include this mixin to add an underline at the bottom of an element

  • Color code variable or hex value defining the color of the underline

    $color

  • 1 to always display the underline, 0 to display on hover / focus

    $initialOpacity

  • Underline height in px (default: 2px)

    $thickness

  • Left offset (use with $left to restrict underline width)

    $left

  • Right offset (use with $right to restrict underline width)

    $right

  • Whether to show line at the bottom of top of container (default: bottom)

    $orientation

  • Whether or not to animate in the underline

    $animate

  • Underline animation duration

    $duration

  • Offset amount from top or bottom

    $offset