madeleineostoja / satchel

The little bag of CSS-in-JS superpowers

Satchel

Satchel is a tiny collection of CSS-in-JS utilities that automates common patterns, saves time, encourages consistency, and makes developers' lives easier.

Features

• Configurable normalization
• Element-specific resets
• Automagical fluid units
• Low-level grid helpers
• Aspect-ratio tools
• Color transforms
• Font importer
• Typography helpers
• Positioning shorthands
• Range element abstractions
• Clearfix

All of Satchel’s utilities return plain strings, so they work almost everywhere. The only prerequisite is that your environment supports nested CSS selectors. Popular CSS-in frameworks like styled-components, Emotion, Linaria, and any other tool built on top of the Stylis preprocessor work out of the box.

Installation & Usage

Install Satchel from NPM

npm i satchel-css

Import Satchel’s utilities and embed them in CSS template strings by wrapping them in ${ } braces.

While Satchel’s utilities will work in plain strings, to support nested selectors out of the box you’ll probably want to use them alongside a CSS-in-JS library like Emotion or styled-components.

import { css } from '@emotion/core';
import { reset, fluid } from 'satchel-css';

const buttonStyles = css`
  ${reset('button')}
  background: blue;
  color: white;
`;

const headingStyles = css`
  ${fluid('font-size', '2rem', '3.5rem')};
`;

API

Read the full documentation at satchel.style