Vertical Rhythm for styled-components
--
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.
Further reading
