Skip to content

Instantly share code, notes, and snippets.

@rpkoller

rpkoller/index.html

Last active January 3, 2016 00:39
Show Gist options
  • Save rpkoller/8384145 to your computer and use it in GitHub Desktop.
Save rpkoller/8384145 to your computer and use it in GitHub Desktop.
Download ZIP
An image gallery test case with SingularityGS
Raw
index.html
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Image grid test</title> <!-- 70chars max -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container">
<ul class="imggrid">
<li><img src="https://dl.dropboxusercontent.com/u/8578/imagegal.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/8578/imagegal.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/8578/imagegal.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/8578/imagegal.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/8578/imagegal.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/8578/imagegal.jpg"></li>
</ul>
<p>image: www.freeimages.co.uk</p>
</div>
</body>
</html>
Raw
style.scss
@import 'compass';
@import 'toolkit';
@import 'breakpoint';
@import 'singularitygs';
$grids: 6;
$gutters:0.25;
$output: 'float';
body,
html {
height:100%;
padding:0;
margin:0;
}
.container {
@include background-grid;
width:100%;
max-width:920px;
margin: 0 auto;
@extend %clearfix;
}
ul{
margin:0;
padding:0;
}
.imggrid li {
list-style:none;
margin:0;
padding:0;
@include breakpoint(500px 794px) {
@include float-span(3);
&:nth-child(2n) {
@include float-span(3, last);
}
}
@include breakpoint(750px) {
@include float-span(2);
&:nth-child(3n) {
@include float-span(2, last);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment