Concept
Starter Kits in Metronic are ready-to-use, simple versions that give developers a good starting point. They are the simplified version of Metronic with only the most important parts.
The following points show the main features and advantages of the starter kits approach.
Simple Setup - Only basic files and important tools are included, making your app faster and smaller.
Clean Start - Removes example content and complicated features to provide a clean starting point for your own work.
Ready to Use - Made for real websites and apps with good settings and simple setup.
Easy to Change - Designed as a starting point that lets developers add features step by step as needed.
Made for Developers - Helps developers focus on what they need without extra stuff they don't need.
Layouts Collection
The Metronic starter kit provides 10 different layout styles, each made for different needs and style choices. Each layout comes with its own layout, design, and blank page examples.
The layouts are stored in the
views/layouts/
directory with the following structure:
views/layouts/
├── layout-1/ # Light sidebar with big menu
├── layout-2/ # Dark sidebar with menu
├── layout-3/ # Full-width layout
├── layout-4/ # Full-width with dark theme
├── layout-5/ # Top menu layout
├── layout-6/ # Small sidebar layout
├── layout-7/ # Simple header layout
├── layout-8/ # Wide layout
├── layout-9/ # Modern card layout
└── layout-10/ # Business dashboard layout
Each layout includes its own group of parts and settings:
Main Layout File -
main.html
builds on the main layout and creates the layout design.
Header Component -
_header.html
contains the top menu and logo.
Sidebar Component -
_sidebar.html
provides menu and user buttons.
Footer Component -
_footer.html
contains bottom content and extra links.
Additional Components - Special parts for each layout like page links, titles, and special menus.
Empty Pages
Each layout in the starter kit includes an
empty/index.html
file that works as a clean starting page for your own work. These empty pages provide the basic structure you need to start building your website or app.
Same Structure - All empty pages follow the same pattern everywhere.
Made for Each Layout - Each uses the right layout to keep the same look.
Simple Content - Only important parts are included, ready for your content.
Loading Files - Includes necessary JavaScript tools and files.
Content Boxes - Uses Metronic's content boxes for even spacing and layout.
The empty pages use Metronic's content boxes for even layout control:
Mobile-Friendly - Works on phones, tablets, and computers with different content box settings.
Even Spacing - Keeps spacing rules across all layouts.
views/pages/
├── layout-1/
│ ├── index.html
│ ├── empty/
│ │ └── index.html
│ └── dark-sidebar/
│ └── index.html
├── layout-2/
│ ├── index.html
│ ├── empty/
│ │ └── index.html
│ └── dark-sidebar/
│ └── index.html
└── ... (continues for all 10 layouts)
Pick the Layout You Like - Select the layout that works best for what you need.
Start Fresh - Begin with a clean starting point for your own work.
Keep Things the Same - Keep design rules while building your own features.
Add More Step by Step - Add features and parts as needed without system limits.
Focus on Your App - Concentrate on features for your app rather than system setup.
