https://github.com/madeleineostoja/satchel
The little bag of CSS-in-JS superpowers
https://github.com/madeleineostoja/satchel
css css-in-js css-library css-utilities emotion functional-css styled-components
Last synced: about 1 year ago
JSON representation
The little bag of CSS-in-JS superpowers
- Host: GitHub
- URL: https://github.com/madeleineostoja/satchel
- Owner: madeleineostoja
- License: mit
- Created: 2020-05-02T10:24:54.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2023-01-26T22:59:32.000Z (over 3 years ago)
- Last Synced: 2025-03-17T18:53:51.127Z (about 1 year ago)
- Topics: css, css-in-js, css-library, css-utilities, emotion, functional-css, styled-components
- Language: TypeScript
- Homepage: https://www.satchel.style
- Size: 947 KB
- Stars: 16
- Watchers: 1
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Satchel
[](https://www.npmjs.com/package/satchel-css) [](https://github.com/peppercornstudio/satchel/actions?query=workflow%3Atests) [](https://codecov.io/gh/peppercornstudio/satchel) [](https://github.com/peppercornstudio/satchel/blob/master/LICENSE.md)
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](https://www.satchel.style/normalize)
- [Element-specific resets](https://www.satchel.style/reset)
- [Automagical fluid units](https://www.satchel.style/fluid)
- [Low-level grid helpers](https://www.satchel.style/grids)
- [Aspect-ratio tools](https://www.satchel.style/aspect)
- [Color transforms](https://www.satchel.style/color)
- [Font importer](https://www.satchel.style/font)
- [Typography helpers](https://www.satchel.style/typography)
- [Positioning shorthands](https://www.satchel.style/position)
- [Range element abstractions](https://www.satchel.style/range)
- [Clearfix](https://www.satchel.style/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](https://tabatkins.github.io/specs/css-nesting/#nest-selector). Popular CSS-in frameworks like [styled-components](https://styled-components.com/), [Emotion](https://emotion.sh/), [Linaria](https://linaria.now.sh/), and any other tool built on top of the [Stylis](https://github.com/thysultan/stylis.js) preprocessor work out of the box.
## Installation & Usage
Install Satchel from NPM
```bash
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](https://emotion.sh) or [styled-components](https://styled-components.com).
```javascript
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](https://www.satchel.style)**