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.

--

--

--

Principal software engineer — make stuff

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Conversations with the World’s JavaScript Developers Part 1

Day 3: Passenger Counting App

CloudPress — Part 2: CMX, the user-friendly variant of JSX!

NPM Crash Course

A How-to Guide on Making an Animated Loading Image for a Website

Angular — A Comprehensive guide to unit-testing with Angular and Best Practices

How to Reset MongoDB Every Day

Functional React Components

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
Ryan Todd Garza

Ryan Todd Garza

Principal software engineer — make stuff

More from Medium

A quick React intro.

Context vs. Composition in React

React Project Planning

How to optimize React.js app load time using React Lazy