Jens Grochtdreis jensgro

jensgro / _helper.scss

Created January 1, 2013 14:01 — forked from yatil/_helper.scss

	@mixin respond-to($media) {
	@if $media == small {
	@media only screen and (max-width: 699px) { @content; }
	}
	@else if $media == medium {
	@if $oldIE {
	@content;
	} @else {
	@media only screen and (min-width: 600px) { @content; }
	}

jensgro / dabblet.html

Created January 9, 2013 13:29

Untitled

	<!-- content to be placed inside <body>…</body> -->


	<div class="bubble" data-kind="pointer"></div>
	<div class="bubble" data-kind="resize-x"></div>

jensgro / high-dpi-media.css

Created January 11, 2013 17:34 — forked from marcedwards/high-dpi-media.css

	/* ---------------------------------------------------------- */
	/* */
	/* A media query that captures: */
	/* */
	/* - Retina iOS devices */
	/* - Retina Macs running Safari */
	/* - High DPI Windows PCs running IE 8 and above */
	/* - Low DPI Windows PCs with IE zoomed in */
	/* - Android hdpi devices and above */
	/* - Android tvdpi devices, including Google Nexus 7 */

jensgro / _contrast.scss

Created January 11, 2013 17:59 — forked from haschek/_contrast.scss

	// == SCSS Color Methods for Accessibility ================================

	// Adjust given colors to ensure that those color combination provide
	// sufficient contrast

	// Methods using calculations from:
	// * "Techniques For Accessibility Evaluation And Repair Tools (AERT)"
	// working draft @see http://www.w3.org/TR/AERT#color-contrast

	// TODO: add methods with WCAG2 formulas

jensgro / clearfix.css

Created January 17, 2013 17:15 — forked from mrinalwadhwa/clearfix.css

	/* based on http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/ */

	.cf:before,
	.cf:after {
	content: ".";
	display: block;
	height: 0;
	overflow: hidden;
	}
	.cf:after {clear: both;}

jensgro / _mixin-folded.scss

Last active December 11, 2015 22:48

Folded corners with CSS (with a transparency)

	// if you are not using compass, you will ned this
	@mixin box-sizing($box-type){
	-webkit-border-box: $box-type;
	-moz-border-box: $box-type;
	border-box: $box-type;
	}

	// the main part
	// tl == top-left \| tr == top-right \| br == bottom-right \| bl == bottom-left
	@mixin folded-corner($position, $dimension, $cornercol, $bgcol) {

jensgro / dabblet.html

Created February 11, 2013 14:53 — forked from chriscoyier/dabblet.css

Untitled

	<label for="toggle-1">I'm a toggle</label>
	<input type="checkbox" id="toggle-1">
	<div>I'm controlled by toggle. No JavaScript!</div>

jensgro / dabblet.html

Created February 13, 2013 08:53

Untitled

	<!-- content to be placed inside <body>…</body> -->
	<div class='wrap'>
	<img class='panel' src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-30-a-web.jpg'>
	<div class='N panel'></div>
	<div class='E panel'></div>
	<div class='S panel'></div>
	<div class='W panel'></div>
	</div>

jensgro / dabblet.html

Created February 13, 2013 08:54

Untitled

	<!-- content to be placed inside <body>…</body> -->
	<div class='wrap'>
	<img class='panel' src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-30-a-web.jpg'>
	<div class='N panel'></div>
	<div class='E panel'></div>
	<div class='S panel'></div>
	<div class='W panel'></div>
	</div>

jensgro / all-rgba.scss

Last active December 14, 2015 07:18

Converts a solid color with an alpha-channel-value into rgba and an IE-filter as fallback for oldIE (IE up to version 8).

	// Converts a solid color with an alpha-channel-value into rgba
	// and an IE-filter as fallback for oldIE (IE up to version 8)
	@mixin all-rgba($color, $alpha) {
	$rgba: rgba($color, $alpha);
	$ie-color: ie-hex-str($rgba);
	background-color: $color;
	background-color: $rgba;
	/* for oldIE */
	*background-color: transparent;
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#{$ie-color}', EndColorStr='#{$ie-color}');