Skip to content

Instantly share code, notes, and snippets.

@rpkoller
rpkoller / gist:7900290
Last active December 30, 2015 23:19
Code snippet to illustrate gaps upfront the two container definitions
<div class="mainwrap">
<header class="container">Header</header>
<div class="container">Main Content</div>
</div>
<div class="footwrap">
<footer class="container">Test</footer>
</div>
@rpkoller
rpkoller / gist:7992795
Last active December 31, 2015 13:29
Two modular scales applied to the Compass Vertical Rhythm module
@import 'compass';
@import 'modular-scale';
@import 'toolkit';
@import 'breakpoint';
//mixin taken from the following pull request https://github.com/chriseppstein/compass/pull/1352
@mixin use-baseline($new-base-size, $new-line-height) {
// Save the baseline context
$initial-font-size: $base-font-size;
$initial-line-height: $base-line-height;
<div class="mainwrap">
<header class="container">
<div class="logo"></div>
<nav></nav>
<div class="illu"></div>
</header>
<div class="container">
</div>
</div>
<div class="footwrap">
<header>
<div class="container">
<div class="logo">Logo</div>
<div class="user">User</div>
</div>
</header>
@rpkoller
rpkoller / index.html
Last active January 2, 2016 09:19
Vertical Rhythm example
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Test</title> <!-- 70chars max -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
@rpkoller
rpkoller / index.html
Last active January 3, 2016 00:39
An image gallery test case with SingularityGS
<!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>
@rpkoller
rpkoller / index.html
Last active January 3, 2016 04:19
Clearing issue
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>test</title> <!-- 70chars max -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
@rpkoller
rpkoller / index.html
Last active January 4, 2016 18:59
nav test
<header class="container">
<h1><a href="http://www.kicker.de" title="suk" class="logo">suk</a></h1>
<nav class="bran-mn">
<ul>
<li>Neues</li>
<li>Über Uns</li>
<li>Lösungen</li>
<li>Arbeiten</li>
<li>Kontakt</li>
</ul>
<h3 class="sol-head">Communication</h3>
<p class="sol-desc">Some days you get the bear, and some days the bear gets you. Your head is not an artifact! But the probability of making a six is no greater than that of rolling a seven. Commander William Riker of the Starship Enterprise. You enjoyed that. Wait a minute - you've been declared dead. You can't give orders around here. Fate protects fools, little children and ships named Enterprise. Your shields were failing, sir. I guess it's better to be lucky than good. And blowing into maximum warp speed, you appeared for an instant to be in two places at once. They were just sucked into space. I will obey your orders. I will serve this ship as First Officer. And in an attack against the Enterprise, I will die with this crew. But I will not break my oath of loyalty to Starfleet.</p>
<aside class="sol-box">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</aside>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Test</title> <!-- 70chars max -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>