Skip to main content

File Structures

A guide to understanding how Onekit is structured and organized.

Download package

Download package contains two main src/ folder and / root.

Once downloaded, unzip the compressed folder and you'll see something like this:

            onekit/
              ├── src/
              │   ├── css/ ( Compiled css )
              │   ├── img/ ( Source images )
              │   ├── img-min/ ( Minify images )
              │   ├── js/ ( JS source )
              │   ├── plugins/ ( Third party plugins )
              │   ├── scss/ ( SCSS source for theme )
              │   ├── 
              ├── dist/ ( Production files )
              │   ├── css/
              │   ├── fonts/
              │   ├── img/
              │   ├── js/
              │   ├── 
              ├── docs/ ( All documentation files )
              │   ├── 
              ├── node_modules/ ( npm install dependencies )
              │   ├──   
              ├── sections/ ( Html section snippets )
              │   ├──
              ├── index.html
              ├── index-apps.html
              ├── *.html
              ├── ...
              └────────────────

This is the most basic form of Onekit: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (theme.css and theme.js), as well as compiled and minified CSS and JS (theme.min.css and theme.min.js). You also get minified bundle CSS and JS ( plugin css and js included ) bundle.min.css and bundle.min.js

HTML

Onekit root is the source for HTML pages and contains HTML templates, which you see in the live preview. These HTML files can be opened easily in any browser, imported to any project, or modified to suit your needs.

Src

src/ includes all the assets that are referenced in the HTML pages.

Precompiled versions of JavaScript and CSS files are generated in their respective src/js/ and src/css folders to support the self-contained 'static website'.

Below given folders are used in the template:

  • css - CSS and Source Maps CSS
  • img - Images
  • img-min - Minify Images
  • js - JavaScript files
  • scss - SASS folders with their files
  • plugins - Third-party libraries

Dist

dist/ includes all the production files.

Below given folders are used in the template:

  • css - Minify CSS and Source Maps CSS
  • fonts - Fonts for minify css
  • img - Minify Images
  • js - Minify JS

Sections

sections is the demo for HTML sections and source HTML files. You can copy and imported to any project, or modified to suit your needs.

Advantages

  • Avoiding the probabilities of conflicts between Onekit codes and third party plugins (libraries).
  • Intuitive clear architecture.
  • Everything is structured, each component in its own file and in its component in the main object.
  • The ability of extending functionality without affecting the behavior of the core object and not changing the existing functionality.
  • By creating wrapper components, simply solves complicated initializations structures for the users.
  • Very easy access to any starters components and core settings from anywhere in the template.