File Structure

Documentation about how the theme is structured

Precompiled structure

Below is the initial theme structure before compilation running

          
  krait-ui/
  ├── src
     ├── html/
     │  ├── docs/
     │  ├── pages/
     │  │  ├── account/
     │  │  ├── admin/
     │  │  ├── authentication/
     │  │  ├── inner/
     │  │  ├── landing/
     │  │  ├── misc/
     │  │  ├── shop/
     │  ├── index.html
     │  ├── sections.html
     │  ├── ...
     ├── images/
     ├── js/
     │  ├── vendor/
     │  ├── main-admin.js
     │  ├── main.js
     ├── scss/
     │  ├── custom/
     │  ├── user/
     │  ├── vendor/ 
     │  ├── _variables.scss
     │  ├── docs.scss
     │  ├── main.scss
  ├── .gitignore 
  ├── gulpfile.js 
  ├── package.json 
  ├── README.MD
          
        
  • html/ : all HTML files for prebuilt pages, sections and components.
  • images/ : logo, illustrations and images for content.
  • js/ : Javascript files from 3rd-party as core and Javascript theme files to initialize plugins.
  • scss/ : all Sass files contain variables, custom styles and plugin styles overrides.

Compiled structure

Once we run npm install and then gulp, the top-level structure will be as below.

          
  krait-ui/
  ├── dist/
  ├── node_modules/
  ├── src/
  ├── .gitignore 
  ├── gulpfile.js 
  ├── package.json 
  ├── README.MD
          
        

Notice two additional directories added to the theme:

  • dist/ : where the compilation result placed after running gulp
  • node_modules/ : where all downloaded dependencies are store after running npm install