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.
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.