Included files

Provide some description for each file and folder inside your package.

  1. Directory explanation
  2. File tree

Directory explanation

Good for small ampunt of file and longer description for each file or folder.

/assets/

  • bootstrap/

    • css/
    • fonts/
    • js/

      • bootstrap.js
      • bootstrap.min.js
  • jquery/
  • highlight/
  • mediaelement/
File/Folder Purpose
bootstrap/ Bootstrap and all required files are placed under this directory. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
bootstrap/css/ Heart of bootstrap!
jquery/ This folder contains latest version of jQuery. jQuery is a fast, small, and feature-rich JavaScript library.
highlight/ Our sysntax highlighter plugin and all required files.
mediaelement/ We use this plugin to show self-hosted videos with high consistency.

<div class="dir-explain">
  <code class="url">/assets/</code>
  <ul class="files">
    <li>
      <code>bootstrap/</code>
      <ul class="files">
        <li><code>css/</code></li>
        <li><code>fonts/</code></li>
        <li>
          <code>js/</code>
          <ul class="files">
            <li><code>bootstrap.js</code></li>
            <li><code>bootstrap.min.js</code></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><code>jquery/</code></li>
    <li><code>highlight/</code></li>
    <li><code>mediaelement/</code></li>
  </ul>
</div>

<div class="table-responsive">
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>File/Folder</th>
        <th>Purpose</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code>bootstrap/</code></td>
        <td>Bootstrap and all required files are placed under this directory. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</td>
      </tr>
      <tr>
        <td><code>bootstrap/css/</code></td>
        <td>Heart of bootstrap!</td>
      </tr>
      <tr>
        <td><code>jquery/</code></td>
        <td>This folder contains latest version of jQuery. jQuery is a fast, small, and feature-rich JavaScript library.</td>
      </tr>
      <tr>
        <td><code>highlight/</code></td>
        <td>Our sysntax highlighter plugin and all required files.</td>
      </tr>
      <tr>
        <td><code>mediaelement/</code></td>
        <td>We use this plugin to show self-hosted videos with high consistency.</td>
      </tr>
    </tbody>
  </table>
</div>

File tree

Use this component to show more files and folders to the customers and provide a short description for each of those.

  • csssome description about the folder

    • custom.csssome description about the file
    • theDocs.csssome description about the file
  • fontssome description about the folder

    • fontawesome-webfont.eotsome description about the file
    • fontawesome-webfont.svgsome description about the file
    • fontawesome-webfont.ttfsome description about the file
    • fontawesome-webfont.woffsome description about the file
  • imgsome description about the folder

    • placeholder.jpgsome description about the file
    • logo.pngsome description about the file
    • sample-video.mp4some description about the file
    • ads.pngsome description about the file
  • jssome description about the folder

    • theDocs.jssome description about the file
    • plugins.jssome description about the file
    • custom.jssome description about the file
  • vendorssome description about the folder

    • jQuerysome description about the file

      • jquery.jssome description about the file
      • jquery.min.jssome description about the file
    • Bootstrapsome description about the file

      • csssome description about the folder
      • fontssome description about the folder
      • jssome description about the folder
    • MediaElementsome description about the file
    • Prismsome description about the file
  • index.htmlsome description about the file
  • dashboard.htmlsome description about the file
  • starter.htmlsome description about the file


<div class="file-tree">
  <ul>
    <li class="is-folder">
      css<i>some description about the folder</i>
      <ul>
        <li class="is-file">custom.css<i>some description about the file</i></li>
        <li class="is-file">theDocs.css<i>some description about the file</i></li>
      </ul>
    </li>

    <li class="is-folder">
      fonts<i>some description about the folder</i>
      <ul>
        <li class="is-file">fontawesome-webfont.eot<i>some description about the file</i></li>
        <li class="is-file">fontawesome-webfont.svg<i>some description about the file</i></li>
        <li class="is-file">fontawesome-webfont.ttf<i>some description about the file</i></li>
        <li class="is-file">fontawesome-webfont.woff<i>some description about the file</i></li>
      </ul>
    </li>

    <li class="is-folder">
      img<i>some description about the folder</i>
      <ul>
        <li class="is-file">placeholder.jpg<i>some description about the file</i></li>
        <li class="is-file">logo.png<i>some description about the file</i></li>
        <li class="is-file">sample-video.mp4<i>some description about the file</i></li>
        <li class="is-file">ads.png<i>some description about the file</i></li>
      </ul>
    </li>

    <li class="is-folder">
      js<i>some description about the folder</i>
      <ul>
        <li class="is-file">theDocs.js<i>some description about the file</i></li>
        <li class="is-file">plugins.js<i>some description about the file</i></li>
        <li class="is-file">custom.js<i>some description about the file</i></li>
      </ul>
    </li>

    <li class="is-folder open">
      vendors<i>some description about the folder</i>
      <ul>
        <li class="is-folder open">
          jQuery<i>some description about the file</i>
          <ul>
            <li class="is-file">jquery.js<i>some description about the file</i></li>
            <li class="is-file">jquery.min.js<i>some description about the file</i></li>
          </ul>
        </li>

        <li class="is-folder">
          Bootstrap<i>some description about the file</i>
          <ul>
            <li class="is-folder">css<i>some description about the folder</i></li>
            <li class="is-folder">fonts<i>some description about the folder</i></li>
            <li class="is-folder">js<i>some description about the folder</i></li>
          </ul>
        </li>

        <li class="is-folder">
          MediaElement<i>some description about the file</i>
        </li>

        <li class="is-folder">
          Prism<i>some description about the file</i>
        </li>
      </ul>
    </li>

    <li class="is-file">index.html<i>some description about the file</i></li>
    <li class="is-file">dashboard.html<i>some description about the file</i></li>
    <li class="is-file">starter.html<i>some description about the file</i></li>
  </ul>
</div>