Layout transformations

PREREQUISITES: You have at least one layout widget on your page or template, on which to apply the layout transformation rules. For more information about layouts, see Apply a template to a page.

Sitefinity CMS includes “drag & drop” layouts that can be quickly placed onto any page or template. These layouts are DIV-based, not TABLE-based, and fully aligned with HTML best practices. Once you place a layout, Sitefinity CMS becomes aware of the layout structure applied to your webpages, and through adaptive rule-sets, can optimize these layouts for the mobile web. Thus, you can take advantage of layout transformations for all Sitefinity CMS built-in layout widgets.

You transform your page layout doing one or both of the following:

• Custom CSS file
• Modify the transformations of the default layout elements

To apply a layout transformation, you can choose a CSS file that is loaded upon transformation. The CSS is loaded only after the device conditions and requirements you set with the media query are met. This custom CSS file overwrites the generic CSS of your site and makes transformation possible, for example you can override the page wrapper width (set it to 100%), change the layout of the page which is not based on Sitefinity CMS built-in layout widgets, enlarge font sizes for better readability, and so on.

For example, you want to hide the sidebar of a page when the page is viewed on mobile phones. To do so, you use a custom .facet_sidebar class in your custom CSS class:

The modifications you make to the default layout elements naturally are applied to the layout only, unlike the custom CSS you can choose to load.

You simply choose how the default layouts are transformed once device conditions and requirements you set with the media query are met.

For example, if you have a 5 columns layout element, the columns will look too narrow and difficult to read on a smartphone. You can choose to display the columns as rows by clicking 5 rows element.