FLUID: Responsive management

Description

The FLUID framework makes it possible to make applications responsive regardless of which theme is used. The responsive mode is active by default in the Bootstrap and BootstrapZen themes, but can also be enabled in all the other themes.

Fields outside the list and in detail

The structure of FLUID panels consists of rows and columns; it's possible to indicate the breakpoint (that is, the width of the viewport expressed in px) beginning at which a row has to split, arranging the fields it contains vertically rather than horizontally. To set the breakpoint it is sufficient that one of the fields belonging to the row has one of the following classes (in the form {{className}}, like the RD3 framework):

• {{col-sm-X}} (col-sm-12, col-sm-11 ....)
• {{col-md-X}} (col-md-12, col-md-11 ....)
• {{col-lg-X}} (col-lg-12, col-lg-11 ....)

The name of these classes recalls those used by Bootstrap. This choice was made to allow for easier porting of existing projects that already used them. Differently from the RD3 engine, in Fluid these classes do not manage the horizontal dimension of the fields (which is managed using the resizing rules). Instead they are used to indicate below which breakpoint the row needs to split.
Therefore, using {{col-md-1}} or {{col-md-12}} in your code makes no difference. Both classes indicate that the row must split below the breakpoint md.

The following tables summarize the breakpoints and the rules applied:

XS	SM	MD	LG
<=767px	>768px && <=991px	>992px && <=1199px
All the rows split. The fields are displayed with the headers above.	The rows with col-md- and col-lg split.	The rows with col-lg- split

If a row contains fields with different breakpoint classes, it will break at the smaller breakpoint. For example, if a row contains both >col-md-12 and col-lg-12 it will behave like a row that contains only col-md-12.

In the Bootstrap and BootstrapZen themes, unless otherwise specified, the fields use the col-md-12 class by default, so the row that contains them splits at the sm breakpoint. In other themes the default is not applied, so responsive mode is not active. However, the classes can still be applied explicitly on fields to make them responsive. It is also possible to modify the default class that will be applied or to add a default to a non-responsive theme to make it responsive. Below we will explain how to achieve this result.

Frame

In the case of frames, it is possible to make it so that upon reaching the breakpoints the side-by-side frames are instead arranged one below the other. To set the desired breakpoint, these classes can be used on the frames (in the format {{className}}, like in the RD3 framework):

• {{col-sm-X}} (col-sm-12, col-sm-11 ....)
• {{col-md-X}} (col-md-12, col-md-11 ....)
• {{col-lg-X}} (col-lg-12, col-lg-11 ....)

If no class is defined, the Bootstrap and BootstrapZen themes will use col-md-12 in order to make a new line in vertical tablet mode and lower (breakpoint sm). It is also possible to modify the default class that will be applied or to add a default to a non-responsive theme to make it responsive. Below we will explain how to achieve this result.

In-list fields

As for the RD3 framework, the md-visible and lg-visible classes can be used to indicate that an in-list field must be visible only from the corresponding breakpoint onward. The breakpoint is inclusive, so an in-list field with the md-visible class will be hidden automatically if the browser is reduced to dimensions smaller than 992px (breakpoint sm).

Managing default

Media queries that manage responsive modes are present in all themes, so if the classes indicated above are used explicitly all the themes can be made responsive.
The default value of these classes can be set in any theme by setting a specific css variable in customf.css:

 
:root { 
  --default-responsive-class: "col-md-12" !important;  /* OR col-lg-12 OR col-sm-12 */ 
} 

This variable is already present in the Bootstrap and BootstrapZen themes, so the responsive mode is active by default. The default value is 'col-md-12'.
In other themes, simply add it by setting it with one of the values indicated above to enable responsive mode.