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
; const breakpoints = default: base: 115 ratio: 12 lineHeight: 14 extraLarge: width: 1440 base: 115 ratio: 1175 lineHeight: 14 large: width: 1080 base: 1125 ratio: 1175 lineHeight: 135 medium: width: 720 base: 11 ratio: 115 lineHeight: 13 small: width: 480 base: 1 ratio: 11 lineHeight: 13 ; const typescale = ;typescalesize7;
String output:
{{{{
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.
breakpointName
initTypescale().mediaHelper 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
String output:
{
Tips
responsive-typescale
Instance
Exporting the It's a good idea to initialize the library using initTypescale, and then export the instance.
typescale.js
; const typescale = ; const size margin media padding = typescale;
anotherFile.js
; const componentStyle = ` `;