responsive-typescale
v2.0.1
Published
Responsive typography made easy. Different modular scales at each breakpoint.
Downloads
6
Readme
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-typescaleUsage
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().media[breakpointName] (css)
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)}
`;