@typestyled/core

Configurable core library to preserve spacing and font line heights aligned to a baseline grid.

@typestyled/core solves the problem of manually creating (global) variables to be shared across typed styles in order to preserve spacing and font line heights aligned to a baseline grid. Instead, @typestyled/core provides a configuration object that can be passed around. In addition, it also provides a few helper functions to compute line height and spacing units.

Look how easy it is to use:

import{configure}from'@typestyled/core'constcoreConfig=configure()

Features

• Default configuration
• Adjustable settings for custom configuration
• Baseline grid
• Spacing units
• Font alignment to baseline grid
• Line height computation function
• Spacing unit computation function

Quick Start

The easiest way to get started with @typestyled/core is to follow along as we go through the examples.

Installing @typestyled/core

We recommend using Yarn or npm for managing front-end dependencies. If you are new to package managers, the Yarn documentation is a good place to start.

To install @typestyled/core with Yarn, run:

yarn init
yarn add @typestyled/core

To install @typestyled/core with npm, run:

npm init
npm install --save @typestyled/core

Both Yarn and npm download packages directly from the npm registry.

Enable TypeScript and Typestyle

We recommend using @typestyled libraries with TypeScript. TypeScript is a strict syntatical superset of JavaScript and adds optional static typing to the JavaScript language, and TypeStyle is a type-safe CSS-in-JS framework that works nicely with Typestyled libraries.

Hello World with TypeScript and TypeStyle

We recommend using a bundler like webpack or Browserify, so you can write modular code and bundle it together into small packages to optimize load time.

A small @typestyled/core example looks like this:

import{configure}from'@typestyled/core'import{style}from'typestyle'const{
fontSize,// 16px
lineHeight,// 24px
piSpacingUnit,// 2px
omicronSpacingUnit,// 4px
xiSpacingUnit,// 8px
nuSpacingUnit,// 16px
lambdaSpacingUnit,// 32px}=configure()consthelloClass=style({
fontSize,
lineHeight,margin: `${lambdaSpacingUnit} auto`,padding: `${xiSpacingUnit}${nuSpacingUnit}`,backgroundColor: `yellow`,border: `${piSpacingUnit} solid red`,borderRadius: xiSpacingUnit,boxShadow: `${xiSpacingUnit}${xiSpacingUnit}${omicronSpacingUnit} #888`,width: `300px`})constelement=document.createElement('div')element.innerHtml='Hello World!'element.classList.add(helloClass)document.body.appendChild(element)

This code gets the default configuration, and uses the spacing units to make a CSS class with TypeStyle's style function.

Contribute

• Issue tracker: https://github.com/typestyled/core/issues
• Source code: https://github.com/typestyled/core

License

Copyright © 2017 The Typestyled Authors.

Licensed under the MIT license. See LICENSE.txt in the project root for complete license information.