84 lines
2.1 KiB
Markdown
84 lines
2.1 KiB
Markdown
# TuiCss
|
|
Text-based user interface CSS framework
|
|
|
|
<img src="https://image.ibb.co/gdAYN9/tuiCSS.png"/>
|
|
|
|
TuiCss is a framework to create web applications using a interface based in ASCII text like MS-DOS applications. This kind of interface is very eligible because the ultra-contrast colors used. This framework was created following the <a href="https://en.wikipedia.org/wiki/Turbo_Vision">Turbo Vision UI Framework</a> and other applications based on TUI.
|
|
|
|
## Components
|
|
|
|
This is a simple doc for the avaiable components in the framework. For more details, download the repository and run example.html to check the full code.
|
|
|
|
### Navbar
|
|
<img src="https://image.ibb.co/fACzUp/tui_nav.png"/>
|
|
|
|
```html
|
|
<nav class="tui-nav tui-nav-fixed">
|
|
<span class="tui-clock" id="clock"></span>
|
|
<ul>
|
|
<li>
|
|
...
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
```
|
|
|
|
### Navbar Menu
|
|
<img src="https://image.ibb.co/kv0Tpp/tui_menu.png"/>
|
|
|
|
```html
|
|
<li class="tui-dropdown">
|
|
<span class="red-168-text">F</span>ile
|
|
<div class="tui-dropdown-content">
|
|
<ul>
|
|
<li>
|
|
<a href="#!">
|
|
<span class="red-168-text">O</span>pen
|
|
<span class="tui-shortcut">ctrl+o</span>
|
|
</a>
|
|
</li>
|
|
<div class="tui-black-divider"></div>
|
|
<li>
|
|
<a href="#!">
|
|
<span class="red-168-text">Q</span>uit
|
|
<span class="tui-shortcut">F4</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
```
|
|
|
|
### Sidenav
|
|
<img src="https://image.ibb.co/ci06aU/tui_sidenav.png"/>
|
|
|
|
```html
|
|
<nav class="tui-sidenav">
|
|
<ul>
|
|
<li>
|
|
...
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
```
|
|
|
|
### Window
|
|
<img src="https://image.ibb.co/jcRMs9/tui_window.png"/>
|
|
|
|
```html
|
|
<div class="tui-window">
|
|
<fieldset class="tui-window-fieldset">
|
|
<legend>Window</legend>
|
|
<button class="tui-fieldset-button"><span class="green-255-text">■</span></button>
|
|
...
|
|
</fieldset>
|
|
</div>
|
|
```
|
|
|
|
## CSS Classes
|
|
|
|
## Credit
|
|
TuiCss Framework (c) Copyright 2018
|
|
by Vinícius Reif Biavatti
|
|
VBFoundation
|