Vertical centering is very well possible, <b>Lea Verou</b> and <b>David Storey</b> show us how. There's a small misconception though: people always assume that they want <i>vertical centering</i>. But vertical centering looks unbalanced: you want your item to be positioned slightly above the center. You can do this by <a href="http://dabblet.com/gist/2412191">setting the <code>height</code> of the <code>body</code> to 80% or 90%</a>.

Ratio's – zoals 4:3, 16:9 of 17:72 – zijn ontzettend vervelende dingen om te berekenen, vind ik. Gelukkig bestaat daar nu een prima tool voor.

Meerdere blokelementen van verschillende hoogte in kolommen tonen, dat is iets wat onmogelijk is met CSS. Is dat wel zo? Nee, natuurlijk kan dat wel: met display:inline-block; en CSS3 columns (hoera, een nuttige use case gevonden!). Perfect toe te passen in een fluid, adaptive layout.

Een erg handige bookmarklet om te kijken of de basis van een design (typografie en layout) in orde zijn: alle decoratie en kleur worden verwijderd.

Op het Microsoft Developer Blog staat een uitleg over de nieuwe CSS layout features van IE10, zeer nuttige informatie. De eerste reactie op dit stuk is zorgwekkend: iemand ziet niet in hoe grid-layout handiger is dan layout-tabellen. Hopelijk leren dit soort mensen ooit nog een vak, ongelooflijk.

Egor Kloos legt uit hoe slecht het momenteel gesteld is met het maken van layout in browsers, en hij legt uit wat het precies inhoudt dat Internet Explorer verschillende layout modules heeft ge&iuml;mplementeerd in zijn nieuwe platfor preview.

Een van de handigste css features die je helaas niet zomaar kunt gebruiken (zolang we IE7 moeten ondersteunen) is box-sizing. Extreem handig voor formulieren en ook verrekte handig tijdens het bouwen van adaptive layouts. Roger Johansson legt het allemaal haarfijn uit.

DOM scripts worden vaak traag doordat de layout verandert: het script is niet zozeer traag maar de browser moet de verandering renderen. Hier staan de evroorzakers van lyout-veranderingen, inclusief wat links naar optimalisatietips.

Een aardige uitleg over flexbox, de css layout module die maar niet genoeg ondersteund wordt. Met duidelijke voorbeelden die de kracht goed weergeven.&nbsp;

Wil je te content in kolommen aanbieden? Dat kan tegenwoordig in veel browsers met multi-column layout. Hier staat uitgelegd hoe het werkt.

Door tekst te stijlen kan je onderscheid aangeven in hierarchie. Frank Chimero legt uit hoe dat werkt aan de hand van een eenvoudig fictief voorbeeld en aan de hand van enkele bestaande webdesigns. Must read voor mensen die ontwerpen.

Ik denk dat we dit briljante script van David DeSandro regelmatig terug gaan zien de komende tijd. Nu maar hopen dat alleen uiterst getalenteerde designers en developers de link naar deze site weten te vinden.

"Four Most Genius ... Web Articles of Decade" @zeldman @t @jjg @beep on standards, @microformats, AJAX, responsive design

CSS position; Explains in detail what the five values of position mean and do:

Prachtig non-obtrusive maar wel prettig gebruik van CSS3 en media-queries. Ook liefhebbers van experience design komen volledig aan hun trekken. Het fijne is dat de experience niet het doel van de site is: het is meer een aardige extra die af en toe per ongeluk optreedt. Details!

Hoe werkt flex box? Een duidelijke uitleg van Paul Irish gepaseerd op werk van Stephen Hay

Awesome: — a set of media queries, typography presets with baseline grid, and a basic layout grid. /via @joelhelin

Met dit javascriptje kan je alvast spelen met de css template layout die, hopelijk, ooit gewoon gaat werken. Erg leuk om alvast eens mee te spelen.

Interessante CSS library om strak mee te designen. Als desingers konden HTML'en zouden ze zoiets goed kunnen gebruiken.

Probleem met echte fluide layouts was altijd het bijzonder slechte image-rendergedrag van Windows (niet alleen IE dus, heel windows). Daar is nu een scriptje voor.

Een uitgebreide uitleg over schhalbare sites, in de breedte én in de hoogte. Uitstekend leesvoer voor frontenders en designers die willen weten wat er allemaal mogelijk is.

Absoluut geniale animatie. Krankzinnig goed!

Hoe zit dat nou met die ems en hoe kan je daar wat makkelijker mee werken?

De schrijver neigt lichtjes naar het gebruik van pixels, de reaguurders

een interessant artikel over het gebruik van ems als eenheid voor fonts

Convert pixels to ems. The perfect flexible layout tool