a directory layout in CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_assets
css
img
LICENSE
README.md
TODO.md
index.php

README.md

directory

a flexible directory layout in CSS

Documentation

  1. Add directory.css to you stylesheets
  2. Create an ul element.
  3. Add the directory class to the element
  4. Each ul element acts as a folder, so you can nest as many ul elements as there are folders
  5. Add the folder or file class to every li element for the proper icon to show

Example code

<link rel="stylesheet" href="css/directory.css">
...
<ul class="directory">
    <li class="folder">app
        <ul>
            <li class="folder">commands</li>
            <li class="folder">config
            <ul>
                <li class="folder">local
                    <ul>
                        <li class="file">app.php</li>
                        <li class="file">database.php</li>
                    </ul>
                </li>
                <li class="file">packages</li>
                <li class="file">app.php</li>
            </ul></li>
            <li class="folder">controllers</li>
            <li class="file">filters.php</li>
            <li class="file">routes.php</li>
        </ul>
    </li>
    <li class="folder">bootstrap</li>
    <li class="folder">public</li>
    <li class="folder">vendor
        <ul>
            <li class="folder">bin</li>
        </ul>
    </li>
    <li class="file">.gitattributes</li>
    <li class="file">.gitignore</li>
    <li class="file">.htaccess</li>
    <li class="file">artisan</li>
    <li class="file">composer.json</li>
    <li class="file">composer.lock</li>
</ul>

Which will result into

Output example of directory layout