vasilisvg/dabblet.css

## dabblet.css
/**
 * Tekst stylen met CSS
 */
* {
	box-sizing: border-box;
}
html {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
	font-family: "Times New Roman", serif; /* Dit kan je veranderen, natuurlijk */
	font-size: 100%; /* 16px, dit geldt nu voor alles waar je niet expliciet de grootte op aanpast */
	line-height: ; /* Hier kan je een cijfer invullen zonder unit. Bijvoorbeeld 1.68 */
}
body {
	margin: 1em 7% 1em 14%; /* Begin boven, met de klok mee. de linker margin is dus 14% */
	padding: 0; /* Ziet er nu wel aardig uit, maar niet als je de achtergrondkleur wit maakt */
	background: ; /* typ hier maar eens 'white', of #ebebeb, of rgb(246, 246, 246), of hsla(30, 50%, 85%, .9) */
}
h1, h2, h3, h4, p, ul, figure {
	max-width: auto; /* hier kan je een maximale, ideale regelbreedte aangeven */
	margin: 1em 0; /* boven én onder 1em, links én rechts 0 */
}

/* Headings */
h1 {
	font-size: ; /* Gebruik iets als type-scale.com om een mooie verhouding te kiezen */
	font-weight: bold; /* Misschien wil je wel normal… */
}
h2 {
	font-size: ;
}
h3 {
	font-size: ;
}
h4 {
	font-size: ;
}

/* Paragrafen */
p {
	text-align: ; /* justify misschien? */
	hyphens: ; /* hier wil je auto zetten als je justify gebruikt. Werkt niet in Chrome */
}
p + p {
	text-indent: ; /* Probeer maar */
	margin: -1em 0 1em; /* boven -1em, rechts én links 0, onder 1em */
}
/* De eerste letter van de allereerste paragraaf! */
p:first-of-type:first-letter {
	font-size: ;
	float: ; /* left, waarschijnlijk */
	/* Borders, backgrounds, kleuren, ga los! */
}
p:nth-of-type(2):first-line {
	text-transform: ; /* uppercase misschien? */
	font-variant: ; /* small-caps misschien? */
}

h1 + p {
	font-size: ; /* Misschien wil je een groter font? Bijvoorbeeld 1.414em */
	font-weight: ; /* Misschien wil je een dikker font? */
	margin: ; /* Misschien wil je minder margin boven, en meer onder? */
}
h2 + p {
	margin: ; /* Misschien wil je minder margin tussen de kop en de alinea? */
}
/* h3 en h4 + p verzin je zelf maar (-: */

/* Lists */
/* Ook hier heb je natuurlijk alle soorten combinaties */
ul {
	margin:;
	padding:;
}
ul li {
	list-style: ; /* none, disc, square, etc. */
}
/* verander maar eens in 'even' ipv 'odd' */
ul li:nth-child(odd) {
	background: silver;
}
ol {
	margin: ;
	padding: ;
}
ol li {
	background: ; /* bijvoorbeeld green */
	border-bottom: 1px solid black;
}
ol li:nth-of-type(3n + 1) {
	background: ; /* bijvoorbeeld red */
}
ol li:nth-of-type(3n + 2) {
	background: ; /* bijvoorbeeld yellow */
}
/* misschien wil je de laatste li geen border bottom geven
Hoe zou je dat doen?
*/


/* Blockquotes zijn tof */
blockquote {
	margin: ; /* Soms zijn ze ingesprongen */
	padding: ; /* Je kan ze een achtergrondkleur geven. Dan wil je ook een padding */
	/* Onthoud dat de <p> in de blockquote ook een margin heeft */
	background: ;
}
/* 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: '— ';
}

/* Figure */
figure {
	margin: 0;
	padding: 0;
}
figure img {
	display: block;
	max-width: 100%; /* Sowieso een goed idee voor elk plaatje */
}
figure figcaption {
	background: silver;
}
figure img[src$=".jpg"] + figcaption {
	background: ; /* Een caption na een plaatje dat eindigt op '.jpg' kan je anders stylen */
}
/* Een blockquote in een figure mag bijvoorbeeld een groter fontje hebben */
figure blockquote {

}

## 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>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>

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

## settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* Tekst stylen met CSS
	*/
	* {
	box-sizing: border-box;
	}
	html {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
	font-family: "Times New Roman", serif; /* Dit kan je veranderen, natuurlijk */
	font-size: 100%; /* 16px, dit geldt nu voor alles waar je niet expliciet de grootte op aanpast */
	line-height: ; /* Hier kan je een cijfer invullen zonder unit. Bijvoorbeeld 1.68 */
	}
	body {
	margin: 1em 7% 1em 14%; /* Begin boven, met de klok mee. de linker margin is dus 14% */
	padding: 0; /* Ziet er nu wel aardig uit, maar niet als je de achtergrondkleur wit maakt */
	background: ; /* typ hier maar eens 'white', of #ebebeb, of rgb(246, 246, 246), of hsla(30, 50%, 85%, .9) */
	}
	h1, h2, h3, h4, p, ul, figure {
	max-width: auto; /* hier kan je een maximale, ideale regelbreedte aangeven */
	margin: 1em 0; /* boven én onder 1em, links én rechts 0 */
	}

	/* Headings */
	h1 {
	font-size: ; /* Gebruik iets als type-scale.com om een mooie verhouding te kiezen */
	font-weight: bold; /* Misschien wil je wel normal… */
	}
	h2 {
	font-size: ;
	}
	h3 {
	font-size: ;
	}
	h4 {
	font-size: ;
	}

	/* Paragrafen */
	p {
	text-align: ; /* justify misschien? */
	hyphens: ; /* hier wil je auto zetten als je justify gebruikt. Werkt niet in Chrome */
	}
	p + p {
	text-indent: ; /* Probeer maar */
	margin: -1em 0 1em; /* boven -1em, rechts én links 0, onder 1em */
	}
	/* De eerste letter van de allereerste paragraaf! */
	p:first-of-type:first-letter {
	font-size: ;
	float: ; /* left, waarschijnlijk */
	/* Borders, backgrounds, kleuren, ga los! */
	}
	p:nth-of-type(2):first-line {
	text-transform: ; /* uppercase misschien? */
	font-variant: ; /* small-caps misschien? */
	}

	h1 + p {
	font-size: ; /* Misschien wil je een groter font? Bijvoorbeeld 1.414em */
	font-weight: ; /* Misschien wil je een dikker font? */
	margin: ; /* Misschien wil je minder margin boven, en meer onder? */
	}
	h2 + p {
	margin: ; /* Misschien wil je minder margin tussen de kop en de alinea? */
	}
	/* h3 en h4 + p verzin je zelf maar (-: */

	/* Lists */
	/* Ook hier heb je natuurlijk alle soorten combinaties */
	ul {
	margin:;
	padding:;
	}
	ul li {
	list-style: ; /* none, disc, square, etc. */
	}
	/* verander maar eens in 'even' ipv 'odd' */
	ul li:nth-child(odd) {
	background: silver;
	}
	ol {
	margin: ;
	padding: ;
	}
	ol li {
	background: ; /* bijvoorbeeld green */
	border-bottom: 1px solid black;
	}
	ol li:nth-of-type(3n + 1) {
	background: ; /* bijvoorbeeld red */
	}
	ol li:nth-of-type(3n + 2) {
	background: ; /* bijvoorbeeld yellow */
	}
	/* misschien wil je de laatste li geen border bottom geven
	Hoe zou je dat doen?
	*/


	/* Blockquotes zijn tof */
	blockquote {
	margin: ; /* Soms zijn ze ingesprongen */
	padding: ; /* Je kan ze een achtergrondkleur geven. Dan wil je ook een padding */
	/* Onthoud dat de <p> in de blockquote ook een margin heeft */
	background: ;
	}
	/* 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: '— ';
	}

	/* Figure */
	figure {
	margin: 0;
	padding: 0;
	}
	figure img {
	display: block;
	max-width: 100%; /* Sowieso een goed idee voor elk plaatje */
	}
	figure figcaption {
	background: silver;
	}
	figure img[src$=".jpg"] + figcaption {
	background: ; /* Een caption na een plaatje dat eindigt op '.jpg' kan je anders stylen */
	}
	/* Een blockquote in een figure mag bijvoorbeeld een groter fontje hebben */
	figure blockquote {

	}
	<!-- 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>