https://github.com/leny/koutla-swiss
🎨 CSS-in-JS toolkit, inspired by Kouto-Swiss
https://github.com/leny/koutla-swiss
Last synced: about 1 year ago
JSON representation
🎨 CSS-in-JS toolkit, inspired by Kouto-Swiss
- Host: GitHub
- URL: https://github.com/leny/koutla-swiss
- Owner: leny
- License: mit
- Created: 2018-01-11T20:38:07.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-08-03T04:21:50.000Z (almost 5 years ago)
- Last Synced: 2025-06-13T22:01:49.729Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://leny.github.io/koutla-swiss
- Size: 2.13 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# koutla swiss
[](http://badge.fury.io/js/koutla-swiss) [](https://travis-ci.org/leny/koutla-swiss)  
> 🎨 CSS-in-JS toolkit, inspired by Kouto-Swiss
* * *
**koutla swiss** is a rewrite of [**kouto swiss**](http://kouto-swiss.io) (a CSS framework for Stylus) in pure javascript, to be used within _css-in-js_ tools like [**glamor**](https://github.com/threepointone/glamor) or [**emotion**](https://emotion.sh)
* * *
## Installation
```bash
$ npm install --save koutla-swiss
```
> ☝️ **NOTE:** koutla-swiss exports `cjs` _and_ `esm` modules.
## Usage
**koutla-swiss** is a serie of useful, functional utilities to make _CSS-in-JS_ (with librairies like [glamor](https://github.com/threepointone/glamor)).
All the documented functions are accessibles from the root of the lib, like `import {px, padding} from "koutla-swiss";`.
Documentation is generated with [ESDoc](https://doc.esdoc.org) and hosted in [koutla-swiss.js.org](https://koutla-swiss.js.org).
### Example
```javascript
import React from "react";
import {css} from "@emotion/core";
import {rem, margin, flexrow, borderBottom, size, important, mq} from "koutla-swiss";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {BORDER_COLOR, MQ_TABLET, MQ_SMALL_DESKTOP} from "../../core/constants";
const styles = {
container: css({
...margin(0, "auto", rem(3.6)),
...mq(MQ_TABLET, {
marginBottom: rem(19.2),
}),
...mq(MQ_SMALL_DESKTOP, {
breakInside: "avoid",
marginBottom: rem(9.6),
}),
}),
title: css({
...flexrow("space-between", "center"),
...margin(0, "auto", rem(3.2)),
paddingBottom: rem(0.25),
...borderBottom(rem(0.1), "solid", BORDER_COLOR),
fontSize: rem(2.4),
textAlign: "right",
}),
titleContent: {flex: 1},
hideTitle: css({display: "none"}),
icon: css({
...important(size(rem(2.4))),
}),
};
export default ({className, title, hideTitle = false, children, icon}) => {
let $icon;
icon && ($icon = );
return (
{$icon}
{title}
{children}
);
};
```
> 👉 **NOTE:** this sample component is taken from [my resume](https://github.com/leny/kourikoulom), which relies on koutla-swiss.
* * *
## License
Copyright (c) 2018 [leny.me](http://leny.me)
Licensed under the MIT license.