--- layout: docs title: Furnitor utilities description: Custom Furnitor classes with a purpose to reduce the frequency of highly repetitive declarations. group: utilities toc: true ---

Spacing

Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties.

Spacing utilities that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where property is one of:

Where sides is one of:

Where size is one of:

(You can add more sizes by adding entries to the $spacers Sass map variable via: _theme-variables.scss.)

Furnitor includes several offset classes, like:

{% highlight html %}
.ml-n2
.ml-n3
.mr-n2
.mt-n1
.mt-n5
.mt-n6
.mt-n9
.mb-n9
{% endhighlight %}

Font sizes

Furnitor includes several responsive font size, like:

{% capture example %}

.fs-11

.fs-12

.fs-14

.fs-16

.fs-16

.fs-18

.fs-20

.fs-24

.fs-30

.fs-34

.fs-38

.fs-40

.fs-48

.fs-56

.fs-60

.fs-100

.fs-140

{% endcapture %} {% include docs/example.html content=example %}

Line Height

{% capture example %}

.lh-12

.lh-13

.lh-15

.lh-16

.lh-175

.lh-1875

.lh-2

.lh-213

{% endcapture %} {% include docs/example.html content=example %}

Opacity

{% capture example %}

.opacity-1

.opacity-2

.opacity-3

.opacity-4

.opacity-5

.opacity-6

.opacity-7

.opacity-8

.opacity-9

.opacity-10

{% endcapture %} {% include docs/example.html content=example %}

Border

{% capture example %}

.border-2x

.border-3x

.border-4x

.border-5x

.border-6x

.border-6x .border-light-dark

.border-6x .border-hover-light-dark

.border-6x .border-white-darker

{% endcapture %} {% include docs/example.html content=example %}

Text Color

{% capture example %}

.text-gray

.text-gray-01

.text-gray-02

.text-gray-03

.text-gray-04

{% endcapture %} {% include docs/example.html content=example %}

Text Decoration

{% capture example %}

.text-decoration-underline

{% endcapture %} {% include docs/example.html content=example %}

Background Color

{% capture example %}
.bg-color-1
.bg-color-5
.bg-color-3
.bg-color-3
.bg-color-4
{% endcapture %} {% include docs/example.html content=example %}

Display Grid

{% capture example %}

Grid with 3 columns, each column occupies 1 column and 1 row

.grid-item .gr-1 .gc-1
.grid-item .gr-1 .gc-1
.grid-item .gr-1 .gc-1

Grid with 2 columns, 1 column occupies 1 column and 1 row and rest occupies 1 column and 1 row

.grid-item .gr-1 .gc-2
.grid-item .gr-1 .gc-1

Grid with 2 columns, 1 column occupies 1 column and 2 row and rest occupies 1 column and 1 row

.grid-item .gr-2 .gc-1
.grid-item .gr-1 .gc-1
.grid-item .gr-1 .gc-1
{% endcapture %} {% include docs/example.html content=example %}

Width

{% capture example %}
.w-40px
.w-45px
.w-50px
.w-52px
.w-60px
.w-63px
.w-70px
.w-28px
.w-80px
.w-88px
.w-90px
.w-100px
.w-130
.w-124px
.mxw-84px
.w-215px
.mxw-370px
.mxw-435px
.mxw-495px
.mxw-630
.mxw-670
.mxw-814
.mxw-830
{% endcapture %} {% include docs/example.html content=example %}

List Group No Border

{% capture example %} {% endcapture %} {% include docs/example.html content=example %}

Hover Image effect

{% capture example %}
Hover shine
Hover zoom in
Hover opacity
Hover flash
{% endcapture %} {% include docs/example.html content=example %}

Position

{% capture example %}

.pos-fixed-top-center

.pos-fixed-top-right

.pos-fixed-bottom

.pos-fixed-bottom-right

.pos-fixed-center

.pos-fixed-left-center

.pos-fixed-right-center

.pos-fix-top-left

{% endcapture %} {% include docs/example.html content=example %}