cssrecipes-utils/lib/sizes/all.css

Some generic, semantic, responsives CSS utilities

.r-all--1of12 {
  width: calc(100% * 1 / 12);
}

.r-all--1of11 {
  width: calc(100% * 1 / 11);
}

.r-all--1of10 {
  width: 10%;
}

.r-all--1of9 {
  width: calc(100% * 1 / 9);
}

.r-all--1of8 {
  width: 12.5%;
}

.r-all--1of7 {
  width: calc(100% * 1 / 7);
}

.r-all--1of6,
.r-all--2of12 {
  width: calc(100% * 1 / 6);
}

.r-all--2of11 {
  width: calc(100% * 2 / 11);
}

.r-all--1of5,
.r-all--2of10 {
  width: 20%;
}

.r-all--2of9 {
  width: calc(100% * 2 / 9);
}

.r-all--1of4,
.r-all--2of8,
.r-all--3of12 {
  width: 25%;
}

.r-all--3of11 {
  width: calc(100% * 3 / 11);
}

.r-all--2of7 {
  width: calc(100% * 2 / 7);
}

.r-all--3of10 {
  width: 30%;
}

.r-all--1of3,
.r-all--2of6,
.r-all--3of9,
.r-all--4of12 {
  width: calc(100% * 1 / 3);
}

.r-all--4of11 {
  width: calc(100% * 4 / 11);
}

.r-all--3of8 {
  width: 37.5%;
}

.r-all--2of5,
.r-all--4of10 {
  width: 40%;
}

.r-all--5of12 {
  width: calc(100% * 5 / 12);
}

.r-all--3of7 {
  width: calc(100% * 3 / 7);
}

.r-all--4of9 {
  width: calc(100% * 4 / 9);
}

.r-all--5of11 {
  width: calc(100% * 5 / 11);
}

.r-all--1of2,
.r-all--2of4,
.r-all--3of6,
.r-all--4of8,
.r-all--5of10,
.r-all--6of12 {
  width: 50%;
}

.r-all--6of11 {
  width: calc(100% * 6 / 11 );
}

.r-all--5of9 {
  width: calc(100% * 5 / 9);
}

.r-all--4of7 {
  width: calc(100% * 4 / 7)
}

.r-all--7of12 {
  width: calc(100% * 7 / 12);
}

.r-all--3of5,
.r-all--6of10 {
  width: 60%;
}

.r-all--7of11 {
  width: calc(100% * 7 / 11);
}

.r-all--5of8 {
  width: 62.5%;
}

.r-all--2of3,
.r-all--4of6,
.r-all--6of9,
.r-all--8of12 {
  width: calc(100% * 2 / 3);
}

.r-all--7of10 {
  width: 70%;
}

.r-all--5of7 {
  width: calc(100% * 5 / 7);
}

.r-all--8of11 {
  width: calc(100% * 8 / 11);
}

.r-all--3of4,
.r-all--6of8,
.r-all--9of12 {
  width: 75%;
}

.r-all--7of9 {
  width: calc(100% * 7 / 9);
}

.r-all--4of5,
.r-all--8of10 {
  width: 80%;
}

.r-all--9of11 {
  width: calc(100% * 9 / 11);
}

.r-all--5of6,
.r-all--10of12 {
  width: calc(100% * 5 / 6);
}

.r-all--6of7 {
  width: calc(100% * 6 / 7);
}

.r-all--7of8 {
  width: 87.5%;
}

.r-all--8of9 {
  width: calc(100% * 8 / 9);
}

.r-all--9of10 {
  width: 90%;
}

.r-all--10of11 {
  width: calc(100% * 10 / 11);
}

.r-all--11of12 {
  width: calc(100% * 11 / 12);
}

.r-all--1of1,
.r-all--2of2,
.r-all--3of3,
.r-all--4of4,
.r-all--5of5,
.r-all--6of6,
.r-all--7of7,
.r-all--8of8,
.r-all--9of9,
.r-all--10of10,
.r-all--11of11,
.r-all--12of12 {
  width: 100%;
}

.r-all--hidden {
  display: none;
}

.r-all--visible {
  display: inline-block;
}