Responsive content layouts

Development responsible applications requires to organization content the way that can fit available screen from small phones to large desktops. In Line-of-Business applications with tens screens and dialogs implementaing responsive layouts can be time consuming and error prone task. To make it more productive Pip.WebUI.Layouts module provides a set of universal responsible layouts that can help to organize content in number of different ways: as full-screen content, documents, tiles, dialogs and more.

Simple layout is the simple layout type. It simply provides to content the entire screen, full width and full height

See online sample here...

Single document layout places content as a document with fixed width and full height centered on the screen. On tables and phones the content occupies the whole screen line it Simple layout.

See online sample here...

Multi-documents layout is an extention to Document layout that adds a list on the left hand side to switch between documents. On phones the list occupies the entire screen and user switches between list and document back and forth.

See online sample here...

Menu layout is combines menu that adds on the left hand side to switch between documents and Document layout or Single document layout. On phones the menu occupies the entire screen and user switches between menu and document back and forth.

You can hide menu if this need.

See online sample here...

Card layout places small content at the center of the screen in a card. On phones the content is extended to the whole screen.

See online sample here...

Tiles layout is used to present multiple items in tiles that arranged on the screen in one or several columns.

See online sample here...

Tiles groups layout is an extension to Tiles layout that breaks items into groups.

See online sample here...

Dialog layout places content in a modal dialog. On phones the dialog is resized to occupy the entire screen.

See online sample here...

Media service pipMedia is used to evaluate whether a given media query is true or false given the current device's screen / window size.

pipMedia also has pre-programmed support for media queries that match the layout breakpoints: | Breakpoint | mediaQuery | |---|---| | xs | (max-width: 599px) | | gt-xs | (min-width: 600px) | | sm | (min-width: 600px) and (max-width: 959px) | | gt-sm | (min-width: 960px) | | md | (min-width: 960px) and (max-width: 1279px) | | gt-md | (min-width: 1280px) | | lg | (min-width: 1280px) and (max-width: 1919px) | | gt-lg | (min-width: 1920px) | | xl | (min-width: 1920px) |

See online sample here...

Learn more about the module

• User's guide
• Online samples
• API reference
• Developer's guide
• Changelog
• Pip.WebUI project website
• Pip.WebUI project wiki
• Pip.WebUI discussion forum
• Pip.WebUI team blog

Module dependencies

• pip-webui-lib: angular, angular material and other 3rd party libraries
• pip-webui-css: CSS styles and web components
• pip-webui-services: core services
• pip-webui-nav: appbar for split layout integration

License

This module is released under MIT license and totally free for commercial and non-commercial use.