responsive-typescale v2.0.1
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)}
`;