https://github.com/lukehedger/sip
🍹 Small sips of CSS
https://github.com/lukehedger/sip
atomic-design css css-in-js functional-css
Last synced: 26 days ago
JSON representation
🍹 Small sips of CSS
- Host: GitHub
- URL: https://github.com/lukehedger/sip
- Owner: lukehedger
- License: other
- Created: 2017-03-16T10:07:37.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-19T16:42:27.000Z (almost 9 years ago)
- Last Synced: 2025-11-27T10:34:22.341Z (4 months ago)
- Topics: atomic-design, css, css-in-js, functional-css
- Language: JavaScript
- Homepage:
- Size: 29.3 KB
- Stars: 4
- Watchers: 0
- Forks: 1
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
## Install
```
yarn add sip.css
```
## Sip?
Sip takes micro styles and outputs real CSS:
```
Sip({ m:4 }) // ↣ { margin: 12px }
```
This can be used on components:
```
```
And processed with any CSS-in-JS implementation or simple inline styles:
```
import Sip from 'sip.css'
const Component = ({ sip }) =>
```
[Try Sip out on RunKit](https://runkit.com/lukehedger/58d2583741f5d300146c47ed)
## Paradigm
CSS at scale === 😫. And scoping your styles to components isn't enough. You still end up with styles tightly coupled to logic. By enforcing an architecture that exposes only a minimal set of presentational components this coupling disappears. These primitive components (Button, Text, View and co) can then be fine-tuned when used by other functional components. `Sip` enables this through the use of atomic-like styles.
[Read the origin story on Medium!](https://medium.com/@level_out/truly-reusable-css-f9399e66d40a)
## Refreshment
- Framework-agnostic - just outputs CSS objects
- Supports media queries - `sip={{ m:2, m@md: 4 }}`
- Component library and style-guide compatible
- Designed to work with a central set of reusable, presentational components
- Enables any level of application logic refactoring without losing design! And vice-versa.
[Take a look at the examples](examples/)
## Contributing
### Setup
```
yarn
```
### Build
```
yarn build
```
### Test
```
yarn test
```