Included files
Provide some description for each file and folder inside your package.
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
-
jQuerysome 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>
Default open folder
To make a folder expanded, add .open
class to your desire li.is-folder
tag.