<commit_before>[![npm version](https://badge.fury.io/js/csx.svg)](http://badge.fury.io/js/csx)

# CSX
An abstraction over CSS properties with semantic names for enhanced readability and maintainability. Designed to be used with [TypeStyle][typestyle].

## Usage

```js
import * as csx from 'csx';
import {style} from 'typestyle';

var Demo = React.createClass({
    render: function() {
        return <div className={style(csx.horizontal)}>
                    <div>One</div>
                    <div>Two</div>
                    <div>Three</div>
               </div>;
}
```

* Checkout the [complete demo](https://typestyle.github.io/csx/demo/).
* Also checkout [how to be effective with this layout system](https://github.com/basarat/csx/blob/gh-pages/docs/README.md)

[typestyle]: https://github.com/typestyle/typestyle
<commit_msg>:memo: composition<commit_after>[![npm version](https://badge.fury.io/js/csx.svg)](http://badge.fury.io/js/csx)

# CSX
An abstraction over CSS properties with semantic names for enhanced readability and maintainability. Designed to be used with [TypeStyle][typestyle].

## Usage

Just pass the objects exposed from `csx` to `typestyle.style` to get a class name e.g.

```js
import * as csx from 'csx';
import {style} from 'typestyle';

const horizontal = style(csx.horizontal);

/** Sample usage with React */
var Demo = React.createClass({
    render: function() {
        return <div className={horizontal}>
                    <div>One</div>
                    <div>Two</div>
                    <div>Three</div>
               </div>;
}
```

Ofcourse you can compose styles easily: 

```js
import * as csx from 'csx';
import {style} from 'typestyle';

const flexHorizontal = style(
  csx.flex,csx.horizontal);

/** Sample usage with React */
var Demo = React.createClass({
    render: function() {
        return <div className={flexHorizontal}>
                    <div>One</div>
                    <div>Two</div>
                    <div>Three</div>
               </div>;
}
```

* Checkout the [complete demo](https://typestyle.github.io/csx/demo/).
* Also checkout [how to be effective with this layout system](https://github.com/basarat/csx/blob/gh-pages/docs/README.md)

[typestyle]: https://github.com/typestyle/typestyle

{'fraction_non_alphanumeric': 0.14562252529696437, 'fraction_numerical': 0.0, 'mean_word_length': 2.809045226130653, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 27, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1930497', 'n_tokens_mistral': 724, 'n_tokens_neox': 688, 'n_words': 181}