Contao Pocketgrid

I love Contao CMS. It's just awesome. Since 2008 I have developed dozens of websites using this software which has allowed me to build full-featured, complex websites for a variety of purposes in a relatively short amount of time – often straight out of the box.

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.

Download

Note: From version 4.13 Google Webfonts are not used any more, but the font files are included in the theme (hence the file size is much larger).

When you install the theme, you must increase the allowed file size for uploads.

Seriously simple

For the grid layout of this sample website, I use only very few classes to define the respective widths of the blocks. As I said, you can call those blocks anything you like. You can call them "grid1", "grid2", "grid3" or "tomato1", "tomato2", tomato3" - or mix it all together. It doesn't matter. For this sample site I decided to stick with the naming that the Pocketgrid developer used in his documentation.

/* Smartphone version
   Nothing to do: blocks are stacked by default. */

/* Tablet version */
@media (min-width: 768px) {
  .b4 { width: 33%; }
  .b6 { width: 50%; }
}

/* Desktop version */
@media (min-width: 1024px) {
  .b1, .b2 { width: 50%; }
  .b3, .b4 { width: 33%; }
  .b5, .b6 { width: 25%; }
}

Seriously, that's it! Isn't that awesome?

You can do that to any element that has a "block" class, p.e. articles, modules and content elements. No rows needed. That makes layout extremely flexible, since Contao is so nice and adds "block" to almost anything already! All you need to know are three things:

block elements need to have the class "block"
a wrapping <div> somewhere in the hierarchy has to have the class "block-group"
blocks are added until they reach 100% width, then they break into the next row

That's it in a nutshell. Of course there is more to say, but if you want to find out more about Pocketgrid, I highly recommend checking out the project website with many demos and further documentation.

Take it, use it.

Maybe you find this approach with Pocketgrid useful, or at least, interesting. Try it, experiment with it, use it. I have put extra effort into ensuring that it is finally possible to create reasonable full-width layouts with Contao. But of course, by changing a few things you can use the standard container model as well.

I offer this very basic version free of charge for you to use in any way you like. No attribution on my part needed, however, please leave the license information of the Pocketgrid code intact.

Note: From version 4.13 Google Webfonts are not used any more, but the font files are included in the theme (hence the file size is much larger).

When you install the theme, you must increase the allowed file size for uploads.

But there is more...

If you want to do yourself a favour, you can purchase one of my inexpensive Contao Starter Themes ”Freestyle” or "Freestyle FX" for your next project. They are based on the same framework and come with lots of useful additions and layouts that will jump start your project and will save you a ton of time. Available in the Contao Theme Store.

Example 1

Look at these columns. Each is only given the class "b3". When resizing the screen to less than 1024px the columns collapse.

Praesent venenatis nunc et nulla accumsan, in pulvinar tellus aliquam. Mauris accumsan condimentum turpis, ut ornare neque egestas ut. Integer facilisis sapien non nisi consectetur feugiat. Proin tempus ipsum id sagittis blandit. Nulla molestie tempor est. Duis maximus tincidunt enim, vel blandit augue luctus nec. Nam in porttitor felis, sit amet molestie augue. Nunc id leo et enim venenatis aliquam ut vel est. Nam convallis eu enim ut varius. Nam et malesuada sem. Praesent accumsan condimentum diam, quis volutpat lorem vehicula lacinia. Aenean eleifend eu odio sed commodo. Quisque bibendum mollis velit, efficitur finibus magna fringilla id.

Example 2

Now check these columns. Each is now given the class "b4". When resizing the screen to less than 1024px the columns remain, until the screen is smaller than 768px.

Contao Pocketgrid

Download

Seriously simple

Take it, use it.

But there is more...

Example 1

Example 2

Example 3

Column 50%

Column 25%

Column 25%

Column 25%

Column 50%

Column 25%

Column 25%

Column 25%

Column 25%

Column 25%