Getting Started

Starter Kit

The starter kit is the starting point for every KitFront project. It includes the base files, framework setup, global styles, scripts, and required dependencies.

Choose Bootstrap or Tailwind, copy sections from the KitFront Section Library, and paste them into the starter files.

What the starter includes

Each starter includes the common libraries and files used by KitFront sections.

Framework setup

Includes the related framework files.

Google Fonts

Includes default fonts used for KitFront typography.

MotionFlow

Used for animations, counters, and tickers.

Swiper

Used by carousel and slider sections.

Font Awesome

Used by icon-based sections.

Core and custom files

Core files hold shared styles and scripts. Custom files are for copied section code.

Choose your starter

Select the framework you want to use. Each tab includes the starter download and the steps to begin a project.

Bootstrap Starter

Use this for KitFront Bootstrap sections. Bootstrap sections include HTML and matching CSS.

Download Bootstrap Starter

Start a Bootstrap project

Download and unzip bootstrap-starter.zip.
Open bootstrap-starter/index.html in your code editor.
Visit the KitFront Section Library.
Choose a section and copy its Bootstrap HTML.
Paste the HTML into index.html under the “Start Building Your Page Here” comment.
Copy the matching section CSS.
Paste the CSS into assets/css/style.css.
When the section includes JavaScript, paste it into assets/js/custom.js.
Open index.html in your browser to preview the page.

Tailwind Starter

Use this for KitFront Tailwind sections. Tailwind sections are styled with utility classes, so separate CSS is usually not required.

Download Tailwind Starter

Start a Tailwind project

Download and unzip tailwind-starter.zip.
Open the tailwind-starter folder in your terminal.
Install the project dependencies:
```
npm install
```
Start the Tailwind watch process:
```
npm run watch
```
Open src/index.html in your code editor.
Visit the KitFront Section Library.
Choose a section and copy its Tailwind HTML.
Paste the HTML into src/index.html under the “Start Building Your Page Here” comment.
When the section includes JavaScript, paste it into src/assets/js/custom.js.
Open src/index.html in your browser to preview the page.

Preview

Brand Colors