@times-stories/style-guide
v1.2.2
Published
> The style guide for the `@times-stories` suite of packages
Downloads
9
Keywords
Readme
@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 browserscolumnSize(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