Vertical Rhythm for styled-components

Image for post
Image for post

Simple implementation of typographical vertical rhythm for styled-components that is flexible and modular.

Usage

Import options

Use the default export as a base for global styles.

import { createGlobalStyle } from 'styled-components';
import typography from '@styles/typography'; // replace path

const GlobalStyle = createGlobalStyle`
${typography}
`;

Use module exports for granulated element styling.

import styled from 'styled-components';
import { h3, p } from '@styles/typography'; // replace path

const Card = styled.div`
.title {
${h3}
}

.info {
${p}
}
`;

Structure and modifying

baseFontSize is inversely related to the typographic scale. By default, passing a value of 16 to the rem() function returns 1rem allowing pixel based design output in rem units.

baseUnit is directly related to the typographic scale. Values passed to the unit() function return multiples of the baseUnit.

The config object defines scales relative to the baseUnit and is where most modification should take place.

Individual element exports contain implementation detail but can serve more specialized modifications as well. For example, the keen eyed may have noticed that setting the line-height to equal the font size is the same as setting it to 1 and therefore redundant. However, in the case that it needs to be expanded as in the p element, this makes it easier to maintain the vertical rhythm by appending units to the configured size: rem(config.p.size + unit(2))

The typography variable wraps the individual elements for default export.

Striving for elegant solutions to complex problems. JavaScript developer `let me = (coffee) => code`

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store