responsive-typescale
TypeScript icon, indicating that this package has built-in type declarations

2.0.1 • Public • Published

responsive-typescale

Responsive typography made easy. Different modular scales at each breakpoint.

responsive-typescale outputs responsive CSS as JavaScript strings. It is designed to be used with modern CSS-in-JS libraries such as styped-components or emotion. Alternatively, the outputted strings can be appended onto the <head> directly, for example using insert-css.

Install

$ npm install responsive-typescale

Usage

import initTypescale from 'responsive-typescale';
 
const breakpoints = {
    default: {
        base: 1.15,
        ratio: 1.2,
        lineHeight: 1.4
    },
    extraLarge: {
        width: 1440,
        base: 1.15,
        ratio: 1.175,
        lineHeight: 1.4
    },
    large: {
        width: 1080,
        base: 1.125,
        ratio: 1.175,
        lineHeight: 1.35
    },
    medium: {
        width: 720,
        base: 1.1,
        ratio: 1.15,
        lineHeight: 1.3
    },
    small: {
        width: 480,
        base: 1,
        ratio: 1.1,
        lineHeight: 1.3
    }
};
 
const typescale = initTypescale(breakpoints);
typescale.size(7);

String output:

font-size: 4.121rem;
@media (max-width: 90em) {
    font-size: 3.556rem;
}
@media (max-width: 67.5em) {
    font-size: 3.479rem;
}
@media (max-width: 45em) {
    font-size: 2.926rem;
}
@media (max-width: 30em) {
    font-size: 1.949rem;
}

API

initTypescale(breakpoints?)

Creates a responsive-typescale instance that uses the passed breakpoints. Returns an object with the following functions:

breakpoints

Type: object - (TS: Breakpoints)

Default: sensibleDefaultBreakpoints

An object containing each Breakpoint. A Breakpoint contains a width key indicating when it activates, and its associated modular scale. The names of the breakpoints are used in the media function.

Note: It is required to have a Breakpoint with the key default. The default breakpoint does not need to have a width key.

initTypescale().size(scaleLevel, rhythmUnits?)

Returns a string with proper CSS that sets the font-size to the passed modular scale level. Uses the passed breakpoint from initTypescale, and the returned string contains the proper media queries for each breakpoint. Optionally, when rhythmUnits argument is provided, it also sets the line-height to the specified rhythm unit amount.

scaleLevel

Type: number

The level of the modular scale, starting from 0, which is the base.

rhythmUnits

Type: number

This argument will add line-height to the returned CSS string. A single rhythm unit is equal to the line-height of the body text (modular scale level of 0).

initTypescale().padding(direction, rhythmUnits)

Returns a string with proper CSS that sets padding in the specified direction by the specified rhythm amount. Uses the passed breakpoint from initTypescale, and the returned string contains the proper media queries for each breakpoint.

direction

Type: string - (TS: Direction)

Direction to apply the padding: top, bottom, left, or right.

rhythmUnits

Type: number

A single rhythm unit is equal to the line-height of the body text (modular scale level of 0).

initTypescale().margin(direction, rhythmUnits)

Same as the padding function, except it sets the margin CSS property.

initTypescale().mediabreakpointName

Helper function to generate CSS strings that target the specified breakpoint.

breakpointName

Type: string

Name (object key) of the breakpoint.

css

Type: string

Example (using a responsive-typescale instance that was initialized with the sensibleDefaultBreakpoints):

media.large('color: red;')

String output:

@media (max-width: 67.5em) {
    color: red;
}

Tips

Exporting the responsive-typescale Instance

It's a good idea to initialize the library using initTypescale, and then export the instance.

typescale.js

import initTypescale from 'responsive-typescale';
 
const typescale = initTypescale();
 
export const { size, margin, media, padding } = typescale;

anotherFile.js

import { size, padding } from './typescale.js';
 
const componentStyle = `
    ${size(0, 1)}
    ${padding('top', 3)}
`;

Readme

Keywords

none

Package Sidebar

Install

npm i responsive-typescale

Weekly Downloads

1

Version

2.0.1

License

MIT

Unpacked Size

40.8 kB

Total Files

33

Last publish

Collaborators

  • kennethwangdotdev