File Structures

A guide to understanding how Docs UI Kit is structured and organized.

Download package

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

                docs-ui-kit/
                  ├── assets/
                  │   ├── css/
                  │   │   ├── theme.css
                  │   ├── img/
                  │   │   ├── modals/
                  │   │   ├── popovers/
                  │   │   ├── ...
                  │   ├── img-temp/
                  │   │   ├── 100x100/
                  │   │   ├── 1920x1280/
                  │   │   ├── ...
                  │   ├── include/
                  │   │   ├── json/
                  │   │   │   ├── autocomplete-data-for-documentation-search.json
                  │   │   ├── scss/
                  │   │   │   ├── docs/
                  │   │   │   │   ├── accordion/
                  │   │   │   │   ├── anchor/
                  │   │   │   │   ├── ...
                  │   │   │   |   ├── vendor/
                  │   │   │   ├── _user.scss
                  │   │   │   ├── _user-variables.scss
                  │   │   │   ├── theme.scss
                  │   ├── js/
                  │   │   ├── main.js
                  │   │   ├── ...
                  │   ├── svg/
                  │   │   ├── promo-bg.svg
                  │   ├── vendor/
                  │   │   ├── bootstrap/
                  │   │   │   ├── scss/
                  │   │   │   ├── js/
                  │   │   │   ├── css/
                  │   │   ├── ...
                  ├── documentation/
                  │   ├── assets/
                  │   │   ├── ...
                  │   ├── base/
                  │   │   ├── *.html
                  │   │   ├── ...
                  │   ├── components/
                  │   │   ├── *.html
                  │   │   ├── ...
                  │   ├── getting-started/
                  │   │   ├── *.html
                  │   │   ├── ...
                  │   ├── libraries/
                  │   │   ├── *.html
                  │   │   ├── ...
                  │   └── others/
                  │   │   ├── *.html
                  │   │   ├── ...
                  │   ├── index.html
                  ├── index.html
                  ├── doc-1.html
                  ├── doc-2.html
                  └── ...

This is the most basic form of Docs UI Kit: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (theme.css and main.js), as well as compiled and minified CSS and JS (theme.min.css and main.min.js).

HTML

The HTML files can be opened easily in any browser, imported to any project or modified to suit your needs.

Assets

[assets] includes all the assets that are referenced in the HTML pages.

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

Below given folders are used in the template:

  • [css] - CSS files
  • [img] - Images
  • [img-temp] - Images
  • [include] - Json and SASS folders with their files
  • [js] - JavaScript files
  • [svg] - Svg files
  • [vendor] - Third-party libraries