Files

Installation quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut laboe et doloreagnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi aliquid ex ea commodi consequatur? Quis autem vel eum iure

Rrem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut laboe et dolore gnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum

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-box mb-20">
    <div class="dir-explain" data-caption="Directory structure">
      <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>

    <table class="table table-bordered table-striped table-detail">
      <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>
</div>
Markup
Copy

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-box mb-20">
    <div class="file-tree">
        <ul>
            <li class="is-folder">
                <span>css<i>some description about the folder</i></span>
                    <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">
                <span>fonts<i>some description about the folder</i></span>
                    <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">
                <span>img<i>some description about the folder</i></span>
                    <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">
                <span>js<i>some description about the folder</i></span>
                    <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">
                    <span>vendors<i>some description about the folder</i></span>
                        <ul>
                            <li class="is-folder open">
                            <span>jQuery<i>some description about the file</i></span>
                        <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">
                <span>Bootstrap<i>some description about the file</i></span>
                    <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>
</div>
Markup
Copy