Structure Overview
Template contains next component files and folders:
Folder | Description |
components/kit/core | KIT mixins.scss, core, utils, measurement styles, etc |
components/kit/vendors | KIT third-party plugin styles |
components/kit/widgets | KIT demo widgets (general, charts, etc...) |
components/{templateName}/layout | Template layout components (Menu, Topbar, etc...) |
components/{templateName}/styles | Template styles & mixins |
components/mixins.scss | Shared mixins.scss files |
There are some tips for creating an architecture for your application:
Copy the KIT widget to the
components/{app}folder and rename the widget as you need itPlace your layout components (such as
Menu,Footer, ...) tocomponents/{layout}Import the shared mixins file
components/mixins.scsinto your new componentsImport the new widget to any place in your project
It is recommended not to edit the kit/core and kit/vendors folders, this will prevent problems when updating widgets and applications from future releases.
Instead, redefine the mixins variables in the shared mixins.scss file or import the redefined styles into global.scss
components├─ app // your components folder, name it as you want│ ├─ Userlist│ └─ BudgetChart│├─ layout // your layout components folder, name it as you want│ ├─ Topbar│ └─ Menu│├─ {templateName} // Folder with Template components├─ kit // KIT folder with core & vendors styles and demo widgets└─ mixins.scss // Shared mixins.scsspages├─ dashboard // page with imports from "components" folder└─ profile // page with imports from "components" folder
