cssrecipes-utils

Some generic, semantic, responsives CSS utilities

Usage no npm install needed!

<script type="module">
  import cssrecipesUtils from 'https://cdn.skypack.dev/cssrecipes-utils';
</script>

README

utils

Some generic, semantic, responsives CSS utilities

Install

$ npm install cssrecipes-utils

@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 :

Mobile-first

@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";

<div class="r-Grid">
  <div class="r-Grid-cell r-all--1of2 r-minM--1of3 r-minL--1of4">
    <!-- your content-->
  </div>
  <div class="r-Grid-cell r-all--1of2 r-minM--2of3 r-minL--3of4">
    <!-- your content-->
  </div>
</div>

Desktop-first

@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";

<div class="r-Grid">
  <div class="r-Grid-cell r-all--1of4 r-maxL--1of3 r-maxM--1of2">
    <!-- your content-->
  </div>
  <div class="r-Grid-cell r-all--3of4 r-maxL--2of3 r-maxM--1of2">
    <!-- your content-->
  </div>
</div>

Without responsive

@import "./node_modules/cssrecipes-utils/lib/all.css";

<div class="r-Grid">
  <div class="r-Grid-cell r-all--1of4">
    <!-- your content-->
  </div>
  <div class="r-Grid-cell r-all--3of4">
    <!-- your content-->
  </div>
</div>

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

Show or hide elements

  • *--visible
  • *--hidden

NOTE : be careful with the *--visible className, it makes the element visible in inline-block, as its main goal is to work with cssrecipes/grid

Testing

To generate a build:

$ npm run build

To generate the testing build.

$ 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.

$ git clone https://github.com/cssrecipes/utils.git
$ git checkout -b patch-1
$ npm install
$ npm test

Changelog

License

Acknowledgements

This utilities have been inspired by some SUIT CSS utilities.