Components

All kinds of useful, additional components which are not included in FatKit itself.

FatKit offers some advanced components that are not included in the FatKit core framework. Usually you wouldn't use these components in your everyday website. They include stuff like nestables and datepickers, which will come in handy, if you create advanced user interfaces like administration areas.

info Auto-components

All FatKit components that require an HTML structure are available via our Sublime Text Plugin. To use simply type fatkit and select the component you would like to render the HTML for.


Usage

After you've cloned FatKit, you can find all additional components in separate /styles and /scripts folders:

/assets/styles
	/sass
		/components
			<!-- Component basic styles -->
			autocomplete.scss
			...

	/css
		/components
			<!-- Component minified styles -->
			autocomplete.css
			...

/assets/scripts
	/components
		<!-- JavaScript of the component and minified version -->
		autocomplete.js

		/min
			autocomplete.min.js
			...

To use one of these components, all you need to do is to add the CSS to the header of your document and the JavaScript below the main fatkit.js file at the end of your document.

Example

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<link rel="stylesheet" href="/assets/styles/css/style.css" />
		<!-- Autocomplete CSS -->
		<link rel="stylesheet" href="/assets/styles/css/components/autocomplete.css">
	</head>
	<body>
		<!-- Your main document content goes here -->

		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="/assets/scripts/min/fatkit.min.js"></script>
		<!-- Autocomplete Javascript -->
		<script src="/assets/scripts/components/min/autocomplete.min.js"></script>
	</body>
</html>

IMPORTANT If you use PrePros please make sure that auto-compile and auto-prefix CSS are both checked for each CSS file.

info As a side note, if you have installed the Sublime Text Plugin for FatKit you can create a new document by typing fatkit and selecting the f-document component. This will create all of the basic CSS structure for a new page.


Tests

FatKit provides test files for every component. Each of these pages contains test cases of its component and gives you an overview of all the possibilities that are supported out of the box.

In the repo you will find all FatKit CSS, JavaScript and font files ready to use for your project. The core framework of FatKit has almost no styling in order to keep it slim. Each style comes as a single CSS file as well as a minified version and all of the required Sass. Some components are also included, which are not part of the core framework and can be added separately to your project.

Go to tests