Some generic, semantic, responsives CSS utilities
npm install cssrecipes-utils> Some generic, semantic, responsives CSS utilities
``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 /
These utils work well with cssrecipes-grid :
`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`
`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`
`css`
@import "./node_modules/cssrecipes-utils/lib/all.css";
`html`
- .r-all--XofY
- .r-minS--XofY.r-minM--XofY
- .r-minL--XofY
- .r-minXL--XofY
-
- .r-maxS--XofY.r-maxM--XofY
- .r-maxL--XofY
- .r-maxXL--XofY
-
- *--1of1
- *--1of2*--2of2
-
- *--1of3*--2of3
- *--3of3
-
- *--1of4*--2of4
- *--3of4
- *--4of4
-
- *--1of5*--2of5
- *--3of5
- *--4of5
- *--5of5
-
- *--1of6*--2of6
- *--3of6
- *--4of6
- *--5of6
- *--6of6
-
- *--1of8*--2of8
- *--3of8
- *--4of8
- *--5of8
- *--6of8
- *--7of8
- *--8of8
-
- *--1of10*--2of10
- *--3of10
- *--4of10
- *--5of10
- *--6of10
- *--7of10
- *--8of10
- *--9of10
- *--10of10
-
- *--1of12*--2of12
- *--3of12
- *--4of12
- *--5of12
- *--6of12
- *--7of12
- *--8of12
- *--9of12
- *--10of12
- *--11of12
- *--12of12
-
- *--visible*--hidden
-
NOTE : be careful with the *--visible className, it makes the elementinline-block
visible in , as its main goal is to work with
cssrecipes/grid
---
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.
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
---
This utilities have been inspired by some SUIT CSS utilities.