Get started

Get familiar with the basic setup and structure of FatKit.

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

Get FatKit


File Structure

In the FatKit repo 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.

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 Visual Studio Code. 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.


Let's Do This Thing

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