# utils
> Some generic, semantic, responsives CSS utilities
## Install
```console
$ npm install cssrecipes-utils
```
```css
@import "./node_modules/cssrecipes-custom-media-queries/index.css";
@import "./node_modules/cssrecipes-utils/index.css"; /* all, max (desktop first) & min (mobile first) versions */
```
## Usage
These utils work well with [cssrecipes-grid](https://github.com/cssrecipes/grid) :
### Mobile-first
```css
@import "./node_modules/cssrecipes-custom-media-queries/index.css";
@import "./node_modules/cssrecipes-utils/lib/all.css";
@import "./node_modules/cssrecipes-utils/lib/min.css";
```
```html
```
### Desktop-first
```css
@import "./node_modules/cssrecipes-custom-media-queries/index.css";
@import "./node_modules/cssrecipes-utils/lib/all.css";
@import "./node_modules/cssrecipes-utils/lib/max.css";
```
```html
```
### Without responsive
```css
@import "./node_modules/cssrecipes-utils/lib/all.css";
```
```html
```
## Sizing prefixes
### Default size
- `.r-all--XofY`
### Mobile-first
- `.r-minS--XofY`
- `.r-minM--XofY`
- `.r-minL--XofY`
- `.r-minXL--XofY`
### Desktop-first
- `.r-maxS--XofY`
- `.r-maxM--XofY`
- `.r-maxL--XofY`
- `.r-maxXL--XofY`
## Available sizing
### full-size grid (1 column)
- `*--1of1`
### 2-columns grid
- `*--1of2`
- `*--2of2`
### 3-columns grid
- `*--1of3`
- `*--2of3`
- `*--3of3`
### 4-columns grid
- `*--1of4`
- `*--2of4`
- `*--3of4`
- `*--4of4`
### 5-columns grid
- `*--1of5`
- `*--2of5`
- `*--3of5`
- `*--4of5`
- `*--5of5`
### 6-columns grid
- `*--1of6`
- `*--2of6`
- `*--3of6`
- `*--4of6`
- `*--5of6`
- `*--6of6`
### 8-columns grid
- `*--1of8`
- `*--2of8`
- `*--3of8`
- `*--4of8`
- `*--5of8`
- `*--6of8`
- `*--7of8`
- `*--8of8`
### 10-columns grid
- `*--1of10`
- `*--2of10`
- `*--3of10`
- `*--4of10`
- `*--5of10`
- `*--6of10`
- `*--7of10`
- `*--8of10`
- `*--9of10`
- `*--10of10`
### 12-columns grid
- `*--1of12`
- `*--2of12`
- `*--3of12`
- `*--4of12`
- `*--5of12`
- `*--6of12`
- `*--7of12`
- `*--8of12`
- `*--9of12`
- `*--10of12`
- `*--11of12`
- `*--12of12`
---
## Testing
To generate a build:
```console
$ npm run build
```
To generate the testing build.
```console
$ npm run build-test
```
Basic visual tests are in `test/index.html`.
## Contributing
Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.
```console
$ git clone https://github.com/cssrecipes/utils.git
$ git checkout -b patch-1
$ npm install
$ npm test
```
## [Changelog](CHANGELOG.md)
## [License](LICENSE)