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.

<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>

File tree

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

<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>

Requirement

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

<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>