Starter Kit

What is included?

• Bootstrap or Tailwind framework setup.
• Global CSS and design tokens.
• Shared JavaScript utilities.
• MotionFlow and Swiper integration.
• Assets folders for images and videos.
• Ready-to-use project structure.

Recommended folder structure

project
├── index.html
├── about.html
├── contact.html
│
├── assets
│   ├── css
│   │   ├── core.css
│   │   └── style.css
│   │
│   ├── js
│   │   ├── core.js
│   │   └── custom.js
│   │
│   ├── images
│   └── videos

core.css

This is the main stylesheet for your project. It contains design tokens, global styles, buttons, utilities, typography, and shared components.

Update this file first to match your client's branding before adding sections.

style.css

Use this file for section-specific styles copied from KitFront.

Whenever a section contains custom CSS, paste it into this file.

core.js

This file contains shared functionality used across multiple sections such as MotionFlow configuration, pricing toggles, header interactions, and other reusable scripts.

custom.js

Use this file for section-specific JavaScript copied from KitFront.

Only paste JavaScript when the editor provides a JS tab for that section.

Assets folder

Store your project images inside the images folder and videos inside the videos folder. Replace all demo assets before launching production websites.

Starter updates

New sections may occasionally require updates to the starter kit. Always use the latest starter version when beginning a new project.