Eine Schmalspurbahn zwischen Heide und Elbe

Contao just meets the perfect spot for me between managing content and custom-designing individual pages. There is only one draw-back: the very limited amount of themes that I can use as a starting point to create my own designs from. That was OK in the old days, but we live in 2016 and since the mobile revolution and the advent of responsive web design it has become a big hurdle to overcome. Starting from scratch is extremely time-consuming and the result might not be cross-browser proof. And let's face it: the included Holygrail framework with 12 fixed columns based on 960px is just not up to the task any more...

Yes, there is a growing selection of fantastic themes out there, and I have used some for projects myself. Some offer a huge package of additional features that make site building a whole new experience. But what if I don't need 90% of the additional features? What if I only need a bullet-proof, responsive grid, and some basic functions that make my life easier as developer? What if I don't have a budget for expensive themes? Some themes fall to pieces anyway once you start hacking and fiddling with them.

Enter Pocketgrid. When I came across this project I knew this could be just what I had been looking for.

This tiny piece of open-source code allowed me to use the power of Contao while overcoming some of the limitations that come with the standard framework.
With relatively little effort and only very few changes to the standard templates I found myself in a position of using Contao in totally new ways, enabling me to realise design ideas that I would never have dreamed were achievable for me in Contao before.

What makes Pocketgrid so cool?

Strictly speaking, Pocketgrid is not even a grid. It is a minimalist framework that allows you to create responsive, elastic, mobile-first layouts. It is truly semantic in the sense that it keeps your HTML clean of any design-related classes like "large-50 medium-50 small-100 xsmall-100". In Pocketgrid all the grid-layout is happening in the CSS, not in the HTML. You just give each block that you want to bring into a column-layout a class and define in the CSS the widths it should have for the various breakpoints (which you choose). That way you are completely free to fine-tune your layout according to what the content requires in the various screen sizes. And best of all: you don't have to worry about small screens. Every block defaults to 100%, unless you tell it something else.