Get started

Get familiar with the basic setup and structure of FatKit.

You can find the whole project and all source files on GitHub. See the guide on Grunt to get up and running with FatKit.

Get FatKit


File Structure

In the ZIP file you will find all CSS, JavaScript and font files ready to use for your project. The core framework of FatKit has some very basic styling with the idea that changing a few variables will easily customise it to your required colour scheme. The rest is for you to build upon as your project requires.

If you find something missing, or have a suggestion of something to add, let Alex know for now and he'll get it added.

Folder Description
/assets/styles Contains all FatKit Sass and CSS files.
/assets/fonts Contains fonts used in FatKit.
/assets/scripts Contains all FatKit JavaScript files, including minified versions.
/assets/styles
	<!-- FatKit with the basic style -->
	/style.scss		-- Sass base
	/css/style.css	-- Minified CSS

	<!-- Advanced components -->
	/sass/components/component-name.scss	-- Sass component base
	/css/components/component-name.css		-- component CSS minified

/assets/fonts
	<!-- Place any webfont you need in here -->

/assets/scripts
	<!-- JavaScript and minified version -->
	/fatkit.js
	/min/fatkit.min.js

	<!-- Core components -->
	/core/file-name.js	-- include these in the main JS file

	<!-- Advanced components -->
	/components/component-name.js			-- JS component
	/components/min/component-name.min.js	-- JS component minified

HTML Page Markup

First off, make sure you have a solid code editor, for example Sublime Text. You need to add the compiled and preferably minified FatKit CSS to the header of your HTML5 document and JavaScript just before the closing body tag. jQuery is required as well. And that's it!

Example

<!doctype html>
<html>
	<head>
		<title>Your Site Title</title>
		<link rel="stylesheet" href="/assets/styles/css/style.css">
	</head>
	<body>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="/assets/scripts/min/fatkit.min.js"></script>
	</body>
</html>

Once you have finished implementing FatKit into your webpage, take a look at the FatKit core to get an overview of what FatKit is offering.


FatKit autocomplete for Sublime Text

To work even more efficiently, we recommend that you install FatKit autocomplete. This saves loads of time, as you won't have to look up and type all FatKit classes or component HTML.

To install this package you will need to create a symoblic link from the network to your Sublime Text packages folder. This is usually found (remember to show hidden files and folders):

c:\Users\{username}\AppData\Roaming\Sublime Text 3\Packages

A quicker and easier way is to go to Preference -> Browse Packages in Sublime and copy that URL.

Once you have found the packages directory you will need to remember the path (or copy it from Sublime). Next, open up the command prompt (you may need to run as administrator to do this) and copy/paste or type the following in:

mklink /D "c:\Users\{username}\AppData\Roaming\Sublime Text 3\Packages\FatKit" j:\A-F\FatKit

Remember to change the username for your own and the path, if different, to the one on your system. That should be it. Check that you have the FatKit folder as a shortcut in your packages directory and re/start Sublime. Now when you type class="f- you will see a popup containing all of the classes from FatKit.

To add the HTML for a component type fatkit and they should all pop up inline. Use the arrows keys to navigate and enter to select.


Let's Do This Thing

Now you are ready to go you will need to install the requirements to get FatKit running.