Documentation

Aspect Ratio

@util aspect-ratio([ratio]);
16:9

Parameters

Parameter Type Default Optional
ratio <int>:<int> 16:9 Yes 
.box-16-9 {
  @util aspect-ratio(16:9);
}
.box-16-9 {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
}

References

Border Color

@util border-color([colors]);

Provides a quick method for targeting border-color on specific sides of a box.

  • Use a null value to “skip” a side.
  • You can define a list of color by a CSS shorthand.

Parameters

Parameter Type Default Optional
colors color values separated by spaces - No 
.foo {
  @util border-color(#fff null #000 red);
}
.foo {
  border-top-color: #fff;
  border-bottom-color: #000;
  border-left-color: red;
}

Border Radius

@util border-top-radius([radius]);
@util border-right-radius([radius]);
@util border-bottom-radius([radius]);
@util border-left-radius([radius]);

Provides a shorthand syntax to add border-radius to both the top-left and top-right of an element.

Parameters

Parameter Type Default Optional
radius border radius size 3px Yes 
.foo {
  @util border-top-radius(1px);
}

.foo {
  @util border-right-radius(2px);
}

.foo {
  @util border-bottom-radius(3px);
}

.foo {
  @util border-left-radius(4px);
}
.foo {
  border-top-left-radius: 1px;
  border-top-right-radius: 1px;
}

.foo {
  border-bottom-right-radius: 2px;
  border-top-right-radius: 2px;
}

.foo {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.foo {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

Border Style

@util border-style([styles]);

Provides a quick method for targeting border-style on specific sides of a box.

  • Use a null value to “skip” a side.
  • You can define a list of border styles by a CSS shorthand.

Parameters

Parameter Type Default Optional
border styles border styles values separated by spaces - No 
.foo {
  @util border-style(solid null dotted dashed);
}
.foo {
  border-top-style: solid;
  border-bottom-style: dotted;
  border-left-style: dashed;
}

Border Width

@util border-width([sizes]);

Provides a quick method for targeting border-width on specific sides of a box.

  • Use a null value to “skip” a side.
  • You can define a list of sizes by a CSS shorthand.

Parameters

Parameter Type Default Optional
sizes sizes values separated by spaces - No 
.foo {
  @util border-width(1em null 20px 3%);
}
.foo {
  border-top-width: 1em;
  border-bottom-width: 20px;
  border-left-width: 3%;
}

Center

@util center;

Block-level element of an unknown height and width, centered vertically within his parent.

Transform Method (default)

.parent
.child 
.child {
  @util center;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Note: You should add position: relative to the parent element.

Flexbox Method

Add to options: { centerMethod: 'flexbox' } to use this method.

child 
.parent {
  @util center;
}
.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}

Center Block

@util center-block;

Center block with a width.

.center {
  @util center-block;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Circle

@util circle([radio], [color]);

Create a simple circle figure.

.circle

Parameters

Parameter Type Default Optional
radius size 100px Yes
color color #000 Yes 
.circle {
  @util circle(200px, #268BD2);
}
.circle {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-color: #268BD2;
}

Clear Fix

@util clearfix;

The clearfix hack is a popular way to contain floats without resorting to using presentational markup.

.cfx {
  @util clearfix;
}
.cfx:after {
  content: '';
  display: block;
  clear: both;
}

Clear Fix for IE8

Add to options: { ie8: true } to use this method.

.cfx {
  @util clearfix;
}
.cfx:after,
.cfx:before {
  display: table;
  content: ' ';
}
.cfx:after {
  clear: both;
}

References

HD Breakpoint

@util hd([min-resolution]) {
  [nested-rules]
}

Style adjustments for high resolution devices.

Parameters

Parameter Type Default Optional  
min-resolution resolution value (dpi dppx) 120dpi Yes

Note: If you set dpi the utility will calculate the dppx equivalent, and vice versa.

@util hd {
  .foo {
    float: right;
  }
}

@util hd(192dpi) {
  .bar {
    float: left;
  }
}
@media print,
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
  .bar {
    border: 0;
  }
}

@media print,
       (min-resolution: 2dppx),
       (min-resolution: 192dpi) {
  .bar {
    float: left;
  }
}

References

Hide Visually

@util hide-visually;

Only display content to screen readers.

.hide-visually {
  @util hide-visually;
}
.hide-visually {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

References

Horizontal rule

@util hr([color], [vertical-margin], [style], [height]);

Parameters

Parameter Type Default Optional
color color #ccc Yes
vertical-margin size 1em Yes
style border style solid Yes
height size 1px Yes 
hr {
  @util hr(#000, 20px, dotted, 3px);
}
hr {
  height: 1px;
  border: 0;
  border-top: 3px dotted #000;
  margin: 20px 0;
  display: block;
}

Margin

@util margin([sizes]);

Parameters

Parameter Type Default Optional
sizes sizes values separated by spaces   No 
.foo {
  @util margin(1em null 20px 3%);
}
.foo {
  margin-top: 1em;
  margin-bottom: 20px;
  margin-left: 3%;
}

No Hover

@util no-hover {
  [nested-rules]
}

Note: You should add .no-hover class to the html tag when the browser or device doesn’t support hover.

Change noHoverSelector option to use your own selector:

{ noHoverSelector: '.my-selector' }

.box {
  background-color: #000;
}

@util no-hover {
  .box {
    background-color: #666;
  }
}
.box {
  background-color: #000;
}

.no-hover .box {
  background-color: #666;
}

References

No JS

@util no-js {
  [nested-rules]
}

Note: You should add .no-js class to the html tag when the browser or device doesn’t support JavaScript.

Change noJsSelector option to use your own selector:

{ noJsSelector: '.my-selector' }

.box {
  color: #666;
}

@util no-js {
  .box {
    color: #000;
  }
}
.box {
  color: #666;
}

.no-js .box {
  color: #000;
}

Padding

@util padding([sizes]);

Provides a quick method for targeting padding on specific sides of a box.

  • Use a null value to “skip” a side.
  • You can define a list of sizes by a CSS shorthand.

Parameters

Parameter Type Default Optional
sizes size values separated by spaces - No 
.foo {
  @util padding(1em null 20px 3%);
}
.foo {
  padding-top: 1em;
  padding-bottom: 20px;
  padding-left: 3%;
}

Position

@util position([position], [lengths]);

Provides a quick method for setting an element’s position. Use a null value to “skip” a side.

  • Use a null value to “skip” a side.
  • You can define a list of sizes by a CSS shorthand.

Parameters

Parameter Type Default Optional
position CSS position value - No
lengths lengths values separated by spaces - No 
.foo {
  @util position(absolute, 0 null null 10em);
}
.foo {
  top: 0;
  left: 10em;
  position: absolute;
}

Reset list

@util reset-list;

Remove default styles for lists.

ul {
  @util reset-list;
  background-color: #fff;
}
ul {
  background-color: #fff;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
}

li {
  list-style: none;
}

Reset text

@util reset-text;

Remove default styles for text.

.foo {
  @util reset-text;
}
.foo {
  font-family: sans-serif;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-break: auto;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
}

Size

@util size([width], [height]);

Sets the width and height of the element in one statement.

Parameter Type Default Optional
width unit size or auto - No
height unit size or auto width Yes 
a {
  @util size(2em);
}

b {
  @util size(auto, 10em);
}

c {
  @util size(200px, 100px);
}
a {
  width: 2em;
  height: 2em;
}

b {
  width: auto;
  height: 10em;
}

c {
  width: 200px;
  height: 100px;
}
@util sticky-footer([footer height], [wrapper selector]);

Ensures that the fixed height footer is kept down at the bottom of the viewport, even if the content is short.

Parameter Type Default Optional
footer height size unit - No
wrapper selector string "body" Yes 
footer {
  @util sticky-footer(100px);
}
body {
  margin-bottom: 100px;
}

footer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
}

Note: You should set position: relative; and min-height: 100%; fot html tag.

References

Text hide

@util text-hide;

CSS image replacement.

Indent technique (default)

.text-hide {
  @util text-hide;
}
.text-hide {
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
}

Note: It should be a block element.

Font technique

Add to options: { textHideMethod: 'font' } to use this method.

.text-hide {
  @util text-hide;
}
.text-hide {
  font: "0/0" a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

References

Text stroke

@util text-stroke([size], [color], [smooth]);

Add text stroke with text shadow effect: Example on CodePen

Parameter Type Default Optional
size unit size 1px No
color color value #000 No
smooth string - Yes 
.stroke {
  @util text-stroke(1px, #d50200);
}
.stroke {
  text-shadow: -1px -1px 0 #d50200,
               -1px 0 0 #d50200,
               -1px 1px 0 #d50200,
               0 -1px 0 #d50200,
               0 0 0 #d50200,
               0 1px 0 #d50200,
               1px -1px 0 #d50200,
               1px 0 0 #d50200,
               1px 1px 0 #d50200;
}

References

Triangle

@util triangle([size], [color], [orientation]);

Create triangle figures.

Parameters

Parameter Type Default Optional
size size 12px Yes
color color #000 Yes
orientation {up, down, left, right, up-left, up-right, down-left, down-right} down Yes 
.triangle-up {
  @util triangle(20px, blue, up);
}
.triangle-up {
  display: inline-block;
  height: 0;
  width: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid blue;
}

Truncate

This mixin will truncate text, adding an ellipsis to represent overflow.

Single line

@util truncate;
.truncate {
  @util truncate;
}
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Multiline

@util truncate([lines], [line-height]);

Parameters

Parameter Type Default Optional
lines int 3 Yes
line-height unitless line-height value 1 Yes 
.truncate {
  @util truncate(3, 1.5);
}
.truncate-multiline {
  display: block;
  display: -webkit-box;
  height: 4.5em;
  line-height: 1.5;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Note: Multiline ellipsis is not supported by Firefox, Edge & IE.

References

Word Wrap

@util word-wrap([wrap]);

Easy way to change the word-wrap property.

Parameters

Parameter Type Default Optional
wrap normal | break-word | initial | inherit break-word Yes 
.foo {
  @util word-wrap;
}

.bar {
  @util word-wrap(normal);
}
.foo {
  overflow-wrap: break-word;
  word-break: break-all;
  word-wrap: break-word;
}

.bar {
  overflow-wrap: normal;
  word-break: normal;
  word-wrap: normal;
}