A Pen by Derek Wheelden.

File-Browser-Mockup.markdown

File Browser Mockup

A Pen by Derek Wheelden on CodePen.

License.

index.html

<div class="container">
  
  <h1>File Browser Mockup</h1>
  <h2>Click some things</h2>
  
  <div class="browser">
    <h1>File Browser</h1>
    <ul class="folders">
      <li>
        <a href="#">
          <i class="fa fa-folder"></i> 
          Blogs
        </a>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-folder"></i> 
          PDFs
        </a>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-folder"></i> 
          Dossiers
        </a>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-folder"></i> 
          Not Porn
        </a>
      </li>
    </ul>
    <div class="files">
      <ul class="files__actions">
        <li>
          <a href="#">
            <i class="fa fa-search"></i> Search
          </a>
        </li>
        <li>
          <a href="#">
            <i class="fa fa-plus"></i> Upload File
          </a>
        </li>
        <li>
          <a href="#" class="show-thumbnails">
            <i class="fa fa-picture-o"></i> Show Thumbnails
          </a>
        </li>
      </ul>
      <ul  class="files__list">
        <li>
          <div class="thumbnail">
            <img src="http://fillmurray.com/300/300">
            <div class="zoom"><i class="fa fa-search"></i></div>
          </div>
          <a href="#">
            <i class="fa fa-picture-o"></i> happy-trees.png
          </a>
          <div class="settings">
            <label for"alt-text">Alt Text &rsaquo;</label>
            <input type="text" id="alt-text">
            <label>Align &rsaquo;</label>
            <input type="radio" name="align"> Left
            <input type="radio" name="align"> Right
            <input type="radio" name="align" checked> Auto
            <span class="insert">
              <i class="fa fa-plus"></i> Insert
            </span>
          </div>
        </li>
        <li>
          <div class="thumbnail">
            <img src="http://fillmurray.com/200/200">
            <div class="zoom"><i class="fa fa-search"></i></div>
          </div>
          <a href="#">
            <i class="fa fa-picture-o"></i> happy-river.png
          </a>
          <div class="settings">
            <label for"alt-text">Alt Text &rsaquo;</label>
            <input type="text" id="alt-text">
            <label>Align &rsaquo;</label>
            <input type="radio" name="align"> Left
            <input type="radio" name="align"> Right
            <input type="radio" name="align" checked> Auto
            <span class="insert">
              <i class="fa fa-plus"></i> Insert
            </span>
          </div>
        </li>
        <li>
          <div class="thumbnail">
            <i class="fa fa-file"></i>
            <div class="zoom"><i class="fa fa-search"></i></div>
          </div>
          <a href="#">
            <i class="fa fa-file"></i> tps_report_jerry.pdf
          </a>
          <div class="settings">
            <label for"alt-text">Title &rsaquo;</label>
            <input type="text" id="alt-text">
            <span class="insert">
              <i class="fa fa-plus"></i> Insert
            </span>
          </div>
        </li>
        <li>
          <div class="thumbnail">
            <i class="fa fa-file"></i>
            <div class="zoom"><i class="fa fa-search"></i></div>
          </div>
          <a href="#">
            <i class="fa fa-file"></i> embarassing-secrets.pdf
          </a>
          <div class="settings">
            <label for"alt-text">Title &rsaquo;</label>
            <input type="text" id="alt-text">
            <span class="insert">
              <i class="fa fa-plus"></i> Insert
            </span>
          </div>
        </li>
        <li>
          <div class="thumbnail">
            <i class="fa fa-question"></i>
            <div class="zoom"><i class="fa fa-search"></i></div>
          </div>
          <a href="#">
            <i class="fa fa-question"></i> virus_trojan.hax
          </a>
          <div class="settings">
            <label for"alt-text">Title &rsaquo;</label>
            <input type="text" id="alt-text">
            <span class="insert">
              <i class="fa fa-plus"></i> Insert
            </span>
          </div>
        </li>
        <li>
          <div class="thumbnail">
            <i class="fa fa-question"></i>
            <div class="zoom"><i class="fa fa-search"></i></div>
          </div>
          <a href="#">
            <i class="fa fa-question"></i> virus_trojan_1.hax
          </a>
          <div class="settings">
            <label for"alt-text">Title &rsaquo;</label>
            <input type="text" id="alt-text">
            <span class="insert">
              <i class="fa fa-plus"></i> Insert
            </span>
          </div>
        </li>
      </ul>
      <div class="placeholder active">
        <i class="fa fa-rocket"></i>
      </div>
    </div>
  </div>
  
</div>

script.js

$(function () {

  var $folders = $('.folders'),
      $files = $('.files'),
      $filesList = $('.files__list');
  
  $folders.on('click', 'a', function () {
    // Hide the rocket
    $('.placeholder').removeClass('active');
    // Reveal the actions toolbar
    $('.files__actions').addClass('active');
    // Reveal the list of files
    $filesList.addClass('active');
    // Hightlight only the clicked folder
    $('a', $folders).removeClass('active');
    $(this).addClass('active');

    return false;
  });
  
  $files.on('click', '.files__list a', function () {
    // Hide thumbnails and settings toolbar for
    // previously clicked files
    $('.settings', $filesList).removeClass('active');
    $('li', $filesList).removeClass('active');
    // Reveal thumbnail and settings toolbar
    $(this)
      .closest('li')
      .addClass('active')
      .find('.settings')
      .addClass('active');
    
    return false;
  });
  
  $('.show-thumbnails').on('click', function () {
    var $this = $(this),
        $li = $('li', $filesList);
    
    if ($this.hasClass('active')) {
      // Hide thumbnails
      $li.removeClass('active');
      $this.removeClass('active');
    } else {
      // Show thumbnails
      $li.addClass('active');
      $this.addClass('active');
    }
    
    return false;
  });

});

try {
  Typekit.load({
     loading: function() {
       // Javascript to execute when fonts start loading
     },
     active: function() {
       // Javascript to execute when fonts become active
       $('.container').addClass('tk-loaded');
     },
     inactive: function() {
       // Javascript to execute when fonts become inactive
       $('.container').addClass('tk-loaded');
     }
   });
} catch (e) {
  // Do something
}

style.scss

@import "compass";
// Variables
$base-color: hsl(200, 70, 70);
$darker: darken($base-color, 20%);
$lighter: lighten($base-color, 20%);
$complement: complement($base-color);

.browser {
  position: relative;
  width: 90%;
  max-width: 50em;
  min-height: 20em;
  margin: 0 auto;
  background: white;
  overflow: hidden;
  box-shadow: 0 0.5em 2em 0 rgba(black, 0.2);
  
  h1 {
    margin: 0;
    padding: 0.5em 0;
    background: $darker;
    font-size: 1em;
    line-height: 1.5;
    text-transform: uppercase;
    color: white;
  }
  
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .folders {
    position: absolute;
    top: 3.125em;
    bottom: 0;
    width: 12.5em;
    background: #444;
    font-size: 0.8em;
    color: white;
    z-index: 9999;
    
    li {
      display: block;
  
      a {
        display: block;
        padding: 0.625em;
        border-left: 5px solid $complement;
        text-decoration: none;
        color: inherit;
      }
      
      &:nth-child(even) a {
        border-left: 5px solid $base-color;
        background: #555;
      }
      
      a:hover, a.active {
        border-left: 5px solid $complement;
        background: $complement;
        color: white;
      }
    }
    
    i { margin-right: 0.5em; }
  }
  
  .files {
    position: relative;
    height: 100%;
    padding-left: 10em;
    
    .placeholder {
      position: absolute;
      top: 50%;
      left: calc(50% + 0.5em);
      font-size: 10em;
      font-weight: bold;
      text-transform: uppercase;
      color: black;
      opacity: 0;
      transition: opacity 0.2s ease-in-out;
      transform: translate(-50%, -50%);
      animation: rockit 1s infinite ease-in-out;
      
      &.active { opacity: 0.05; }
    }
    
    .files__actions {
      max-height: 0;
      background: $base-color;
      font-size: 0.75em;
      color: white;
      overflow: hidden;
      transition: max-height 0.2s ease-in-out;
      @extend .cf;
      
      &.active {
        max-height: 3em;
      }        
        
      li {
        display: block;
        float: left;
        
        a {
          display: block;          
          padding: 0.5em 1em;
          text-decoration: none;
          color: inherit;
            
          &:hover, &.active { background: white; color: $darker; }
        }
      }
    }
  }
  
  .files__list {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    
    &.active { opacity: 1; }
    
    li {
      position: relative;
      transition: transform 0.2s ease-in-out;
      transform: translateX(-3.5em);
      
      &:hover, &.active {
        transform: translateX(0);
      }
    }
    
    li:nth-child(even) a {
      background: #f7f7f7;
    }
      
    li a {
      display: block;
      width: calc(100% + 3.5em);
      padding: 1em 1em 1em 4.5em;
      background: white;
      text-decoration: none;
      color: inherit;
        
      i {
        width: 1.5em;
        margin-right: 0.5em;
        text-align: center;
      }
    }
    
    li > .thumbnail {
      position: absolute;
      width: 3.5em;
      height: 3.5em;
      
      img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        transform: translate(-50%, -50%);
      }
      
      > i {
        width: 100%;
        background: $complement;
        font-size: 1.5em;
        line-height: 2.35;
        text-align: center;
        color: white;
      }
      
      .zoom {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(black, 0.5);
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
        
        &:hover { opacity: 1; }
        
        i {
          width: 100%;
          font-size: 1.5em;
          line-height: 2.3333;
          text-align: center;
          color: white;
        }
      }
    }
    
    .settings {
      width: calc(100% + 4.6667em);
      max-height: 0;
      padding: 0 1em 0 6em;
      background: $base-color;
      font-size: 0.75em;
      color: white;
      transition: max-height 0.2s ease-in-out;
      
      &.active { max-height: 3em; }
      
      label {
        display: inline-block;
        padding: 0.5em;
        background: $darker;
      }
      
      input {
        margin: 0 1em;
        border: 1px solid $darker;
        color: #222;
      }
      
      .insert {
        display: inline-block;
        margin-left: 1em;
        padding: 0.5em;
        background: white;
        color: $darker;
        cursor: pointer;
        
        &:hover {
          background: $darker;
          color: white;
        }
      }
    }
  }
}

/** PAGE STYLES **/
$serif: 'ff-tisa-web-pro', serif;
$sans-serif: 'proxima-nova', sans-serif;
* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; }

html { font-size: 62.5%; }

body {
  font-family: $sans-serif;
  font-size: 2em;
  line-height: 1.5;
  font-weight: 300;
  color: #222;
  overflow-x: hidden;
  -webkit-backface-visibility: hidden;
}

h1 {
  margin: 0;
  font-size: 3em;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  color: $darker;
}

h2 {
  margin: 0 0 0.5em;
  font-size: 1.5em;
  font-weight: normal;
  text-align: center;
  text-transform: lowercase;
  color: $complement;
}

h3 {
  margin: 1em 0;
  font-family: $sans-serif;
  font-size: 2em;
  font-weight: 100;
  text-transform: uppercase;
}

.container {
  visibility: hidden;
  padding: 1em 0;
}

.no-js .container,
.container.tk-loaded{
  visibility: visible;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

@keyframes rockit {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  25%  { transform: translate(-48%, -48%) rotate(2deg); }
  50%  { transform: translate(-50%, -50%) rotate(-2deg); }
  75%  { transform: translate(-52%, -52%) rotate(2deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}