Files

A set of components to show your files and directories with an optional description.

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" 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>
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">
  <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>
Markup
Copy

Requirement

Your product or part of your product needs special files? Use this component to inform your users.

<link href="path/to/style.min.css" rel="stylesheet">
<script src="path/to/script.min.js"></script> <script src="path/to/another-script.min.js"></script> 
<div class="requirement">
  <div class="requirement-item" data-title="css">
    <code class="language-markup"><link href="path/to/style.min.css" rel="stylesheet"></code>
  </div>
  <div class="requirement-item" data-title="js">
    <code class="language-markup"><script src="path/to/script.min.js"></script></code>
    <code class="language-markup"><script src="path/to/another-script.min.js"></script></code>
  </div>
</div>
Markup
Copy