This widget is available starting with Profound UI Version 6, Fix Pack 0.0.

Overview

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 here and read about it on W3Schools here. These layouts do not require a third-party JavaScript library.

Property	Description	Additional Info
layout items	A positive integer specifying how many containers the responsive layout has.
style rules	CSS rules that determine the layout, affecting containers inside the Responsive Layout. 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. The 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 not apply.
container names	This property is available with Profound UI Version 6, Fix Packs 2.0 and later. 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.

CSS for Designing

If your layout has many containers, it may be difficult to see the boundaries in the Visual Designer. You can add CSS rules to add background color to help distinguish between the containers. The rules below will color the containers only for Visual Designer, not at runtime.

Design Time 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

See here in regards to 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 users 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:

<!--[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 in 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 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]
];

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.

Responsive Layout

Overview

Table of Contents

Compatibility

Getting Started

Visual Layout Editing Tool

Responsive Layout Properties