@times-stories/style-guide

@times-stories/style-guide

The style guide for the @times-stories suite of packages

Installation

$ yarn add @times-stories/style-guide

Usage

Style guide provides some useful SASS mixins and settings for use across the application. If you're developing a custom page template, you'll likely find these useful.

It also exposes some JavaScript functions for checking page sizes dynamically (using window.matchMedia under the hood).

SASS

import `~@times-stories/style-guide`;

@media screen and (min-width: $breakpoint-mobile) {
  // ...
  @include smoothing;
  // ...
}

Mixins

• smoothing - for smoothing Times fonts across browsers
• columnSize(width, 5) - for creating consistent column sizes

Settings

• $breakpoint-small
• $breakpoint-mobile
• $breakpoint-tablet
• $breakpoint-desktop

JavaScript

import {
  isMobile,
  isSmall,
  isTablet,
  isDesktop
} from "@times-stories/style-guide/helpers";

isMobile(); // Boolean
isSmall(); // Boolean
isTablet(); // Boolean
isDesktop(); // Boolean