vasilisvg/dabblet.css

## dabblet.css
/**
 * Transities in een formulier, de oplossing
 */

/* Animatie */
body {
	font: 120%/1.5 helvetica;
	margin: 2em;
	color: #666;
}

/* Formulier layout */
fieldset {
	border-radius: .3em;
	border: 1px solid #666;
	background: white;
}
legend {
	padding: 0 .4em;
}
fieldset > div {
	margin: 0 0 1em;
}
label + input {
	display: block;
}

/* Inputs */

input {
	box-sizing: border-box;
	font: inherit;
	width: 100%;
	max-width: 20em;
}
input:invalid {
	box-shadow: 0 0 0em .1em hsl(0, 80%, 50%);
}
/* Waar moet je op letten bij :valid? */
input:focus {
	box-shadow: 0 0 0 1px hsla(10, 50%, 30%, 1),
	0 0 .3em .3em hsla(210, 50%, 30%, .6);
}
[for="twitter"]:before {
	content: '@';
	position: absolute;
	margin-top: 1.5em;
}

/* Uitleg-divs */

/* allereerst willen we alle divs die direct na een input staan
- transparant maken
- een maximale hoogte van 0 geven
Zo zijn ze standaadr onzichtbaar, maar goed te animeren
 */
input ~ div,
input:invalid:focus + div {
	opacity: 0; /* 0 */
	max-height: 0; /* 0 */
	transition: .3s; /* .3s misschien? */
	border: 1px solid hsl(90, 50%, 50%); /* Vriendelijk groen, bijvoorbeeld 1px solid hsl(90, 50%, 50%) */
	background: hsla(90, 50%, 50%, .3); /* vriendelijk lichtgroen, bijvoorbeeld hsla(90, 50%, 50%, .3) */
	box-sizing: border-box;
	max-width: 20em;
	padding: 0 .3em;
}

/* De div die direct na de input staat legt uit wat je moet doen
Die willen we dis zichtbaar maken zodra je focust op het veld
Hoe ziet die selector er uit?
 */
input:focus + div,
input:invalid + div + div {
	max-height: 5em; /* bijvoorbeeld 5em */
	opacity: 1; /* 1 */
	transition: .3s .3s; /* .3s .3s (na een vertraging van .3s) */
	margin: .5em 0;
}
input:invalid + div + div {
	margin: .5em 0 1.5em;
}

/*
Als de input :invalid is, dan willen we de tweede div tonen
De div na de eerste div
Hoe ziet die selector er uit?
 */
input + div + div {
	border: 1px solid hsl(0, 80%, 50%); /* Rood, bijvoorbeeld hsl(0, 80%, 50%) */
	background: hsla(0, 50%, 80%, .3); /* roze, bijvoorbeeld hsla(0, 50%, 80%, .3) */
}
input#twitter {
	padding-left: .75em
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->

<form>
<fieldset>

<legend>Geef ons al je data</legend>

<div>
	<label for="name">Naam</label>
	<input type="text" id="name" pattern=".+">
	<div class="uitleg">Je weet wel, zoals je heet, in het echt</div>
	<div class="fout">Dit moeten we echt weten. Je weet wel, vanwege marketing</div>
</div>
<div>
	<label for="email">E-mail</label>
	<input type="email" id="email">
	<div class="uitleg">Je weet wel, zo'n ding met een apestaartje</div>
	<div class="fout">Dit is geen emailadres, zo kunnen we je niet spammen</div>
</div>
<div>
	<label for="tel">Telefoonnummer</label>
	<input type="tel" id="tel">
	<div class="uitleg">Wij, en onze vrienden, willen je heel graag sms'jes sturen*</div>
	<div class="fout">Dit is geen telefoonnummer, zo kunnen we je niet spammen</div>
</div>
<div>
	<label for="postcode">Postcode</label>
	<input type="text" id="postcode" pattern="[1-9][0-9]{3}\s?[a-zA-Z]{2}">
	<div class="uitleg">Wij, en onze vrienden, willen je heel graag papieren dingen sturen*</div>
	<div class="fout">Dit is geen postcode, zo kunnen we je niet spammen</div>
</div>
<div>
	<label for="twitter">Twitternaam</label>
	<input type="text" id="twitter" pattern="^[A-Za-z0-9_]{1,32}$">
	<div class="uitleg">Je weet wel, zoals je heet op Twitter, zodat we je ook daar leuke aanbiedingen kunnen sturen</div>
	<div class="fout">Dit is geen twitternaam, zo kunnen we je niet spammen</div>
</div>
<div>
	<label for="credit">Creditcard</label>
	<input type="text" id="credit" pattern="[0-9]{13,16}">
	<div class="uitleg">Dit hebben we nodig zodat we je nóg beter van dienst kunnen zijn.</div>
	<div class="fout">Dit is geen creditcardnummer, zo kunnen we je niet goed genoeg van dienst zijn</div>
</div>
</fieldset>
</form>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* Transities in een formulier, de oplossing
	*/

	/* Animatie */
	body {
	font: 120%/1.5 helvetica;
	margin: 2em;
	color: #666;
	}

	/* Formulier layout */
	fieldset {
	border-radius: .3em;
	border: 1px solid #666;
	background: white;
	}
	legend {
	padding: 0 .4em;
	}
	fieldset > div {
	margin: 0 0 1em;
	}
	label + input {
	display: block;
	}

	/* Inputs */

	input {
	box-sizing: border-box;
	font: inherit;
	width: 100%;
	max-width: 20em;
	}
	input:invalid {
	box-shadow: 0 0 0em .1em hsl(0, 80%, 50%);
	}
	/* Waar moet je op letten bij :valid? */
	input:focus {
	box-shadow: 0 0 0 1px hsla(10, 50%, 30%, 1),
	0 0 .3em .3em hsla(210, 50%, 30%, .6);
	}
	[for="twitter"]:before {
	content: '@';
	position: absolute;
	margin-top: 1.5em;
	}

	/* Uitleg-divs */

	/* allereerst willen we alle divs die direct na een input staan
	- transparant maken
	- een maximale hoogte van 0 geven
	Zo zijn ze standaadr onzichtbaar, maar goed te animeren
	*/
	input ~ div,
	input:invalid:focus + div {
	opacity: 0; /* 0 */
	max-height: 0; /* 0 */
	transition: .3s; /* .3s misschien? */
	border: 1px solid hsl(90, 50%, 50%); /* Vriendelijk groen, bijvoorbeeld 1px solid hsl(90, 50%, 50%) */
	background: hsla(90, 50%, 50%, .3); /* vriendelijk lichtgroen, bijvoorbeeld hsla(90, 50%, 50%, .3) */
	box-sizing: border-box;
	max-width: 20em;
	padding: 0 .3em;
	}

	/* De div die direct na de input staat legt uit wat je moet doen
	Die willen we dis zichtbaar maken zodra je focust op het veld
	Hoe ziet die selector er uit?
	*/
	input:focus + div,
	input:invalid + div + div {
	max-height: 5em; /* bijvoorbeeld 5em */
	opacity: 1; /* 1 */
	transition: .3s .3s; /* .3s .3s (na een vertraging van .3s) */
	margin: .5em 0;
	}
	input:invalid + div + div {
	margin: .5em 0 1.5em;
	}

	/*
	Als de input :invalid is, dan willen we de tweede div tonen
	De div na de eerste div
	Hoe ziet die selector er uit?
	*/
	input + div + div {
	border: 1px solid hsl(0, 80%, 50%); /* Rood, bijvoorbeeld hsl(0, 80%, 50%) */
	background: hsla(0, 50%, 80%, .3); /* roze, bijvoorbeeld hsla(0, 50%, 80%, .3) */
	}
	input#twitter {
	padding-left: .75em
	}
	<!-- content to be placed inside <body>…</body> -->

	<form>
	<fieldset>

	<legend>Geef ons al je data</legend>

	<div>
	<label for="name">Naam</label>
	<input type="text" id="name" pattern=".+">
	<div class="uitleg">Je weet wel, zoals je heet, in het echt</div>
	<div class="fout">Dit moeten we echt weten. Je weet wel, vanwege marketing</div>
	</div>
	<div>
	<label for="email">E-mail</label>
	<input type="email" id="email">
	<div class="uitleg">Je weet wel, zo'n ding met een apestaartje</div>
	<div class="fout">Dit is geen emailadres, zo kunnen we je niet spammen</div>
	</div>
	<div>
	<label for="tel">Telefoonnummer</label>
	<input type="tel" id="tel">
	<div class="uitleg">Wij, en onze vrienden, willen je heel graag sms'jes sturen*</div>
	<div class="fout">Dit is geen telefoonnummer, zo kunnen we je niet spammen</div>
	</div>
	<div>
	<label for="postcode">Postcode</label>
	<input type="text" id="postcode" pattern="[1-9][0-9]{3}\s?[a-zA-Z]{2}">
	<div class="uitleg">Wij, en onze vrienden, willen je heel graag papieren dingen sturen*</div>
	<div class="fout">Dit is geen postcode, zo kunnen we je niet spammen</div>
	</div>
	<div>
	<label for="twitter">Twitternaam</label>
	<input type="text" id="twitter" pattern="^[A-Za-z0-9_]{1,32}$">
	<div class="uitleg">Je weet wel, zoals je heet op Twitter, zodat we je ook daar leuke aanbiedingen kunnen sturen</div>
	<div class="fout">Dit is geen twitternaam, zo kunnen we je niet spammen</div>
	</div>
	<div>
	<label for="credit">Creditcard</label>
	<input type="text" id="credit" pattern="[0-9]{13,16}">
	<div class="uitleg">Dit hebben we nodig zodat we je nóg beter van dienst kunnen zijn.</div>
	<div class="fout">Dit is geen creditcardnummer, zo kunnen we je niet goed genoeg van dienst zijn</div>
	</div>
	</fieldset>
	</form>