Responsive Layout

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.

This widget utilizes a web standard called, CSS Grid Layout, which you can learn more about on Mozilla.org here, and you can read about it on W3Schools here. These layouts do not require a third-party JavaScript library.

The responsive layout widget is available with Profound UI versions 6 and higher.

Compatibility

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.

Getting Started

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.

Video Introduction

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

layout items

a positive integer specifying how many containers the layout has.

style rules

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.

use viewport

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.

When "use viewport" is false, the layout widget's height and width determine which @media rules to apply. Some internal JavaScript reinterprets the @media rule for you, but that process may be slower than letting the browser's view-port determine the rules. Also, the JavaScript only accepts a few media features: min-width, min-height, max-width, max-height, and orientation. Other features, "not" rules and "or" rules (the comma) are not currently supported when "use viewport" is false. If the CSS rules are in an external style sheet, then this property does nothing.

container names

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.

Design Time Helpful CSS

[id^="dspfDesigner"] .puiresp > div:nth-child(1n) { background-color: rgba(168,198,159,0.15);}
[id^="dspfDesigner"] .puiresp > div:nth-child(2n) { background-color: rgba(204,226,163,0.15);}
[id^="dspfDesigner"] .puiresp > div:nth-child(3n) { background-color: rgba(153,161,166,0.15);}
[id^="dspfDesigner"] .puiresp > div:nth-child(4n) { background-color: rgba(92,93,141,0.15);}
[id^="dspfDesigner"] .puiresp > div:nth-child(5n) { background-color: rgba(101,79,111,0.15);}

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.

Internet Explorer 10-11 Fallback

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .puiresp {
    width: 100%;
    height: 100%;
    display: block;
    display: -ms-grid;
    -ms-grid-columns: 1fr;
 }
  
  .puiresp > div {
    min-height: 50px;
    min-width: 50px;
    overflow: auto;
  }
  
  /*Overrule the absolute positioning of any widget's main tag if it is directly inside a container.*/
  .puiresp > div > [id] {
    position: static !important;
  }
  /* Make the rows stack on top of each other.*/
  .puiresp > div:nth-of-type(1){ -ms-grid-row:1;}
  .puiresp > div:nth-of-type(2){ -ms-grid-row:2;}
  .puiresp > div:nth-of-type(3){ -ms-grid-row:3;}
  .puiresp > div:nth-of-type(4){ -ms-grid-row:4;}
  .puiresp > div:nth-of-type(5){ -ms-grid-row:5;}
   /* ... etc. */
 }

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:

Internet Explorer 8-9 Fallback

.puiresp {
  width: 100%;
  height: 100%;
  display: block;
} 
.puiresp > div {
  min-height: 50px;
  min-width: 50px;
  overflow: auto;
}
.puiresp > div > [id] {
  position: static !important;
}

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:

IE8-9 Link Tag

<!--[if (IE 8)|(IE 9)]>
  <link rel="stylesheet" type="text/css" href="/IE89fallback.css">
<![endif]-->

Then, only people using IE8 or IE9 would load /IE89fallback.css (which would be the /www/profoundui/htdocs/ IFS directory in the default installation).

Configuration Options

Default Screen Sizes

The responsive editor provides some default screen sizes for any, small, medium, and large screens. These sizes are editable, and the changes are saved to each browser's localStorage. To override the default sizes from the hard-coded defaults, use the configuration option pui.designer["responsive screen sizes"]. Place this option in a JavaScript IFS file in your Profound UI installation under userdata/custom/js/. For example: /www/profoundui/htdocs/profoundui/userdata/custom/js/settings.js.

The new setting should be an array of array sizes, like the following:

// Set the responsive screen size data: label, minimum width, maximum width, height.
pui.designer["responsive screen sizes"] = [
  ["Any", null, null, null ],
  ["Small", 0, 480, 800],
  ["Medium", 481, 768, 1280],
  ["Large", 769, 1280, 720]
];

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.