Widths

Manipulate element widths directly with width classes, which can be used independantly of Embrace’s grid system.

Widths are defined as, human-focussed, psuedo-semantic classes representing the fractions one to six, i.e.: ¼ is written as .one-quarter. ½ can be expressed as .one-half, .two-quarters or .three-sixths.

Compiled CSS

.one-whole { width: 100%; }
.one-half, .two-quarters, .three-sixths { width: 50%; }
.one-third, .two-sixths { width: 33.333%; }
.two-thirds, .four-sixths { width: 66.666%; }
.one-quarter { width: 25%; }
.three-quarters { width: 75%; }
.one-fifth { width: 20%; }
.two-fifths { width: 40%; }
.three-fifths { width: 60%; }
.four-fifths { width: 80%; }
.one-sixth { width: 16.666%; }
.five-sixths { width: 83.333%; }

Responsive widths

Widths are also extended across the projects defined breakpoints and classes can be appended with .sm-, .md-, .lg- and .xl-.

Compiled CSS

@media screen and (min-width: 45em) {
  .md-one-whole { width: 100%; }
  .md-one-half, .md-two-quarters, .md-three-sixths { width: 50%; }
  .md-one-third, .md-two-sixths { width: 33.333%; }
  .md-two-thirds, .md-four-sixths { width: 66.666%; }
  .md-one-quarter { width: 25%; }
  .md-three-quarters { width: 75%; }
  .md-one-fifth { width: 20%; }
  .md-two-fifths { width: 40%; }
  .md-three-fifths { width: 60%; }
  .md-four-fifths { width: 80%; }
  .md-one-sixth { width: 16.666%; }
  .md-five-sixths { width: 83.333%; } }