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%; } }Weight
Control font-weights. Documentation to follow!
Float
Float things, left or right. Documentation to follow!
Aspect Ratio
Force aspect ratios for responsive iframes and the like. Documentation to follow!
Align
Set text alignment. Documentation to follow!
Border
Apply borders to an element with these, self-explanatory, classes.
.border-top
.border-bottom