Windows 8 Explorer Remake

HTML

<ul class="files">
    <li>
        <span class="icon folder"></span>
        <span class="name">Folder 1</span>
    </li>
    <li>
        <span class="icon folder"></span>
        <span class="name">Folder 2</span>
    </li>
    <li>
        <span class="icon folder"></span>
        <span class="name">Folder 3</span>
    </li>
    <li>
        <span class="icon folder"></span>
        <span class="name">Folder 4</span>
    </li>
    <li>
        <span class="icon folder"></span>
        <span class="name">Folder 5</span>
    </li>
    <li>
        <span class="icon folder"></span>
        <span class="name">Folder 6</span>
    </li>
    <li>
        <span class="icon folder"></span>
        <span class="name">Folder 7</span>
    </li>
</ul>

CSS

html, body {
	height: 100%;
}
body {
	margin: 0px;
	padding: 10px 20%;
	font-family: Segoe UI;
	font-size: 0px;
	margin: 0px;
	box-sizing: border-box;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}
.files {
	list-style: none;
	padding: 0px;
	margin: 0px;
}
.files li {
	display: block;
	padding: 2px;
	border: 1px solid transparent;
	cursor: default;
}
body:not(.blur) .files li:not(.selected):hover {
	border-color: #70C0E7;
	background-color: #E5F3FB;
}
.files li.selected {
	border-color: #66A7E8;
	background-color: #D1E8FF;
}
body.blur .files li.selected {
	border-color: #DEDEDE;
	background-color: #F7F7F7;
}
.files li > * {
	display: inline-block;
	vertical-align: middle;
}
.files li > .name {
	position: relative;
	top: -.5px;
	height: 15px;
	font-size: 12px;
}

/* Icons */
.icon {
	width: 16px;
	height: 16px;
	background-size: 16px;
	background-repeat: no-repeat;
	margin-right: 2px;
}
.icon.folder {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACq0lEQVR42nWT/UtTURjHv2tuu3fzZZt3wTLfnU4RLAqLIiuNEILot/6AqKA3+qEXIiKEitLSCsIoCunl9+iHIJIiLEIIKWimTF3WmuXLJrbt7r6ezj3Tuwx8uM95zn043895zn3OtYBaOtbzglj03USDVVdVEJ0AxAJd1+hcY3HRI/S91990rQuLZklN3bDSqNqLarDKthli4hmkVByJ+ALKgm2w2uxLa6HKScyG30RK1ndVmQBjoBBid9exRB7XzuLkx+NIKatRGWyC3eWhldDKNBXTo6+wdkO3ZUVAFrIHE4MHkcwIELw8fFXNFCBD1xTMjL9D2cab/wFiFOD5F9CO8PsDSMs+FHt4CBVNVCwxj09+Qnnz7eWAPz87CedtYAmdlmrjdmF04BBEVUCxm4O3NAiiZgGJqTAqN91ZDlj4cZXwQiMT66oMG9+CkYETkFQvA7j9FTQvMU8vzEGRpd7qLXePmID5b5cI72tkYk2RaDeqMTZ4nQKKGKBQ8NPdM1mIJiOdyqBm632LCYhPdBC+uJ6JVSVD2yUiOtwPSSlggHyPmwmNI3DlV5D4ehaBbQ9ygNnwBcJ5ak2x4bHRt5AVJ7wU4Cx00hZmu+AK3EJ8+AxqWx7mAL9HzhFHUZUpViURvyY+QJYdrALOZaNtVNhdKKi/h7nQKdRt78sBpr6cJraCUlNsxOnvQ5ClPAi0jQ4eTGzYxUwPzjs6ENzxKAeIfj5J8px+U6zRo8zFQhRgoRVkAUt2NHoZ3Ws6Ub/zcQ4wOXSMWO2CKTZ8fmYckkjoTXQtAxCsgqTljzW0PgmYgMjg4X5ZzrRpms7+QtBFyfkoRJF+AwqwchzNE/oQAzFGh96G1qfdJsCw0Ov9JYoktityZi/R9daZ2XQonSR9gUrfy3X7nkewgv0FLcF8ICRfRkwAAAAASUVORK5CYII=);
}

/* Selection...

JavaScript

$(function(){
	var $body = $(document.body);
	$(window).on({
		blur: function(){
			$body.addClass('blur');
		},
		focus: function(){
			$body.removeClass('blur');
		}
	});
	$('.files li').click(function(e){
		e.stopPropagation();
		var $this = $(this);
		if (!$this.hasClass('selected')){
			$('.files li').removeClass('selected');
			$this.addClass('selected');
		}
	});
	
	var selecting = false,
		$selectionDiv = $(document.createElement('div')).addClass('selection').appendTo($body),
		startX, startY;
	$body.on({
		mousedown: function(e){
            $('.files li').removeClass('selected');
			if (e.target === document.body){
				e.stopPropagation();
				
				startX = e.clientX;
				startY = e.clientY;
				selecting = true;
				
				$selectionDiv.show().css({top:startY+'px',left:startX+'px',width:'0px',height:'0px'});
			}
		},
		mousemove: function(e){
			if (selecting){
				var currentX = e.clientX,
					currentY = e.clientY;
				
				var subX = currentX - startX,
					subY = currentY - startY;
				
				if (subX < 0){
					subX *= -1;
					$selectionDiv.css('left',startX+(currentX-startX));
				}
				else $selectionDiv.css('left',startX+'px');
				
				if (subY < 0){
					subY *= -1;
					$selectionDiv.css('top',startY+(currentY-startY));
				}
				else $selectionDiv.css('top',startY+'px');
				
				$selectionDiv.css({
					width: subX,
					height: subY,
				});
                
                var topLeftX = Math.min(startX, currentX),
                    topLeftY = Math.min(startY, currentY),
                    bottomRightX = Math.max(startX, currentX),
                    bottomRightY = Math.max(startY, currentY);
            
                $('.files li').each(function() {
                    var offset = $(this).offset(),
                        width = $(this).outerWidth(),
                        height = $(this).outerHeight();
            
                    if (offset.left < bottomRightX
                            && offset.left + width > topLeftX
...