Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hauptrolle/stitches-utils
Helpful stitches shorthand utilities combined in one package
https://github.com/hauptrolle/stitches-utils
css-in-js stitches stitches-utils
Last synced: about 2 months ago
JSON representation
Helpful stitches shorthand utilities combined in one package
- Host: GitHub
- URL: https://github.com/hauptrolle/stitches-utils
- Owner: hauptrolle
- Archived: true
- Created: 2020-09-04T05:41:37.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-07-18T23:35:45.000Z (about 1 year ago)
- Last Synced: 2024-07-08T12:53:46.693Z (3 months ago)
- Topics: css-in-js, stitches, stitches-utils
- Language: TypeScript
- Homepage: https://github.com/hauptrolle/stitches-utils
- Size: 438 KB
- Stars: 34
- Watchers: 4
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-list - stitches-utils
README
# stitches-utils
[](#contributors-)
> Helpful stitches utilities like `marginY`, `marginX` etc. combined in one package
 
---
## Installation:
`yarn add stitches-utils`
or
`nom install stitches-utils`
## Usage:
Import all utils
```jsx
import { createStyled } from "@stitches/react";
import * as utils from "stitches-utils";
export const { styled, css } = createStyled({
utils,
});
```
Import specific utils
```jsx
import { createStyled } from "@stitches/react";
import { mx, my } from "stitches-utils";
export const { styled, css } = createStyled({
utils: {
mx,
my,
},
});
```
## Utils overview:
| Utility | Properties |
| ------------ | ---------------------------------------------------- |
| m | marginTop, marginRight, marginBottom, marginLeft |
| mt | marginTop |
| mr | marginRight |
| mb | marginBottom |
| ml | marginLeft |
| mx, marginX | marginLeft, marginRight |
| my, marginY | marginTop, marginBottom |
| p | paddingTop, paddingRight, paddingBottom, paddingLeft |
| pt | paddingTop |
| pr | paddingRight |
| pb | paddingBottom |
| pl | paddingLeft |
| px, paddingX | paddingLeft, paddingRight |
| py, paddingY | paddingTop, paddingBottom |
| br | borderRadius |
| btlr | borderTopLeftRadius |
| btrr | borderTopRightRadius |
| bblr | borderBottomLeftRadius |
| bbrr | borderBottomRightRadius |
| w | width |
| minW | minWidht |
| maxW | maxWidth |
| h | height |
| minH | minHeight |
| maxH | maxHeight |
| boxSize | width, height |
## Custom utils:
It's also possible to build custom utils by using the `composeUtil` function.
```jsx
import { createStyled } from "@stitches/react";
import { composeUtil } from "stitches-utils";
const size = composeUtil("width", "height");
export const { styled, css } = createStyled({
utils: {
size,
},
});
```
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Achim Rolle
💻 📖 💡 👀
Bernardo Raposo
💻 📖 💡 ⚠️ 🤔
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!