# @times-stories/style-guide

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

Latest version **1.2.2** (published 2019-05-07) · 0 weekly downloads

## Install

```sh
npm install @times-stories/style-guide
pnpm add @times-stories/style-guide
yarn add @times-stories/style-guide
bun add @times-stories/style-guide
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2019-05-07 |
| First published | 2018-11-09 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | chrishutchinson, flashcheeks |

## Links

- npm: https://www.npmjs.com/package/@times-stories/style-guide
- npm.io page: https://npm.io/package/@times-stories/style-guide

## Recent versions

- 1.2.2 (latest) — 2019-05-07
- 1.2.1 — 2019-04-04
- 1.1.2 — 2019-03-22
- 1.1.1 — 2019-03-20
- 1.1.0 — 2019-03-20
- 1.0.7 — 2018-11-09
- 1.0.6 — 2018-11-09
- 1.0.4 — 2018-11-09

## README

# @times-stories/style-guide

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

## Installation

```bash
$ 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

```scss
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

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

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

---
_Source: https://npm.io/package/@times-stories/style-guide · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._