Skip to content

Instantly share code, notes, and snippets.

View jensgro's full-sized avatar

Jens Grochtdreis jensgro

79 followers · 55 following
View GitHub Profile
@jensgro
jensgro / SassMeister-input.scss
Created June 20, 2013 17:42
Generated by SassMeister.com, the Sass playground.
// ---
// Sass (v3.2.9)
// ---
// extending these rules does only work, if the media expression is both times the same!
@media screen, projection {
.ym-grid {
/* somewhere else, in another partial */
}
@jensgro
jensgro / dalek_flocke.js
Created August 7, 2013 09:47 — forked from asciidisco/dalek_flocke.js
module.exports = {
'A lot of screenshots': function (test) {
var resolutions = [{width: 1280, height: 1024}, {width: 1024, height: 768}, {width: 800, height: 600}];
var pages = ['http://facebook.com', 'http://twitter.com', 'http://dalekjs.com'];
resolutions.forEach(function (res) {
pages.forEach(function (page) {
test.open(page)
.resize(res)
@jensgro
jensgro / _ico-fonts_haml_sass.md
Created August 14, 2013 15:25 — forked from blackfalcon/_ico-fonts_haml_sass.md
Icon fonts, HAML and Sass

by Dale Sande

Icon-fonts. They are pretty awesome, but much like managing Sprite files, there are issues that make them a real pain to manage. Sure there are full libraries out there that you can grab wholesale and rely on their documentation, but for optimization and performance reasons you do not want to load up a series of libraries just to use a few icons. Leveraging the power of HAML and Sass we can make this less painful and at the same time maintain a living style guide. Basically, winning all over the place.

[IcoMoon][IcoMoon] is a fantastic resource that allows users to select specific icons from various libraries, as well as upload custom SVG art and download a customized font library. In the download package there is an HTML document that illustrates the library you just created, but for most professional applications this isn't going to work. Mainly because you will probably not use IcoMoon's code verbatim. Customizing the HTML and CSS per your use is ve

@jensgro
jensgro / SassMeister-output.css
Created September 6, 2013 06:02 — forked from illepic/SassMeister-output.css
/**
* @each basically lets us iterate over lists. What's a list?
* Check it:
*
* Lists in SASS appear in two main formats, separated
* by commas or spaces:
*
* 1. The sequence of values found in compound properties
* like border or background. For example: "1px solid black"
* is actually a list to SASS that can be looped over.
@jensgro
jensgro / dabblet.css
Created October 28, 2013 17:53 — forked from LeaVerou/dabblet.css
Slanted tabs with CSS 3D transforms
/**
* Slanted tabs with CSS 3D transforms
* See http://lea.verou.me/2013/10/slanted-tabs-with-css-3d-transforms/
*/
body { padding: 50px; }
nav {
position: relative;
z-index: 1;
@jensgro
jensgro / SassMeister-input.scss
Created October 31, 2013 16:49
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
@mixin box-s($x: 1px, $y: 1px, $offset: 5px, $color: #666, $inset: false) {
$ie-color: ie-hex-str($color);
@if $isoldIE {
@jensgro
jensgro / valid-document.html
Last active December 27, 2015 09:28
This is a valid document without any semantic value. Validity says nearly nothing about the real semantic quality of a document.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Dieses Dokument ist valide! - This document is valid!</title>
</head>
<body>
<table>
<tr>
<td colspan="3">HEADER</td>
@jensgro
jensgro / dabblet.css
Last active December 28, 2015 00:19 — forked from SirPepe/dabblet.css
Unter-Überschriften mit Flexbox in Dachzeilen verwandeln
/**
* Unter-Überschriften mit Flexbox in Dachzeilen verwandeln
*/
header {
display: flex;
flex-direction:column-reverse;
}
@jensgro
jensgro / SassMeister-input-HTML.html
Created November 25, 2013 14:19
Generated by SassMeister.com.
<div class="ym-grid">
<div class="ym-grid-11 ym-gl">.ym-grid-11</div>
<div class="ym-grid-1 ym-gr">.ym-grid-1</div>
</div>
<div class="ym-grid">
<div class="ym-grid-10 ym-gl">.ym-grid-10</div>
<div class="ym-grid-2 ym-gr">.ym-grid-2</div>
</div>
<div class="ym-grid">
<div class="ym-grid-9 ym-gl">.ym-grid-9</div>
@jensgro
jensgro / SassMeister-input-HTML.html
Created November 25, 2013 15:18
Generated by SassMeister.com.
<div class="ym-grid">
<div class="ym-grid-1 ym-gl">ym-grid-1</div>
<div class="ym-grid-1 ym-gl">ym-grid-1</div>
<div class="ym-grid-1 ym-gl">ym-grid-1</div>
<div class="ym-grid-1 ym-gl">ym-grid-1</div>
<div class="ym-grid-1 ym-gl">ym-grid-1</div>
<div class="ym-grid-1 ym-gr">ym-grid-1</div>
</div>
<div class="ym-grid">
<div class="ym-grid-2 ym-gl">ym-grid-2</div>