> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/developer-guide-en/pjt-prepare/ui-ux-guide/screen-detail-guide/layout.md).

# Layout

This document describes the standard layout of X2BEE projects.

It explains the layout resolution and the UI implementation concept.

***

## Resolution <a href="#undefined" id="undefined"></a>

* The resolution is determined based on screen-share statistics.
* It is based on PC web and mobile web, with per-browser size changes defined via CSS media queries.
* Tablets are implemented using the PC version.
* The minimum web resolution is 1003px.

<div align="left"><figure><img src="https://tech.x2bee.com/download/attachments/14352398/%EB%AA%A8%EB%8B%88%ED%84%B0%20%ED%95%B4%EC%83%81%EB%8F%84.png" alt=""><figcaption></figcaption></figure></div>

## UI Implementation Concept <a href="#ui" id="ui"></a>

### Main Frame Layout <a href="#undefined" id="undefined"></a>

<figure><img src="https://tech.x2bee.com/download/attachments/14352398/Untitled%20Diagram.drawio.png" alt=""><figcaption></figcaption></figure>

| Basic Structure                   | Top/Left/Work/Bottom 4-quadrant structure                                                                                                                                            |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| GNB (Global Navigation Bar)       | System logo; navigation across the entire system                                                                                                                                     |
| LNB (Local Navigation Bar)        | Local menu (1–3), My Menu, entire system menu (xx, xx, xx)                                                                                                                           |
| Work Area                         | <p>The area where business tasks for the unit menu screen are carried out.<br>Functions related to the unit are exposed here (My Menu registration, screen lock function, help).</p> |
| MDI (Multiple Document Interface) | Displayed as tabs for opened menu screens                                                                                                                                            |

### Basic Screen Scroll Policy <a href="#undefined" id="undefined"></a>

As a principle, the work area should not generate horizontal scrolling at the standard resolution, and vertical scrolling in the work area is recommended to be avoided as much as possible.

Horizontal or vertical scrolling generated inside a Grid/Text Area component is permitted.

Standard resolution 1920*1080 / user work area 1360*1040

<figure><img src="https://tech.x2bee.com/download/attachments/14352398/frame%20scroll.png" alt=""><figcaption></figcaption></figure>

### Work Area Types <a href="#undefined" id="undefined"></a>

<br>

<figure><img src="https://tech.x2bee.com/download/attachments/14352398/%EC%A0%9C%EB%AA%A9%20%EC%97%86%EB%8A%94%20%EB%8B%A4%EC%9D%B4%EC%96%B4%EA%B7%B8%EB%9E%A8-1684455402143.drawio-aaa74d4878d6110e1eb4b7df7c87532df0f9c79d.png" alt=""><figcaption></figcaption></figure>