Skip to content

Instantly share code, notes, and snippets.

@simonwjackson

simonwjackson/index.html

Last active February 18, 2017 14:48
Show Gist options
  • Save simonwjackson/867adcd54b84124cb6dd7fc4e8710a84 to your computer and use it in GitHub Desktop.
Save simonwjackson/867adcd54b84124cb6dd7fc4e8710a84 to your computer and use it in GitHub Desktop.
Download ZIP
Game Packery with left nav // http://jsbin.com/gamafuk
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta content="Game Packery with left nav" name="description">
<meta charset="utf-8">
<meta content="width=device-width" name="viewport">
<title>
JS Bin
</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/packery@2/dist/packery.pkgd.js">
</script>
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.js">
</script>
</head>
<body>
<div id="container">
<nav class="level left-nav">
<div class="level-item has-text-centered left-nav--item is-active">
<div>
<div class='ikon'>
&#9829;
</div>
</div>
</div>
<div class="level-item has-text-centered left-nav--item">
<div>
<div class='ikon'>
&#128218;
</div>
</div>
</div>
<div class="level-item has-text-centered left-nav--item">
<div>
<div class='ikon'>
&#128218;
</div>
</div>
</div>
<div class="level-item has-text-centered left-nav--item">
<div>
<div class='ikon'>
&#128218;
</div>
</div>
</div>
<div class="level-item has-text-centered left-nav--item">
<div>
<div class='ikon'>
&#128218;
</div>
</div>
</div>
</nav>
<div class="grid">
<div class="gutter-sizer"></div>
<div class="grid-item grid-item--6">
<img data-src="http://cdn.akamai.steamstatic.com/steam/apps/304650/header.jpg?t=1487261656" src=
"//placehold.it/460x215">
</div>
<div class="grid-item grid-item--4">
<img data-src="https://s-media-cache-ak0.pinimg.com/originals/06/32/18/0632183516ef4e84a51a7c984841ac3a.jpg"
src="//placehold.it/812x1137">
</div>
<div class="grid-item grid-item--6">
<img data-src="http://cdn.akamai.steamstatic.com/steam/apps/391220/header.jpg?t=1478568158" src=
"//placehold.it/460x215">
</div>
<div class="grid-item grid-item--4">
<img data-src="http://i.imgur.com/5j7aIzE.jpg" src="//placehold.it/400x533">
</div>
<div class="grid-item grid-item--4">
<img data-src=
"http://www.mobygames.com/images/shots/l/310316-castlevania-nes-screenshot-oh-my-god-what-a-despicable-monstrosity.png"
src="//placehold.it/256x224">
</div>
<div class="grid-item grid-item--4">
<img data-src="https://upload.wikimedia.org/wikipedia/en/0/09/Gilligan's_Island_NES_game_screenshot.png" src=
"//placehold.it/256x224">
</div>
<div class="grid-item grid-item--6">
<img data-src=
"http://cdn.akamai.steamstatic.com/steam/spotlights/b004f68d2c01f6bcdfd47634/spotlight_image_english.jpg?t=1487263212"
src="//placehold.it/306x350">
</div>
<div class="grid-item grid-item--6">
<img data-src=
"http://cdn.akamai.steamstatic.com/steam/apps/475550/ss_a8f8a25d55ef252cd8f9f36ab380e052e1ec26a2.600x338.jpg"
src="//placehold.it/600x337">
</div>
<div class="grid-item grid-item--5">
<img data-src="http://cdn.akamai.steamstatic.com/steam/apps/505730/capsule_184x69.jpg?t=1487163560" src=
"//placehold.it/184x69">
</div>
</div>
</div>
</body>
</html>
Raw
jsbin.gamafuk.js
// external js: packery.pkgd.js, imagesloaded.pkgd.js
// init Packery
var grid = document.querySelector('.grid');
var pckry = new Packery( grid, {
itemSelector: '.grid-item',
percentPosition: true,
gutter: '.gutter-sizer',
});
// layout Packery after each image loads
imagesLoaded( grid ).on( 'progress', function() {
pckry.layout();
});
Raw
jsbin.gamafuk.scss
* { box-sizing: border-box; }
/* force scrollbar */
html {
overflow-y: scroll;
background:#333;
}
body {
font-family: sans-serif;
padding: 0;
}
::-webkit-scrollbar {
display: none;
}
.ikon {
font-size: 4rem;
font-family: -webkit-pictograph;
color: white;
}
/* ---- left-nav ---- */
.left-nav {
float: left;
display: inline-block;
width: 7%;
height: 100%;
margin-top: 0;
margin-bottom: 0 !important;
padding-top: 10%;
padding-bottom: 10%;
&--item {
background-color: #ddd;
width: 25%;
height: 15%;
margin-bottom: 26px;
.ikon {
display: none;
}
&.is-active {
background-color: #ccc;
width: 100%;
.ikon {
display: block;
}
}
}
}
/* ---- container ---- */
#container {
$fix-dpi-home: 2.8;
$fix-dpi-surface: 1.8;
$fix-dpi: $fix-dpi-home;
$fix-dpi: 1;
width: (1280px / $fix-dpi);
height: (720px / $fix-dpi);
background: #eee;
}
/* ---- grid ---- */
.grid {
width: 93%;
margin: 0 0 0 10%;
padding-top: 10%;
overflow: scroll;
max-height: 100%;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
$gutter-sizer: 2.43%;
.gutter-sizer {
width: $gutter-sizer
}
.grid-item {
float: left;
img {
display: block;
max-width: 100%;
width: 100%;
}
&--1 {
width: ((100% - $gutter-sizer) / 16) * 1;
}
&--2 {
width: (100% / 16) * 2;
}
&--3 {
width: (100% / 16) * 3;
}
&--4 {
width: (100% / 16) * 4;
}
&--5 {
width: (100% / 16) * 5;
}
&--6 {
width: (100% / 16) * 6;
}
&--7 {
width: (100% / 16) * 7;
}
&--8 {
width: (100% / 16) * 8;
}
&--9 {
width: (100% / 16) * 9;
}
&--10 {
width: (100% / 16) * 10;
}
&--11 {
width: (100% / 16) * 11;
}
&--12 {
width: (100% / 16) * 12;
}
&--13 {
width: (100% / 16) * 13;
}
&--14 {
width: (100% / 16) * 14;
}
&--15 {
width: (100% / 16) * 15;
}
&--16 {
width: (100% / 16) * 16;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment