Utility

A collection of useful utility classes to style your content.


Clearing and floating

Floating is fundamental for creating all kinds of layouts. But floats need to be cleared or in the worst case, you might end up with a scrambled site. The following classes will help you to setup basic layouts.

Class Description
.f-float-left Float the element to the left.
.f-float-right Float the element to the right.
.f-clearfix Add this class to a parent container to clear floats.

Markup

<div class="f-clearfix">
	<div class="f-float-right">...</div>
	<div class="f-float-left">...</div>
</div>

New block formatting context

Instead of using the .f-clearfix class, you can create a new block formatting context to clear floats. Depending on your setup, you can evaluate which method is more suited.

Class Description
.f-nbfc Sets overflow to hidden to create a new block formatting context.
.f-nbfc-alt Sets display to table-cell to create a new block formatting context.

Alignment of images and objects

Align images or other elements with spacing between the text and the element.

Class Description
.f-align-left Floats the element to the left and creates right and bottom margin.
.f-align-right Floats the element to the right and creates left and bottom margin.
.f-align-medium-left Only affects device widths of 768px and higher.
.f-align-medium-right Only affects device widths of 768px and higher.
.f-align-center Centers the element and creates bottom margin.

Example

Image aligned to the rightLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Markup

<p class="f-clearfix">
	<img class="f-align-medium-right" src="" alt="">
	...
</p>

Vertical alignment

To align objects vertically, you need to create a parent container to which the object itself will be aligned.

Class Description
.f-vertical-align Add this class to the parent container. This container needs a specific height.
.f-vertical-align-middle Add this class to the child element to center your content.
.f-vertical-align-bottom Add this class to the child element to align your content to the bottom.
.f-height-1-1 This helper class applies a height of 100%.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Markup

<div class="f-vertical-align">
	<div class="f-vertical-align-middle">
	...
	</div>
</div>
<div class="f-vertical-align">
	<div class="f-vertical-align-bottom">
	...
	</div>
</div>

NOTE The object you align needs to have a width or max-width that is smaller than its parent container.

Center the entire page

The .f-height-1-1 class comes in handy, if you want to extend the <html> and <body> elements to the full height of the page. This can be very useful when creating error pages. See the login layout as an example of this in action.

Markup

<html class="f-height-1-1">
	...
	<body class="f-height-1-1">
		<div class="f-vertical-align">
			<div class="f-vertical-align-middle">...</div>
		</div>
	</body>
</html>

Center horizontally

To center your content horizontally as well, add the .f-text-center class to the parent and the .f-container-center class to the child element. This is necessary because of the responsive behavior.


Viewport height

To create a container that fills the height of the entire viewport, for example for fullscreen image or video teasers, just add the .f-height-viewport class.


Position elements

FatKit provides a number of classes to position your content without having to add your own CSS.

Class Description
.f-position-absolute Absolutely position an element.
.f-position-top Positions an element absolute at the top.
.f-position-top-left Positions an element absolute at the top left.
.f-position-top-right Positions an element absolute at the top right.
.f-position-bottom Positions an element absolute at the bottom.
.f-position-bottom-left Positions an element absolute at the bottom left.
.f-position-bottom-right Positions an element absolute at the bottom right.
.f-position-cover Adds absolute positioning to an element and stretches it to cover the entire parent.
.f-position-relative Adds relative positioning to an element.
.f-position-fixed Adds fixed positioning to an element.
.f-position-z-index Applies z index 1 to element.

Cursors

FatKit provides a number of classes to change the cursor on an element.

Class Description
.f-cursor-pointer Adds the pointer cursor.
.f-cursor-default Add the default cursor.
.f-cursor-move Add a move cursor.

Responsive objects

Images in FatKit adapt to the width of their parent container by default. If you want to apply the responsive behavior to media elements, like a video object, just add one of the following classes.

Class Description
.f-responsive-width Adjusts the object's width according to its parent's width, keeping the original aspect ratio.
.f-responsive-height Adjusts the object's height according to its parent's height, keeping the original aspect ratio.

NOTE The .f-responsive-width class can also be applied to an Iframe, provided its width and height attributes are set.

Example width

Example height

Markup

<video controls class="f-responsive-width"></video>

<img class="f-responsive-height" src="" alt="">

Responsive Video

For responsive video there is a mixin you can use as below passing the video width and height, respectively:

.my-video-class {
	@include fluid-video(640, 360);
}

<div class="my-video-class">
	<video controls></video>
</div>

Utility also has the default 16:9 ratio CSS built in. To use just replace the above class in HTML with f-rp-video:

<div class="f-rp-video">
	<iframe src="..." width="640" height="360"></iframe>
</div>

Example


Inline SVG

SVGs or Scaleable Vector Graphics are really handy, for example to display a logo that remains crisp when scaling or that is animated. To be able to control your SVG via CSS, just add the data-f-svg attribute to the image tag. This will turn your image into an inline SVG including all attributes, like IDs, classes, width and height which you can now easily target using CSS.

Markup

<img src="my-image.svg" data-f-svg>

Margin

Add one of the following classes to add spacing to block elements.

Class Description
.f-margin Adds the same top and bottom margins as a paragraph usually has.
.f-margin-top Adds top margin.
.f-margin-bottom Adds bottom margin.
.f-margin-left Adds left margin.
.f-margin-right Adds right margin.
.f-margin-horizontal Adds margins horizontally.
.f-margin-vertical Adds margins vertically.

Larger margin

Add one of the following classes to add larger spacing to block elements.

Class Description
.f-margin-large Adds large top and bottom margin.
.f-margin-large-top Adds large top margin.
.f-margin-large-bottom Adds large bottom margin.
.f-margin-large-left Adds large left margin.
.f-margin-large-right Adds large right margin.
.f-margin-large-horizontal Adds large margins horizontally.
.f-margin-large-vertical Adds large margins vertically.

Medium margin

Add one of the following classes to add medium spacing to block elements.

Class Description
.f-margin-medium Adds medium top and bottom margin.
.f-margin-medium-top Adds medium top margin.
.f-margin-medium-bottom Adds medium bottom margin.
.f-margin-medium-left Adds medium left margin.
.f-margin-medium-right Adds medium right margin.
.f-margin-medium-horizontal Adds medium margins horizontally.
.f-margin-medium-vertical Adds medium margins vertically.

Smaller margin

Add one of the following classes to add smaller spacing to block elements.

Class Description
.f-margin-small Adds small top and bottom margin.
.f-margin-small-top Adds small top margin.
.f-margin-small-bottom Adds small bottom margin.
.f-margin-small-left Adds small left margin.
.f-margin-small-right Adds small right margin.
.f-margin-small-horizontal Adds small margins horizontally.
.f-margin-small-vertical Adds small margins vertically.

Remove margin

Add one of the following classes to remove spacing from block elements.

Class Description
.f-margin-remove Removes all margins.
.f-margin-top-remove Removes top margin.
.f-margin-bottom-remove Removes bottom margin.

Normalise margin

Add the following to a container to remove the top margin on the first child and bottom margin on the last child.

.f-normalize-child-margin


Auto margin

To add spacing to stacking elements, for example inline elements that wrap on smaller vieports, just add the data-f-margin attribute to their parent container. It will automatically add the .f-margin-small-top to the lower element.

Example

Markup

<p data-f-margin>
	<button class="f-btn">...</button>
	<button class="f-btn">...</button>
</p>

NOTE By default, the data attribute adds the .f-margin-small-top class to stacking elements. To apply a bigger margin, just add the {cls:'f-margin-top'} option.


Padding

Add one of the following classes to add space inside an element.

Note The same classes for large and small apply like the Margin utility: .f-padding-large-* and .f-padding-small-*.

Class Description
.f-padding Adds the same padding all around
.f-padding-top Adds top padding.
.f-padding-bottom Adds bottom padding.
.f-padding-left Adds left padding.
.f-padding-right Adds right padding.
.f-padding-vertical Adds vertical padding.
.f-padding-horizontal Adds horizontal padding.

Small padding

Adds a smaller padding based on class.

Class Description
.f-padding-small Adds the same small padding all around
.f-padding-small-top Adds small top padding.
.f-padding-small-bottom Adds small bottom padding.
.f-padding-small-left Adds small left padding.
.f-padding-small-right Adds small right padding.
.f-padding-small-vertical Adds small vertical padding.
.f-padding-small-horizontal Adds small horizontal padding.

Medium padding

Adds a medium padding based on class.

Class Description
.f-padding-medium Adds the same medium padding all around
.f-padding-medium-top Adds medium top padding.
.f-padding-medium-bottom Adds medium bottom padding.
.f-padding-medium-left Adds medium left padding.
.f-padding-medium-right Adds medium right padding.
.f-padding-medium-vertical Adds medium vertical padding.
.f-padding-medium-horizontal Adds medium horizontal padding.

Large padding

Adds a large padding based on class.

Class Description
.f-padding-large Adds the same large padding all around
.f-padding-large-top Adds large top padding.
.f-padding-large-bottom Adds large bottom padding.
.f-padding-large-left Adds large left padding.
.f-padding-large-right Adds large right padding.
.f-padding-large-vertical Adds large vertical padding.
.f-padding-large-horizontal Adds large horizontal padding.

Extra large padding

Adds an extra large padding based on class.

Class Description
.f-padding-xlarge Adds the same extra large padding all around
.f-padding-xlarge-top Adds extra large top padding.
.f-padding-xlarge-bottom Adds extra large bottom padding.
.f-padding-xlarge-left Adds extra large left padding.
.f-padding-xlarge-right Adds extra large right padding.
.f-padding-xlarge-vertical Adds extra large vertical padding.
.f-padding-xlarge-horizontal Adds extra large horizontal padding.

To remove the padding from a block element, add one of the following classes.

Class Description
.f-padding-remove Removes all padding.
.f-padding-top-remove Removes top padding.
.f-padding-bottom-remove Removes bottom padding.
.f-padding-vertical-remove Removes top and bottom padding.

Border radius

To add rounded corners to an element, like an image, just add the .f-border-rounded. To a apply a circled shape, add the .f-border-circle class.

Example

Border rounded Border circle

<img class="f-border-rounded" src="" alt="">
<img class="f-border-circle" src="" alt="">

Heading large

To increase the font size of your headings on tablets and desktops, just add the .f-heading-large class.

Example

Heading

Markup

<h1 class="f-heading-large">...<h1>

If a link should not have the default link color, just add the .f-link-muted class to the anchor element or the parent element.

Example

Markup

<a class="f-link-muted">...<a>

<h1 class="f-link-muted"><a>...<a><h1>

<ul class="f-link-muted">
	<li><a>...<a></li>
	<li><a>...<a></li>
	<li><a>...<a></li>
</ul>

Hyphenate text

Use .f-hyphenate to apply hyphens, or word-break to an element likely to have a long word.


Accessible text

Use .f-a11y to visually hide something from screens, not readers.


Reset link style

Use .f-link-reset to reset a link style.


Scrollable preformatted text

Add the .f-scrollable-text class to set a max-height and provide a vertical scrollbar. This is very useful for preformatted text, if you don't want your code blocks to take too much space.

Example

<!-- This is sample code to demonstrate preformatted text with a scrollbar. -->

<div class="f-grid">
	<div class="f-width-medium-1-2">
		<div class="f-panel f-panel-box f-text-left">...</div>
	</div>
	<div class="f-width-medium-1-2">
		<div class="f-panel f-panel-box f-text-right">...</div>
	</div>
</div>
<div class="f-grid">
	<div class="f-width-medium-1-2">
		<div class="f-panel f-panel-box f-text-center">...</div>
	</div>
	<div class="f-width-medium-1-2">
		<div class="f-panel f-panel-box f-text-justify">...</div>
	</div>
</div>

<div class="f-grid">
	<div class="f-width-medium-1-2">
		<div class="f-panel f-panel-box f-text-break">...</div>
	</div>
	<div class="f-width-medium-1-2">
		<div class="f-panel f-panel-box"><p class="f-margin-remove f-text-truncate">...</p></div>
	</div>
</div>

Extend background colour

Extend an element's background left or right, off the screen.

  1. Add standalone f-extend-bg element at highest level of the container or appply to an existing element
  2. Add background colour to f-extend-bg element (f-background-color-*)
  3. Height of extended block is inherited. If custom height is needed, or if parent is heightless, set a custom height on :after, e.g. f-extend-bg--sidebar:after {height: 100px;}
  4. To compensate for container padding, use f-extend-bg-hasgutter
  5. Use f-extend-bg-left or f-extend-bg-right to place the background on one side only.

Scrollable box

Add the .f-scrollable-box class to create a panel-like box which has a max-height and provides a vertical scrollbar. It can contain any kind of content.

Example

Markup

<div class="f-scrollable-box">
	<ul class="f-list">
		<li><label><input type="checkbox">...</label></li>
		<li><label><input type="checkbox">...</label></li>
	</ul>
</div>

Overflow container

To create a container that provides a horizontal scrollbar whenever the elements inside it are wider than the container itself, just add the .f-overflow-container class to a <div> element. This comes in useful when having to handle tables on a responsive website, which at some point would just get too big.

Set overflow hidden on an element with .f-overflow-hidden.

See the table component for a better way to handle responsive tables in some situations.

Example

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer
Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data

Markup

<div class="f-overflow-container">...</div>

Display utilities

Add one of these classes to change the display properties of an element.

Class Description
.f-display-block Forces the element to behave like a block element.
.f-display-inline Forces the element to behave like an inline element.
.f-display-inline-block Forces the element to behave like an inline-block element.

Visibility utilities

Class Description
.f-hidden Hides the element on any device.
.f-hidden-touch Hides the element on touch devices.
.f-hidden-notouch Hides the element on non-touch devices.
.f-invisible Hides the element without removing it from the flow.
.f-visible-hover Displays hidden content on hover using display: block. Add this class to the parent element.
.f-visible-hover-inline Displays hidden content on hover using display: inline-block. Add this class to the parent element.

Example

Hover me...
Bazinga!

Markup

<div class="f-visible-hover">
	<div class="f-hidden">...</div>
</div>

Responsive visibility

You can show or hide content on specific viewport widths. Breakpoints are set through variables and can easily be modified. Since the line between different device sizes keeps blurring, class names are kept general and do not refer to particular devices.

Class Tiny
(Phones)
up to 480
Small
(Phones)
up to 767
Medium
(Tablets)
768 to 959
Large
(Desktops)
960 and larger
XLarge
(Desktops)
1280 and larger
.f-visible-xsmall Visible Hidden Hidden Hidden Hidden
.f-visible-small Hidden Visible Hidden Hidden Hidden
.f-visible-xsmall-small Visible Visible Hidden Hidden Hidden
.f-visible-medium Hidden Hidden Visible Hidden Hidden
.f-visible-large Hidden Hidden Hidden Visible Hidden
.f-visible-xlarge Hidden Hidden Hidden Hidden Visible
.f-visible-large-xlarge Hidden Hidden Hidden Visible Visible
.f-hidden-xsmall Hidden Visible Visible Visible Visible
.f-hidden-small Visible Hidden Visible Visible Visible
.f-hidden-xsmall-small Hidden Hidden Visible Visible Visible
.f-hidden-medium Visible Visible Hidden Visible Visible
.f-hidden-large Visible Visible Visible Hidden Visible
.f-hidden-xlarge Visible Visible Visible Visible Hidden
.f-hidden-large-xlarge Visible Visible Visible Hidden Hidden