--- layout: docs title: Furnitor utilities description: Custom Furnitor classes with a purpose to reduce the frequency of highly repetitive declarations. group: utilities toc: true ---
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:
m
- for classes that set margin
p
- for classes that set
padding
Where sides is one of:
t
- for classes that set margin-top
or padding-top
b
- for classes that set margin-bottom
or padding-bottom
l
- for classes that set margin-left
or padding-left
r
- for classes that set margin-right
or padding-right
x
- for classes that set both *-left
and *-right
y
- for classes that set both *-top
and *-bottom
margin
or padding
on all 4 sides of the
element
Where size is one of:
0
- for classes that eliminate the
margin
or padding
by setting it to 0
1
- (by default) for classes that set
the margin
or padding
to $spacer * .3125
2
- (by default) for classes that set
the margin or padding to $spacer *
.625
3
- (by default) for classes that set
the margin
or padding
to $spacer
4
- (by default) for classes that set
the margin
or padding
to $spacer *
1.25
5
- (by default) for classes that set
the margin
or padding
to $spacer *
1.5
6
- (by default) for classes that set
the margin
or padding
to $spacer *
1.875
7
- (by default) for classes that set
the margin
or padding
to $spacer *
2.5
8
- (by default) for classes that set
the margin
or padding
to $spacer *
3.125
9
- (by default) for classes that set
the margin
or padding
to $spacer *
3.75
10
- (by default) for classes that set
the margin
or padding
to $spacer *
4.375
11
- (by default) for classes that
set the margin
or padding
to $spacer *
5
12
- (by default) for classes that
set the margin
or padding
to $spacer *
5.625
13
- (by default) for classes that
set the margin
or padding
to $spacer *
6.25
14
- (by default) for classes that
set the margin
or padding
to $spacer *
6.875
15
- (by default) for classes that
set the margin
or padding
to $spacer *
7.5
16
- (by default) for classes that
set the margin
or padding
to $spacer *
9.375
17
- (by default) for classes that
set the margin
or padding
to $spacer *
10.625
auto
- for classes that set the
margin
to auto
(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 %}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 %}.lh-12
.lh-13
.lh-15
.lh-16
.lh-175
.lh-1875
.lh-2
.lh-213
{% endcapture %} {% include docs/example.html content=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-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-gray
.text-gray-01
.text-gray-02
.text-gray-03
.text-gray-04
{% endcapture %} {% include docs/example.html content=example %}.text-decoration-underline
{% endcapture %} {% include docs/example.html content=example %}Grid with 3 columns, each column occupies 1 column and 1 row
Grid with 2 columns, 1 column occupies 1 column and 1 row and rest occupies 1 column and 1 row
Grid with 2 columns, 1 column occupies 1 column and 2 row and rest occupies 1 column and 1 row
.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