Version 8 Fluid Design

Version 8 Fluid Design

Hi Everyone,

I really like the new columns feature of version 8 but for a certain project I need the layout to be fluid. Is there anyway to achieve this? I tried using twitter bootstrap but the new Basic.css file is interfering with the layout. I also tried setting "Use Grid" to No but this didnt help either. Alternatively, is there a way to disable the "Basic.css" from being used?
Hi Tyler,

What styles of basic css are interfeering with twitter bootstrap? If you use bootstrap classes and do not use widths or resizing with the mouse in the web editor there should be no conflicts. 

Tiago Simões
Thanks for the reply Tiago. The OSInline class seems to be added to some divs. I did some testing and yes, I did change the width! But not in the way I would expect to have an effect.

What I did was cleared the Width property of the container because it said "fill parent" and to me I thought this would mean 100%. It seems if you leave it blank then the OSInline class is added. If you leave it as fill parent, only the classes you specify in the "Style" property are used.

Thanks again.
Hello Tyler,
At the time being, we still don´t support fluid grids but let's see what can we do.
Service Studio already gives the OSInline and OSFillParent css classes, as well as all the other grid classes (cool!).
Let's try to take advantage of this system, overriding the widths to support the new fluid grid:

1) Set the UseGrid property to "Yes" and state how many columns do you want in your fluid grid (you can ignore the columnWidth or gutterWidth properties)
2) Override the generated css to support the new fluid grid widths:

In attachment, there is a sample eSpace using this fluid grid.

Again, this is a workaround:
  • There are things that will not work as well as the fixed grids, such as the grid gray overlay in the background of servicestudio. Despite this, you will still be able to manually resize your elements, even with nesting! (check the Homepage to understand the nesting in fluid grids)
  • Service Studio has some "intelligences", for instances not allowing to manually set a width that is bigger than the parent element's width. In these cases you will have to directly manipulate the elements' properties.
Hope this will help you!

Vasco Pessanha
  Alternatively, is there a way to disable the "Basic.css" from being used?

I struggled with the same problem as the thread starter as I also am trying to implement Twitter Bootstrap for a project. The Basic.css styles are in this case really annoying and I only just found a solution to this problem  :
use JQuery to remove the basic.css link tag from the header

$(document).ready(function() {
This effectively removes all default styling. Basic.css classes remain in the tags, but serve no purpose.
You can use Twitter Bootstrap without interference.

Hi guys,
Just to let you know that version 9 will be released soon with the support for fluid grids!! Instead of having the "UseGrid" property that can be set to "Yes/No", you now can state that your theme uses a fluid grid. Take a look at the following post:

Best Regards,
Vasco Pessanha