vasilisvg/dabblet.css

## dabblet.css
/**
 * Meer bling met CSS
 */
* {
	box-sizing: border-box;
}
html {
	background: grey;
	min-height: 100%;
	font-family: georgia, serif;
	font-size: 100%;
	line-height: 1.414;
}
body {
	margin: 0 0 0 14%;
	padding: 2em;
	background: white; /* of bijvoorbeeld rgba(255, 255, 255, .5) */
	border-left: 1px solid black;
	box-shadow: ; /* Bijvoorbeeld: -1em 1em 10em .1em green */
}
h1, h2, h3, h4, p, ul, ol, figcaption, img {
	max-width: 30em; /* hier kan je een maximale, ideale regelbreedte aangeven */
	margin: 1em 0; /* boven én onder 1em, links én rechts 0 */
	font-weight: normal;
}

/* Headings */
h1 {
	font-size: 2.827em;
	margin-top: 0;
	line-height: 1.1;
	/* Ga naar http://mothereffingtextshadow.com/, tweak de sliders, kopieer de code en plak het hier terug  */
}
h2 {
	font-size: 1.999em;
	line-height: 1.2;
}
h3 {
	font-size: 1.414em;
	line-height: 1.3;
}
h4 {
	font-size: 1em;
	font-style: italic;
}

/* Paragrafen */
p {
	text-align: left;
	hyphens: auto;
}
p + p {
	text-indent: 1.999em;
	margin: -1em 0 1em;
}
/* De eerste letter van de allereerste paragraaf! */
div > p:first-of-type:first-letter {
	font-size: 3em;
	margin: .1em .2em 0 0;
	float: left;
	line-height: .8;
	/* Borders, backgrounds, kleuren, ga los! */
	border: ; /* bijvoorbeeld: 1px dashed green */
	padding: ; /* Misschien wat padding? */
	box-shadow: ; /* Bijvoorbeeld: inset .1em .1em .1em silver */
}
div > p:nth-of-type(2):first-line {
	font-variant: small-caps;
	text-transform: lowercase;
}

h1 + p {
	font-size: 1.414em;
	margin: -1.414em 0 1em;
}
h2 + p,
h3 + p {
	margin: -1.414em 0 1em;
}


/* Lists */
ul {
	margin: 1em 0;
	padding: 0;
	background: grey;
	color: white;
	border-radius: ; /* bijvoorbeeld: 10%/50% */
	box-shadow: ; /* bijvoorbeeld: 0 0 .3em .5em grey */
	/* Extra box-shadows zet je achter een komma. Bijvoorbeeld:
	0 0 .3em .5em grey, inset 0 0 .3em .5em grey;
	of:
	.5em .5em 0 .1em hotpink, 1em 1em 0em .1em green
	 */

}
ul li {
	list-style: square; /* none, disc, square, etc. */
	margin: 0 0 0 1.999em;
}
ol {
	margin: 1em 0;
	padding: 0;
	/* Ga eens naar http://www.css3factory.com/linear-gradients/ en maak een mooie gradient */
}
h2 + ol {
	margin: -1.414em 0 1em
}
ol li {
	border-bottom: 1px solid black;
	margin: 0 0 0 1.999em;
}
ol li:last-child {
	border-bottom: 0;
}


/* Blockquotes zijn tof */
blockquote {
	margin: 1em 0 1em 1.99em;
	padding: ;
	background: ;
	transform: rotate(-1deg);
	transition: .8s;
	/* Ga los! */
}
blockquote:hover {
	transform: scale(1.1);
}
blockquote cite {
	margin-top: -1em;
	display: block;
}
/* Je kan quotes voor en achter de content van een quote zetten */
blockquote p:first-of-type::before {
	content: '"'; /* Probeer hier maar eens iets anders van te maken */
}
blockquote p:last-of-type::after {
	content: '"'; /* Probeer hier maar eens echte quotes van te maken */
}
blockquote cite::before {
	content: '— '; /* Je kan hier ook een zin van maken */
}

/* Figure */
figure {
	margin: 1.999em 0 1.999em 1.999em;
	padding: 0;
}
figure img {
	display: block;
	max-width: 30em;
	margin: 0;
	border: 1px solid black
}
figure figcaption {
	background: black;
	color: white;
	padding: 1em;
	margin: 0;
}
figure img[src$=".jpg"] + figcaption {
	background: white;
	color: black;
	border: 1px solid black;
	border-top: 0;
}

figure blockquote {
	font-size: 1.414em;
	margin: 0;
}

body {
	transition: transform 2s ease-in-out;
	transition: -webkit-transform 2s 5s ease-in-out;
}

@media screen and (orientation: portrait) {
	body {
		transform: rotate(180deg);
	}
}


@media screen and (orientation: landscape) {
	body {
		transform: rotate(45deg);
	}
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div lang="nl">
<h1>Tekst vormgeven doe je met lange titels vanwege de line-height</h1>
<p>Dit is een eerste paragraaf. Misschien willen we deze iets groter maken. De eerste paragraaf is nu eenmaal vaak de inleiding. Je kan daar afspraken over maken met de contentmensen. Als het inderdaad altijd een inleiding is dan kan je dat visueel maken. Vormgeven. Laten zien. Je kan ook de eerste letter, en de eerste regel anders vormgeven!</p>
<h2>Dit is een heading 2. Die mag natuurlijk best breed zijn. Hij heeft ook een grote letter</h2>
<p>Dit is een paragraaf. De eerste <em>gewone</em> paragraaf in de tekst. Hoe style je een paragraaf? De tekst-grootte en het font worden over het algemeen bepaald in de <code>&lt;body></code> en worden dus doorgegeven aan de paragraaf — of eigenlijk, aan alles waar niet expliciet iets anders op wordt gedefiniëerd. Wat we natuurlijk wél op de <code>&lt;p></code> zelf definiëreren zijn eigenschappen als margin en padding. </p>
<p>Dit is ook een paragraaf. Maar dit is een paragraaf na een paragraaf. <a href="http://webtypography.net/">Dat kunnen we ook vormgeven</a>. In sommige gevallen is het bijvoorbeeld mooi om geen witregel te tonen tussen twee paragrafen, maar om de eerste regel in te laten springen. Op dezelfde manier kan je ook bepalen hoe een paragraaf direct na een <code>&lt;h2></code> er uitziet. Eigenlijk kan je elke combinatie van twee elementen op deze manier vormgeven. Wat kan resulteren in een secure, gedetailleerde en prettige vormgeving.</p>
<ul>
<li>Een ongeordende lijst</li>
<li>Hier kan je ook goed op losgaan</li>
<li>Wel eens van <em>hanging punctuation</em> gehoord?</li>
<li>Gezien dat hij na een paragraaf staat?</li>
</ul>

<h2>Een ordered list</h2>
<ol>
  <li>Het eerste item. </li>
  <li>Het tweede item. </li>
  <li>Het derde item. </li>
  <li>Het vierde item. </li>
  <li>Het vijfde item is een lang item zodat het er iets realistische uitziet. Items zijn nooit even lang en soms veel langer dan je zou willen. </li>
  <li>Het zesde item legt uit dat je altijd échte content moet gebruiken. </li>
  <li>Het zevende item legt uit dat echte content vaak vervelend is. Maar wel echt. </li>
  <li>Het achtste item tot slot legt uit dat we content vormgeven. Geen content in ideale plaatjes stoppen. </li>
</ol>
<h3>Een heading level 3. Ook deze mag breder zijn vanwege font-size en ideal measure</h3>
<p>Een paragraaf na een heading 3. Er is echt een eindeloze hoeveelheid combinaties mogelijk. Heel makkelijk te testen en vorm te geven door even een unordere list direct na een heading te zetten. Of door een blockquote op verschillende plekken te zetten, bijvoorbeeld.</p>
<blockquote>
  <p>We zijn geen lijstenmakers die wissellijsten ontwerpen, we geven content vorm</p>
  <cite>Vasilis van Gemert</cite>
</blockquote>
<h2>Een figure</h2>
<p>Soms wil je illustraties tonen in je content. Die kan je in een figure stoppen (dat is niet altijd nodig, maar het kan). Een figure heeft plek voor een caption, en je kan er andere dingen in stoppen, zoals plaatjes of grafieken. Maar ook quotes, als je die meer als illustratie dienen. Je kan ze op een bijzondere wijze stylen.</p>

<figure>
  <img src="http://ndoe.nl/screen/screenshot-1397114444.png" alt="">
  <figcaption>An image that illustrates that you shouldn't use pixels as a unit</figcaption>
</figure>

<p>Soms is het logisch om de caption verschillend te stylen, afhankelijk van het type plaatje. Een PNG is voor graphics, een JPG is voor foto's.<p>

<figure>
  <img src="http://vasilis.nl/voto/fotos/klein/140318180152-boeken-800.jpg" alt="">
  <figcaption>A picture of the library in the Rijksmuseum</figcaption>
</figure>

<p>Maar er hoeven dus geen plaatjes in een figure. Je kan er bijvoorbeeld ook een quote in stoppen die bedoeld is om de aandacht te trekken, en die niet specifiek een integraal onderdeel is van de content</p>

<figure>
  <blockquote>
    <p>We zijn geen lijstenmakers die wissellijsten ontwerpen, we geven content vorm</p>
    <cite>Vasilis van Gemert</cite>
  </blockquote>
</figure>

<p>Door betekenis te geven aan stukken content, door goed te kijken wat ze nu eigenlijk zijn, en door de juiste elementen hierbij te gebruiken kan je redelijk eenvoudig een zeer krachtige (typografische) vormgeving maken voor de belangrijkste content op een site. De content waar mensen écht voor komen. De content die er dus het meeste toe doet.

</div>

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

## settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* Meer bling met CSS
	*/
	* {
	box-sizing: border-box;
	}
	html {
	background: grey;
	min-height: 100%;
	font-family: georgia, serif;
	font-size: 100%;
	line-height: 1.414;
	}
	body {
	margin: 0 0 0 14%;
	padding: 2em;
	background: white; /* of bijvoorbeeld rgba(255, 255, 255, .5) */
	border-left: 1px solid black;
	box-shadow: ; /* Bijvoorbeeld: -1em 1em 10em .1em green */
	}
	h1, h2, h3, h4, p, ul, ol, figcaption, img {
	max-width: 30em; /* hier kan je een maximale, ideale regelbreedte aangeven */
	margin: 1em 0; /* boven én onder 1em, links én rechts 0 */
	font-weight: normal;
	}

	/* Headings */
	h1 {
	font-size: 2.827em;
	margin-top: 0;
	line-height: 1.1;
	/* Ga naar http://mothereffingtextshadow.com/, tweak de sliders, kopieer de code en plak het hier terug */
	}
	h2 {
	font-size: 1.999em;
	line-height: 1.2;
	}
	h3 {
	font-size: 1.414em;
	line-height: 1.3;
	}
	h4 {
	font-size: 1em;
	font-style: italic;
	}

	/* Paragrafen */
	p {
	text-align: left;
	hyphens: auto;
	}
	p + p {
	text-indent: 1.999em;
	margin: -1em 0 1em;
	}
	/* De eerste letter van de allereerste paragraaf! */
	div > p:first-of-type:first-letter {
	font-size: 3em;
	margin: .1em .2em 0 0;
	float: left;
	line-height: .8;
	/* Borders, backgrounds, kleuren, ga los! */
	border: ; /* bijvoorbeeld: 1px dashed green */
	padding: ; /* Misschien wat padding? */
	box-shadow: ; /* Bijvoorbeeld: inset .1em .1em .1em silver */
	}
	div > p:nth-of-type(2):first-line {
	font-variant: small-caps;
	text-transform: lowercase;
	}

	h1 + p {
	font-size: 1.414em;
	margin: -1.414em 0 1em;
	}
	h2 + p,
	h3 + p {
	margin: -1.414em 0 1em;
	}


	/* Lists */
	ul {
	margin: 1em 0;
	padding: 0;
	background: grey;
	color: white;
	border-radius: ; /* bijvoorbeeld: 10%/50% */
	box-shadow: ; /* bijvoorbeeld: 0 0 .3em .5em grey */
	/* Extra box-shadows zet je achter een komma. Bijvoorbeeld:
	0 0 .3em .5em grey, inset 0 0 .3em .5em grey;
	of:
	.5em .5em 0 .1em hotpink, 1em 1em 0em .1em green
	*/

	}
	ul li {
	list-style: square; /* none, disc, square, etc. */
	margin: 0 0 0 1.999em;
	}
	ol {
	margin: 1em 0;
	padding: 0;
	/* Ga eens naar http://www.css3factory.com/linear-gradients/ en maak een mooie gradient */
	}
	h2 + ol {
	margin: -1.414em 0 1em
	}
	ol li {
	border-bottom: 1px solid black;
	margin: 0 0 0 1.999em;
	}
	ol li:last-child {
	border-bottom: 0;
	}


	/* Blockquotes zijn tof */
	blockquote {
	margin: 1em 0 1em 1.99em;
	padding: ;
	background: ;
	transform: rotate(-1deg);
	transition: .8s;
	/* Ga los! */
	}
	blockquote:hover {
	transform: scale(1.1);
	}
	blockquote cite {
	margin-top: -1em;
	display: block;
	}
	/* Je kan quotes voor en achter de content van een quote zetten */
	blockquote p:first-of-type::before {
	content: '"'; /* Probeer hier maar eens iets anders van te maken */
	}
	blockquote p:last-of-type::after {
	content: '"'; /* Probeer hier maar eens echte quotes van te maken */
	}
	blockquote cite::before {
	content: '— '; /* Je kan hier ook een zin van maken */
	}

	/* Figure */
	figure {
	margin: 1.999em 0 1.999em 1.999em;
	padding: 0;
	}
	figure img {
	display: block;
	max-width: 30em;
	margin: 0;
	border: 1px solid black
	}
	figure figcaption {
	background: black;
	color: white;
	padding: 1em;
	margin: 0;
	}
	figure img[src$=".jpg"] + figcaption {
	background: white;
	color: black;
	border: 1px solid black;
	border-top: 0;
	}

	figure blockquote {
	font-size: 1.414em;
	margin: 0;
	}

	body {
	transition: transform 2s ease-in-out;
	transition: -webkit-transform 2s 5s ease-in-out;
	}

	@media screen and (orientation: portrait) {
	body {
	transform: rotate(180deg);
	}
	}


	@media screen and (orientation: landscape) {
	body {
	transform: rotate(45deg);
	}
	}
	<!-- content to be placed inside <body>…</body> -->
	<div lang="nl">
	<h1>Tekst vormgeven doe je met lange titels vanwege de line-height</h1>
	<p>Dit is een eerste paragraaf. Misschien willen we deze iets groter maken. De eerste paragraaf is nu eenmaal vaak de inleiding. Je kan daar afspraken over maken met de contentmensen. Als het inderdaad altijd een inleiding is dan kan je dat visueel maken. Vormgeven. Laten zien. Je kan ook de eerste letter, en de eerste regel anders vormgeven!</p>
	<h2>Dit is een heading 2. Die mag natuurlijk best breed zijn. Hij heeft ook een grote letter</h2>
	<p>Dit is een paragraaf. De eerste <em>gewone</em> paragraaf in de tekst. Hoe style je een paragraaf? De tekst-grootte en het font worden over het algemeen bepaald in de <code><body></code> en worden dus doorgegeven aan de paragraaf — of eigenlijk, aan alles waar niet expliciet iets anders op wordt gedefiniëerd. Wat we natuurlijk wél op de <code><p></code> zelf definiëreren zijn eigenschappen als margin en padding. </p>
	<p>Dit is ook een paragraaf. Maar dit is een paragraaf na een paragraaf. <a href="http://webtypography.net/">Dat kunnen we ook vormgeven</a>. In sommige gevallen is het bijvoorbeeld mooi om geen witregel te tonen tussen twee paragrafen, maar om de eerste regel in te laten springen. Op dezelfde manier kan je ook bepalen hoe een paragraaf direct na een <code><h2></code> er uitziet. Eigenlijk kan je elke combinatie van twee elementen op deze manier vormgeven. Wat kan resulteren in een secure, gedetailleerde en prettige vormgeving.</p>
	<ul>
	<li>Een ongeordende lijst</li>
	<li>Hier kan je ook goed op losgaan</li>
	<li>Wel eens van <em>hanging punctuation</em> gehoord?</li>
	<li>Gezien dat hij na een paragraaf staat?</li>
	</ul>

	<h2>Een ordered list</h2>
	<ol>
	<li>Het eerste item. </li>
	<li>Het tweede item. </li>
	<li>Het derde item. </li>
	<li>Het vierde item. </li>
	<li>Het vijfde item is een lang item zodat het er iets realistische uitziet. Items zijn nooit even lang en soms veel langer dan je zou willen. </li>
	<li>Het zesde item legt uit dat je altijd échte content moet gebruiken. </li>
	<li>Het zevende item legt uit dat echte content vaak vervelend is. Maar wel echt. </li>
	<li>Het achtste item tot slot legt uit dat we content vormgeven. Geen content in ideale plaatjes stoppen. </li>
	</ol>
	<h3>Een heading level 3. Ook deze mag breder zijn vanwege font-size en ideal measure</h3>
	<p>Een paragraaf na een heading 3. Er is echt een eindeloze hoeveelheid combinaties mogelijk. Heel makkelijk te testen en vorm te geven door even een unordere list direct na een heading te zetten. Of door een blockquote op verschillende plekken te zetten, bijvoorbeeld.</p>
	<blockquote>
	<p>We zijn geen lijstenmakers die wissellijsten ontwerpen, we geven content vorm</p>
	<cite>Vasilis van Gemert</cite>
	</blockquote>
	<h2>Een figure</h2>
	<p>Soms wil je illustraties tonen in je content. Die kan je in een figure stoppen (dat is niet altijd nodig, maar het kan). Een figure heeft plek voor een caption, en je kan er andere dingen in stoppen, zoals plaatjes of grafieken. Maar ook quotes, als je die meer als illustratie dienen. Je kan ze op een bijzondere wijze stylen.</p>

	<figure>
	<img src="http://ndoe.nl/screen/screenshot-1397114444.png" alt="">
	<figcaption>An image that illustrates that you shouldn't use pixels as a unit</figcaption>
	</figure>

	<p>Soms is het logisch om de caption verschillend te stylen, afhankelijk van het type plaatje. Een PNG is voor graphics, een JPG is voor foto's.<p>

	<figure>
	<img src="http://vasilis.nl/voto/fotos/klein/140318180152-boeken-800.jpg" alt="">
	<figcaption>A picture of the library in the Rijksmuseum</figcaption>
	</figure>

	<p>Maar er hoeven dus geen plaatjes in een figure. Je kan er bijvoorbeeld ook een quote in stoppen die bedoeld is om de aandacht te trekken, en die niet specifiek een integraal onderdeel is van de content</p>

	<figure>
	<blockquote>
	<p>We zijn geen lijstenmakers die wissellijsten ontwerpen, we geven content vorm</p>
	<cite>Vasilis van Gemert</cite>
	</blockquote>
	</figure>

	<p>Door betekenis te geven aan stukken content, door goed te kijken wat ze nu eigenlijk zijn, en door de juiste elementen hierbij te gebruiken kan je redelijk eenvoudig een zeer krachtige (typografische) vormgeving maken voor de belangrijkste content op een site. De content waar mensen écht voor komen. De content die er dus het meeste toe doet.

	</div>