Jens Grochtdreis jensgro

jensgro / af-toggle.js

Created March 11, 2010 23:30

Klappfunktion mit jQuery und WAI-ARIA accessible machen.

	/*
	* Klappfunktion mit jQuery accessible machen mit WAI-ARIA. Skript von Alexander Farkas.
	* Original: http://gist.github.com/329709
	* Fork: http://gist.github.com/329832
	* Ausgangsartikel mit Diskussion dazu:
	http://grochtdreis.de/weblog/2010/03/11/anreicherung-meiner-webseite-mit-wai-aria/
	*/
	(function($){

	/* a11y-helper */

jensgro / html5forms.html

Created April 28, 2010 13:25

HTML5-Formularelemente

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>HTML5 Form Elements</title>
	<style>
	body { padding:1em; }
	</style>
	</head>
	<body>

jensgro / deaktivierte_eingabefelder.css

Created November 11, 2010 10:42

Eingabefelder können deaktivert sein. Anbei der passende Style, der auf eine Klasse baut, damit es auch der IE6 kapiert.

	/* deaktivierte Eingabefelder */
	.deact input.input-text {
	border: none;
	color: #666;
	}

jensgro / clearfix.css

Created November 15, 2010 14:05

Dank des Clearfixes umfassen Container floatende Kindelemente. Alternative ist overflow: hidden, die aber nicht immer gut funktioniert.

	/**
	* @section Clearing Methoden
	* @see http://www.yaml.de/de/dokumentation/grundlagen/allgemeines.html
	*/

	.clearfix:after {
	clear:both;
	content:".";
	display:block;
	font-size:0;

jensgro / hideme.css

Created November 15, 2010 15:04

hide elements in stead of using "display: none" which hides content even for screenreaders.

	.hide {
	position:absolute;
	top:-32768px;
	left:-32768px;
	}
	/* if the page has "direction:rtl;" then "right" should be negative. */

jensgro / ie-classes.html

Created November 17, 2010 06:23

Create a special class for body depending on which IE or if no IE reads the page. Helps for avoiding hacks. Uses conditional comments.

jensgro / ie-html5-fix.js

Created June 16, 2011 21:27

HTML5-Elemente für IE bis Version 8 "anmelden"

	<script>
	//http://www.hagenburger.net/BLOG/Simple-HTML5-Fix-for-IE.html
	for(var e,l='article aside footer header nav section time'.split(' ');e=l.pop();document.createElement(e))
	</script>

jensgro / mediaqueries.css

Created September 2, 2011 15:56

Beispiele für Media-Queries

	/* normal screen layout */
	@media screen and (min-width: 760px) {}

	/* smaller devices */
	@media screen and (min-width: 481px) and (max-width: 759px) {}

	/* mobile */
	@media screen and (max-width: 480px) {}

jensgro / calc.css

Created September 8, 2011 10:01

Rechnen in CSS soll mittels calc() möglich sein.

	/* Die Box würde so breiter als 100% werden. */
	#main {
	width: 100%;
	padding: 20px;
	}

	/* Ein weiteres DIV - #main_inner - übernimmt die Abstände. */
	#main {
	width: 100%;
	}

jensgro / styles.css

Created November 13, 2011 14:03

Media Queries für ein externes CSS

	/* Am Anfang steht CSS für alle */
	body { /* allgemeine Regeln */}

	@media only screen and (min-width: 480px) {
	/* mobile Browser */
	}

	@media only screen and (min-width: 768px) {
	/* Tablets im Portrait Modus */
	}