Core

All FatKit core components at a glance.

FatKit offers over 30 modular and extendible components, which can be combined with each other. Components are divided into different compartments according to their purpose and functionality.

Defaults

These components generally normalize HTML elements for cross browser functionality and add some very basic styling.

Layout

Apply our fully responsive fluid grid system and panels, common layout parts like blog articles and comments and useful utility classes.

Navigation

FatKit offers different types of navigations, like navigation bars and side navigations. Use breadcrumbs or a pagination to steer through articles.

Elements

Style basic HTML elements, like tables and forms. These components use their own classes. They won't interfere with any default element styling.

Common

Here you'll find components that you often use within your content, like buttons, icons, badges, thumbnails, progress bars and much more.

JavaScript

These components rely mostly on JavaScript to fade in hidden content, like dropdowns, modal dialogs, off-canvas bars and tooltips.


Breakpoints

FatKit includes a number of responsive classes to style your content for different viewport widths. This table gives you an overview of the available breakpoints and the associated devices. You can adjust all breakpoints in the variables Sass include.

Size Breakpoints Device
Mini up to 479px Phones portrait
Small 480px to 767px Phones landscape
Medium 768px to 959px Tablets portrait
Large 960px to 1199px Desktops & tablets landscape
Xlarge 1200px and larger Large Desktops

CSS architecture

To avoid conflicts with other CSS frameworks, all FatKit classes are name-spaced with the f- prefix. Components are divided into the component itself, sub-objects and modifiers, whose class names always pick up the component name.

Definitions

Object Description
Component Components abstract recurring parts of a website into class-based modules, like buttons for example. These can be reused and combined.
Sub-object Sub-objects are placed within a component to enhance its funtionality, for example a close button in an alert box.
Modifier Modifier classes alter the style of components and their sub-objects, like button colors and sizes.