How-to build a Fluid Grid

Hi there,

From time to time, and by this I mean almost every time, I stumble upon the fact that big (or huge) monitors are common these days, so when using the (awesome) grid of the platform, usually the application looks like the following:

And I think: "Damn, I'm wasting sooo much space...". And eventually the customer asks, "Oh, can't we put and awesome side bar with kittens there?", and I think "NO.", and say, "Well, you know, I will try to figure out a way to extend the content, so that it's easier for your employees to see their tasks and some other useful stuff.".

So what the solution for this? A possible answer is to simply go fluid, this would allow the content to extend on the screen (until certain limits)

And with this simple solution, our app looks much better, besides we're using more space in the screen, by just letting the content expand!

But... How do we do it?

Simple! We just need to override the platform CSS for the grid, and change it to percentage!

Wow, hold on your horses... That is not that simple... Besides the theme grid style, is being provided in a different file, one that I cannot change...

It is simple! For that we only need to create more specific rules! Such as html .ThemeGrid_Width6 { ... }
And this css, can simply be added to your project theme. The CSS itself will look something like this:

html .ThemeGrid_Width6 {
       width: 48.93617021276595%; //This is the value that's going to used by modern browsers
       *width: 48.88297872340425%; //IE7 specific things and situations! ;)
       -servicestudio-width: 460px; //Let's have a nice preview on service studio!

If you didn't know, if you add the prefix -servicestudio- to any element of css, it means that it will only be interpreted on service studio, so great to have good previews = easier maintenance!

But... there's always a but.
If the implementation was done as linear as described before, it would mean every time that we'd set the size of an element to 3 col, it would be 1/4 (3/12) of the size of the direct parent. Take the following example:

Notice that html of this example:

So notice that the both yellow and the black div are at the same level and have the same size. However, the green + orange + red elements width summed shouldn't be the same as the parent?!? NOP, because all sizes are in percentage, so relative to it's immediate parent.

And since at the moment, the platform doesn't help on this topic, you'd lose the possibility to use the grid on the service studio...

I'll be damned, is there anything that I can do?

Dunno (e-mail to PM? ;) ).
But I'll try to help you for now!
So instead of having a fully fluid grid, we're going to have a 1st level only fluid grid! Sounds complex? However it isn't! This means that the css rule will override the platform css only if there's no previous element applying the the column size. The rule would look something like this:

html  :not(div[class*="ThemeGrid_Width"]) .ThemeGrid_Width6 {
  width: 48.93617021276595%;
  *width: 48.88297872340425%;
  -servicestudio-width: 460px;

Notice the bold part. It means that the override will be applied to and element that is using the class ThemeGrid_Width6, if the element is not preceded by an element that is using a class that starts by ThemeGrid_Width. (Yup, IE8 will kind of fail to use it).

So how should you architecture your code to take the maximum advantage of this snippet?
Try to layout, grid wise, your elements in the first level, and the children of these should have width: 100% or display: block.

Notice the html:

In attachment, you will find the CSS snippet to enable you to achieve this!

Happy coding!

Rúben Gonçalves

Hi Ruben,

Great trick. I've seen your CSS videos and it was really worthwhile.
Now, with P9 and also Silk UI we have ready to use fluid themes, like Dublin or LondonFluid.

By the way, how can I get an absolute blank app? If I create a new application and select blank theme I still get the grids css.