pip-webui/pip-webui-layouts/README.md

HTML5 UI for LOB applications

# <img src="https://github.com/pip-webui/pip-webui/raw/master/doc/Logo.png" alt="Pip.WebUI Logo" style="max-width:30%"> <br/> Responsive content layouts

![](https://img.shields.io/badge/license-MIT-blue.svg)

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 

<a href="https://github.com/pip-webui/pip-webui-layouts/raw/master/doc/images/img-simple-layout.png" style="border: 3px ridge #c8d2df; display: block">
    <img src="doc/images/img-simple-layout.png"/>
</a>

See online sample [here...](http://webui.pipdevs.com/pip-webui-layouts/simple/index.html)

**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**.

<a href="https://github.com/pip-webui/pip-webui-layouts/raw/master/doc/images/img-single-document-layout.png" style="border: 3px ridge #c8d2df; margin: 0 auto; display: inline-block">
    <img src="https://github.com/pip-webui/pip-webui-layouts/raw/master/doc/images/img-single-document-layout.png"/>
</a>

See online sample [here...](http://webui.pipdevs.com/pip-webui-layouts/document/index.html)

**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.

<a href="doc/images/img-multi-document-layout.png" style="border: 3px ridge #c8d2df; margin: 0 auto; display: inline-block">
    <img src="doc/images/img-multi-document-layout.png"/>
</a>

See online sample [here...](http://webui.pipdevs.com/pip-webui-layouts/multi_document/index.html)

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

<a href="https://github.com/pip-webui/pip-webui-layouts/raw/master/doc/images/img-card-layout.png" style="border: 3px ridge #c8d2df; margin: 0 auto; display: inline-block">
    <img src="https://github.com/pip-webui/pip-webui-layouts/raw/master/doc/images/img-card-layout.png"/>
</a>

See online sample [here...](http://webui.pipdevs.com/pip-webui-layouts/card/index.html)

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

<a href="https://github.com/pip-webui/pip-webui-layouts/raw/master/doc/images/img-tiles-layout.png" style="border: 3px ridge #c8d2df; margin: 0 auto; display: inline-block">
    <img src="https://github.com/pip-webui/pip-webui-layouts/raw/master/doc/images/img-tiles-layout.png"/>
</a>

See online sample [here...](http://webui.pipdevs.com/pip-webui-layouts/tiles/index.html)

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

<a href="https://github.com/pip-webui/pip-webui-layouts/raw/master/doc/images/img-tiles-groups-layout.png" style="border: 3px ridge #c8d2df; margin: 0 auto; display: inline-block">
    <img src="https://github.com/pip-webui/pip-webui-layouts/raw/master/doc/images/img-tiles-groups-layout.png"/>
</a>

See online sample [here...](http://webui.pipdevs.com/pip-webui-layouts/tile_groups/index.html)

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

<a href="https://github.com/pip-webui/pip-webui-layouts/raw/master/doc/images/img-dialog-layout.png" style="border: 3px ridge #c8d2df; margin: 0 auto; display: inline-block">
    <img src="https://github.com/pip-webui/pip-webui-layouts/raw/master/doc/images/img-dialog-layout.png"/>
</a>

See online sample [here...](http://webui.pipdevs.com/pip-webui-layouts/dialog/index.html)

**Split View layout** is the most complex layout type. It can be helpful to organize complex hierarchical content. As user drills down the content, it slides to the right. Going to the top of the hierarchy slides the content to the left. To simplify navigation this content integrates with breadcrumb in **Appbar**

<a href="https://github.com/pip-webui/pip-webui-layouts/raw/master/doc/images/img-split-view-layout.png" style="border: 3px ridge #c8d2df; margin: 0 auto; display: inline-block">
    <img src="https://github.com/pip-webui/pip-webui-layouts/raw/master/doc/images/img-split-view-layout.png"/>
</a>

See online sample [here...](http://webui.pipdevs.com/pip-webui-layouts/split/index.html)


## Learn more about the module

- [User's guide](https://github.com/pip-webui/pip-webui-layouts/blob/master/doc/UsersGuide.md)
- [Online samples](http://webui.pipdevs.com/pip-webui-layouts/index.html)
- [API reference](http://webui-api.pipdevs.com/pip-webui-layouts/index.html)
- [Developer's guide](https://github.com/pip-webui/pip-webui-layouts/blob/master/doc/DevelopersGuide.md)
- [Changelog](https://github.com/pip-webui/pip-webui-layouts/blob/master/CHANGELOG.md)
- [Pip.WebUI project website](http://www.pipwebui.org)
- [Pip.WebUI project wiki](https://github.com/pip-webui/pip-webui/wiki)
- [Pip.WebUI discussion forum](https://groups.google.com/forum/#!forum/pip-webui)
- [Pip.WebUI team blog](https://pip-webui.blogspot.com/)

## <a name="dependencies"></a>Module dependencies

* [pip-webui-lib](https://github.com/pip-webui/pip-webui-lib): angular, angular material and other 3rd party libraries
* [pip-webui-css](https://github.com/pip-webui/pip-webui-css): CSS styles and web components
* [pip-webui-core](https://github.com/pip-webui/pip-webui-core): core services
* [pip-webui-nav](https://github.com/pip-webui/pip-webui-nav): appbar for split layout integration

## <a name="license"></a>License

This module is released under [MIT license](License) and totally free for commercial and non-commercial use.