https://github.com/jossmac/adjustable
Adjustable helper utilities for CSS-in-JS
https://github.com/jossmac/adjustable
Last synced: 12 months ago
JSON representation
Adjustable helper utilities for CSS-in-JS
- Host: GitHub
- URL: https://github.com/jossmac/adjustable
- Owner: jossmac
- License: mit
- Created: 2019-02-20T04:15:21.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-20T04:41:46.000Z (over 7 years ago)
- Last Synced: 2025-07-09T00:57:46.872Z (12 months ago)
- Language: JavaScript
- Size: 8.79 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# adjustable
> NOTE: This is not ready for production.
Adjustable is a helper to support Tailwind-style utilities for CSS-in-JS.
### Install
```sh
yarn add adjustable
```
### Use
```jsx
import { Adjustable, Adjustment } from "./adjust";
import config from "./config";
const Heading = props => ;
const H1 = props => ;
const H2 = props => ;
function App() {
return (
Teal colored text
Centered text with padding top and bottom
);
}
```
### Config
```js
const colors = {
...
teal: "#4dc0b5",
};
const spacing = ["0", "0.5rem", "1rem", "1.5rem", "2rem"];
export default {
...
backgroundColors: colors,
borderRadius: [0, "0.125rem", "0.25rem", "0.5rem", "50%"],
fontWeight: [300, 400, 700],
leading: [1, 1.25, 1.5, 2],
margin: spacing,
padding: spacing,
textColors: colors,
tracking: ["-0.05em", "0", "0.05em"],
zIndex: [0, 100, 200, 300, 400, 500]
};
```