CSS Days 2017

Net als in voorgaande jaren bezochten we ook dit jaar het front-end evenement CSS Day, afgelopen vrijdag in Amsterdam. Vanuit LimoenGroen waren Dirk, Dominique en Martijn aanwezig.

Dominique over Rachel Andrew - CSS Grid Layout

De interessantste talk van de dag was van Rachel Andrew over CSS Grid Layout. Een nieuwe techniek die al een paar jaar in ontwikkeling is, maar op het moment echt bruikbaar begint te worden.

Met CSS grid kun je een complexe layouts bouwen voor je website. Op het moment gebruiken we hier Singularity GS voor. Als CSS grid voldoende wordt ondersteund door de moderne browsers, kunnen we Singularity misschien laten vallen. Het is dan mogelijk om de volledige layout te bouwen met CSS.

Op het moment wordt het ondersteund door alle laatste moderne browsers . Voor IE11 heb je nog een prefix nodig, maar de tijd is rijp om hiermee te gaan experimenteren en kijken of we dit in productie website kunnen gaan inzetten.

Dirk over Mark Boulton - Designing Grids

Ook het verhaal van Mark Boulton sloot aan bij het CSS hot topic van het moment: display: grid.

Mark nam ons mee terug in de tijd naar de (grafische) oorsprong van grid-systemen, om van daaruit terug te gaan naar het nu en de mogelijkheden van display: grid;.

Om een quote van Mark aan te halen "A grid is not set in stone". Daarmee bedoelt hij dat het altijd weer aangepast kan worden als de content daar om vraagt. Een grid moet passen bij de content en niet andersom. Soms kan zelfs een grid zonder cutters de beste oplossing zijn. Het 12 column grid system was een prima idee met de mogelijkheden die we toen hadden maar nu kunnen we bijvoorbeeld met display: grid eenvoudig complexe grid systemen ontwerpen en toepassen.

En als laatste quote van Mark "Odd numbers look beter!"

Martijn over Chris Coyier - A Tale of Four Properties

De meest vermakelijke talk van de dag was die van Chris Coyier (CSS-Tricks, Codepen). Aan de hand een muzikaal verhaaltje werden de mogelijkheden van “basic shapes” toegelicht.

Vormen op het web zijn standaard vierkant. Design vraagt nogal eens om afwijkende vormen: schuine lijnen, gemaskerde elementen of tekst die netjes om een vrijstaand beeld loopt. Met de clip-path property kan ongeveer elke vorm gemaakt worden. De box wordt hierdoor als het ware uitgeknipt en dus wordt de rest transparant.

De browser-ondersteuning is helaas nog niet optimaal, maar in potentie is het een mooie tool om bijzondere design-elementen te realiseren.

Goede voorbeelden van clip-path vind je hier: http://bennettfeely.com/clippy/
Bij een aantal van onze projecten zou dit wellicht toegepast kunnen worden, zoals https://www.abab.nl/ en https://www.eyefilm.nl/.

Een blije front-end student

Marloes was helaas ziek. Gelukkig hebben we via de organisatie nog een front-end student blij kunnen maken met het ticket: 

#cssday day1 was awesome. Off to day2 tomorrow thanks to the lovely folks @LimoenGroen ? hope to meet them tomorrow https://t.co/VsNsVwU3cJ pic.twitter.com/ch4HCQlGxc

— Ian Stewart (@ianstews) 15 juni 2017

Iets voor jou?

Ben je front-end ontwikkelaar en wil je volgend jaar ook met ons mee naar CSS Day of een ander soortgelijk event? We kunnen altijd goede front-end developers gebruiken. Kom gerust eens langs voor een kop koffie of een koud drankje.