Screen
Screen is a component that creates just a box with the dimension specified by the class. You can put border, and make it centered. You can use it to simulate old applications using the old screen sizes.
Note: The screen is defined with position relative. So, for the components follow the screen as default relative position, you have to use the
absoluteclass for these components. It can be applicable for Navbar, Statusbar, etc.
These are some examples for component:
<!-- Screen -->
<div class="tui-screen-800-600">
...
</div>
<!-- Bordered screen -->
<div class="tui-screen-800-600 bordered">
...
</div>
<!-- Styled screen -->
<body class="black">
<div class="tui-screen-640-480 tui-bg-blue-black centered">
...
</div>
</body>This is the table with available classes for this component.
| Class | Description |
|---|---|
.tui-screen-640-480 |
Creates a screen with 640 x 480 resolution |
.tui-screen-800-600 |
Creates a screen with 800 x 600 resolution |
.tui-screen-1024-768 |
Creates a screen with 1024 x 768 resolution |
.bordered |
Creates a screen black border with 2px |
.centered |
Creates a centered screen in the browser viewport with 20px as margin top |