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
Lorem 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
<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>
Link muted
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
Heading
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.
- Add standalone
f-extend-bg
element at highest level of the container or appply to an existing element - Add background colour to f-extend-bg element (
f-background-color-*
) - 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;}
- To compensate for container padding, use
f-extend-bg-hasgutter
- Use
f-extend-bg-left
orf-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
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 |