Creating a liquid layout for an Agile Platform theme

Justin James details how he used one of Matthew James Taylor's "The Holy Grail" liquid layouts to create a modern, CSS-driven OutSystems Agile Platform theme.

In the OutSystems Agile Platform, I have never been completely happy that the default screen layouts are table-based. When version 6.0 was released and included a new template system, I hoped that the default templates would use tables, but sadly they didn't. On my Rat Catcher project, I made my own layout from scratch using Containers (which are just a Widget to produce a <div>) and CSS, which worked out very well. On newer projects, though, I have made a switch to something even easier to deal with in terms of design and layout.

It's not difficult to make the new layout. First, I start with one of Matthew James Taylor's "The Holy Grail" liquid layouts. Visit the page with the layout you like, view the source, and then grab the CSS from it. Go to your Agile Platform theme, edit the style sheet, and paste in the CSS. (While these layouts are free to use, Mr. Taylor does accept donations; I've gotten enough value from these layouts that I felt I should put some in for him.) Next, open the theme's layout screen. Move to the very beginning of it, and start placing a series of Containers on the screen in the same nesting as the <div>'s in the layout, and along the way, assign them the same CSS classes and names as needed. Carefully cut/paste the contents of the existing design into the appropriate Containers. Finally, remove the table, which should now be an empty shell.

Voila! You now have a totally modern, CSS-driven theme for use. If you want to use a different layout, most of the time you can just grab the right CSS from the new layout and paste it in. On a recent project, I used the two column, sidebar on the left design, and it is so close to the default Agile Platform theme that another developer actually thought I just tweaked some font sizes. But under the hood, it was using a much better CSS and <div> layout that put the project on the right foundations for a long time to come. With the CSS media types we can easily make it print well or display on mobile devices nicely as well. While doing this is a little bit of effort, it is worth it in the long run, though I hope OutSystems moves to making the default theme like this in the future.


Read my other TechRepublic posts about Agile Platform