Skip to main content

SILK UI Framework

 

OutSystems

Understanding the Screen Layout

Layout Structure

Silk UI Mobile Layouts

The mobile layouts have the exact same structure for phone or tablet. Taking advantage of modern browser techniques such as flexbox the framework is able to handle different form factors using CSS only.

Layout features:

  • Fixed header and bottom areas.

  • Native scroll on the content area.

  • Off-canvas menu with gesture interactions.

  • Menu icon inside the header, with options to display a menu or back icons. Depending on the icon, you are able to swipe from the left to open the menu or navigate back to the previous screen. You can remove and replace this Block.

  • Bottom bar inside the bottom area to navigate between screens. You can remove and replace this Block.

Silk UI Web Layouts

These layouts are different, depending on the selected template, with the biggest difference being the menu's position. All layouts have the following features:

  • Fixed header.

  • Scrollable content and footer areas.

  • Two level menu, using the RichWidgets Blocks.

  • Server-side responsive Block with all the necessary logic.

Creating Custom Layouts

The easiest way to create a custom layout is by cloning the layout block and then changing the containers or placeholders necessary to match the desired layout. There are a few rules for the framework to recognize the layout and for all patterns to be compatible, though.

Silk UI Mobile

layout1.png

  • The containers with the class "layout", "screen" and "content" are mandatory.

  • The container with the class "main-content" ensures native scroll and that content adjusts to the device size properly.

Changing the structure and removing these elements will impact the pattern behavior and screen transitions, but developers are able to adjust the layout to the UI that is required for the application, maintaining these elements.

Silk UI Web

layout2.png

  • The container with the class "Page" and extended attribute “GetCssGlobalContext()” is mandatory.

  • The Block WidgetsForLayout inside the layout is mandatory.

  • All page elements need a Class return by the CssGetContext Function.

Server-side responsive from Silk UI Web requires these elements to be present on the layout to ensure that patterns recognize the device and adapt to the right form factor.

  • Was this article helpful?