SDC Site Tiles

A versatile module for displaying news stories and other media in predefined grids.

This project uses the Toolbelt as the build tool.

For help using the tool, see the Toolbelt project repository or run toolbelt --help once installed.

Contents

• Toolbelt
• Example data
• Variants
• Items
• Standard grid
• Breakpoints
• Global flags

Toolbelt

Preview

To build the html, css and javascript and preview the component:

toolbelt preview Points at data.json

toolbelt preview --multiple Points at multiple.json

Testing

To test the component scripts, run this command:

toolbelt test

Linting

To lint the component scripts, run this command:

toolbelt lint

Example data

Is available in /sample/data.json

Variants

Variants are alternative layouts for a grid of media items. Each grid of items can have one optional variant to allow the layout of the grid to be altered using CSS.

{
  "variant": 'alt2',
  "items": []
}

results in:

<div class="sdc-site-tiles sdc-site-tiles--alt2">

The following variants are currently available:

| variant | description | |---|---| | alt1 | 2 cols per row at tablet and desktop | | alt2 | alternates between 3 and 2 cols at desktop | | alt3 | alternates between 2 and 3 cols at desktop |

Items

Each item in the grid can optionally accept both a modifier and a template reference. A template reference can be used to point to another named handlebars template if the consumer wishes to display a different item type in the grid:

{
  "template": 'my-template'
  "modifier": null
}

The modifier can also be added to each item to alter its display characteristic using CSS. The following modifiers are available:

| modifier | description | |---|---| | hero-horizontal | Uses a full width horizontal layout at desktop | | hero-horizontal-tablet | Uses a full width horizontal layout at tablet |

Default item

If no template is set in an item object, a default is used. The default is a standard media item with an image, headline title and link:

{
  "template": null,
  "modifier": null,
  "type": {
    "video": true
  },
  "dateTime": "7 Feb",
  "tag": "Football",
  "title": "Champions League draw LIVE!",
  "listingImage": {
    "type": "image",
    "template": "http://uat.e.365dm.com/16/08/{width}x{height}/sergio-aguero-aguero-man-city-aguero-scores_3766300_3424114.jpg?20160818004905",
    "alt": "Manchester City's Argentinian striker Sergio Aguero",
    "caption": "Manchester City's Argentinian striker Sergio Aguero",
    "src": "http://uat.e.365dm.com/16/08/206x155/sergio-aguero-aguero-man-city-aguero-scores_3766300_3424114.jpg?20160818004905",
    "aspectRatio": "4/3",
    "dimensions": []
  },
  "link": "/",
  "related": null
}

Standard grid

In the default desktop view, the grid component defaults to a grid of 3 columns:

[1][2][3]
[4][5][6]

At tablet this breaks down to 2 columns:

[1][2]
[3][4]
[5][6]

At mobile this breaks down to a single column:

[1]
[2]
[3]
[4]
[5]
[6]

The same number of items is displayed at all breakpoints.

Fallbacks

If there are less than 3 items in the grid, it will fall back to the following layouts ([-] represents an empty slot):

1 item

Desktop:

[1][-]

Tablet

[1][-]

Mobile

[1]

2 items

Desktop:

[1][2]

Tablet

[1][2]

Mobile

[1]
[2]

Breakpoints

| desktop | tablet | mobile | |:---:|:---:|:---:| | >860px | 600-860px | <600px |

Global flags

Some flags are available in the root of the data that change attributes of the entire grid of tiles.

| flag | values | description | |:---|:---|:---| | hideTags | true/false | Does not output the html for a tag regardless of whether a tag is available in the data | | lazyImages | true/false | Sets the image markup in tags to use data-srcset instead if srcset for compatibility with bespoke js lazy loading scripts (used on skysports.com)