The responsive layout widget allows you to rearrange layouts of screens in response to a browser's window resizing and orientation changing. These layouts can handle a variety of screen sizes–small to large.
A visual editing tool is included in Visual Designer, allowing you to design the layouts for different screen sizes. You can edit the layouts and see results directly in Visual Designer.
The responsive layout widget is available with Profound UI versions 6 and higher.
The minimum browser versions required for Responsive Layouts are below:
- Chrome: 57 (March 2017)
- Edge: 41 (September 2017)
- Firefox: 52 (March 2017)
- Safari: 10.1 (July 2017)
- iOS Safari: 10.3 (March 2017)
- Chrome for Android: 64 (January 2018)
Responsive Layouts will not work in Microsoft Internet Explorer, because IE does not support the necessary CSS*. In order for IE users to see any content in Responsive Layouts, we provide some "fallback" CSS rules. (See Fallback for Older Browsers below). (It is unlikely that Microsoft will add support for CSS Grid Layouts to Internet Explorer, as IE is being phased out in favor of Edge.)
As a designer, you can best decide if your user base can support these responsive layouts. A helpful reference is a website that estimates how many people are using each browser version: Can I use...
*IE 10-11 do support Microsoft-specific rules for CSS Grid Layout (-ms-grid-rows, -ms-grid-columns, display:-ms-grid, etc.), but the visual layout editing tool we provide does not use the Microsoft-specific CSS rules.
To begin, open Visual Designer in a compatible browser, and find the Layouts widgets (on the left-side toolbox). Drag the "Responsive Layout" onto the design canvas.
The default gives you five containers in a layout with four, equally-spaced columns and two equally-spaced rows. You can add or remove containers using the icons or by setting the "layout items" property.
To change the layout, look to the right under Properties for the "style rules" property. Click "style rules" to make an ellipses icon appear. Then click that icon:
You will see the Responsive Layout Editor, which allows you to graphically change the layout.
Feel free to experiment with any part of the tool. You can always click Cancel to abort your changes. The behavior may not make sense without some background about how CSS Grid Layout works.
Visual Layout Editing Tool
The web standard behind our Responsive Layout tool, CSS Grid Layout, takes some effort to learn. Instead of learning this new CSS technology and coding CSS by hand, you can use our visual layout editor to start designing responsive layouts.
Responsive Layout Properties
a positive integer specifying how many containers the layout has.
CSS rules that determine the layout, affecting containers inside the Responsive Layout.
In Visual Designer, there is a tool to setup these rules for you visually. Click the ellipses icon:
These rules determine the positions and dimensions of the containers. This property can be left blank so that rules can be defined in external style sheets, but the layout design tool will only work when "style rules" is not empty. Furthermore, the rules must use the placeholder string, "#_id_", in place of the widget's ID property. During runtime, that "#_id_" will be replaced with the value of the widget's ID property.
Determines how @media rules in the "style rules" property are interpreted. Defaults to true.
When "use viewport" is true, the page size determines which @media rules to apply. Your layouts can adjust when the entire page resizes.
By default, the preview containers in the Responsive Layout Editor show no contents other than the container number. The numbers and container colors help identify containers across different preview screen sizes. The "container names" property allows more descriptive names to appear in the Responsive Layout Editor preview. The property also displays the names for containers in Visual Designer's canvas. Set this property in the Properties Panel:
This property should be a comma-separated list of names. If any entries in the list are empty, then the default numbers still appear.
The "container names" property is available with Profound UI Version 6 Fix Packs 2.0 and later.
Helpful CSS while Designing
If your layout has many containers, then while in Visual Designer it may be difficult to see the boundaries. You can add some CSS rules to add background color to help you distinguish between the containers. The rules below will color the containers only for Visual Designer, not at runtime.
These rules make containers different colors.
If you place these rules in a .css file in the userdata/custom/css/ IFS directory of your installation and reload Designer, then your containers will appear with different colors.
Fallback for Older Browsers
A good article on using CSS Grid Layouts with older browsers is here.
Internet Explorer does not support the web-standard responsive layouts. IE 10 and 11 support some limited, Microsoft-specific CSS rules for responsiveness that we do not use. To make content appear in the Responsive Layout widget, CSS rules are defined in the default stylesheet, profoundui.css, to support anyone using Internet Explorer.
Profound ships with CSS like below, making content in Responsive Layouts appear for people using the Internet Explorer browser. Instead of placing containers in flexible rows and columns, this CSS will display each section vertically below the last section. You can override the rules, as needed, by defined styles in .css files in the IFS custom/css/ directory.
The "@media" rule in the above code will only apply the styles to users of Internet Explorer 10-11; Chrome, Edge, and Firefox browsers will ignore those rules.
To add fallback rules for users of Internet Explorer 8-9, more work is needed. A style sheet with similar rules should be placed somewhere outside of userdata/ to avoid being loaded for all users. The rules should not use @media rules:
To load the IE8-9 CSS, a conditional link tag should be included inside the .html file used when loading your installation. For example, in a Rich Display environment's userdata/html/start.html file, you could add this tag inside the <head> tag:
Then, only people using IE8 or IE9 would load /IE89fallback.css (which would be the /www/profoundui/htdocs/ IFS directory in the default installation).
Default Screen Sizes
The new setting should be an array of array sizes, like the following:
Note: the maximum width and height values determine the size of the preview window. When creating rules for whichever screen size is selected, the minimum and maximum width values are used. The values from one screen size should not overlap another's values; otherwise, the style rules may not behave as you might expect.
This configuration option overrides the default, but individual developers may change screen sizes in their browsers. If they do, then their changes are saved to the browser's localStorage. Clicking the "defaults" button will restore the values set in this configuration option.