TuiCss is a framework to create web applications using an 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 Turbo Vision UI Framework and other applications based on TUI.

Getting Started

To use TuiCss, you have to download the TuiCss folder of the repository and import the tuicss.css to your html page using this tag:

<link rel="stylesheet" href="TuiCss/tuicss.css" />

Don't forget to keep the images folder in the same folder of the css file because the css uses this folder as reference to get the images for some classes.

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.

<nav class="tui-nav tui-nav-fixed">
    <span class="tui-clock" id="clock"></span>
    <ul>
        <li>
            ...
        </li>
    </ul>
</nav>

<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

<nav class="tui-sidenav">
    <ul>
        <li>
            <a href="#!">Open</a>
            ...
        </li>
    </ul>
</nav>

Window

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

Fieldset Status Bar

<div class="tui-window">
    <fieldset class="tui-window-fieldset">
        ...
        <div class="tui-fieldset-statusbar">Text format: UTF-8</div>
        ...
    </fieldset>
</div>

Buttons

<a href="#!" class="tui-button">button</a>
<button class="tui-button">button</button>

Status Bar

<div class="tui-statusbar">
    <ul>
        <li><a href="#!"><span class="red-168-text">F1</span> Help</a></li>
        <li><a href="#!"><span class="red-168-text">F2</span> Shell</a></li>
        <li><a href="#!"><span class="red-168-text">F3</span> Open</a></li>
        <span class="tui-statusbar-divider"></span>
        <li><a href="#!"><span class="red-168-text">F10</span> Exit</a></li>
    </ul>
</div>

<div class="tui-window">
    <fieldset class="tui-window-fieldset tui-window-fieldset-no-legend tui-border-solid">
        <ul>
            <li class="cyan-255-hover black-255-text-hover">
                <span class="tui-shortcut">A</span>
                <span>Register Tables</span>
            </li>
            <li class="cyan-255-hover black-255-text-hover">
                <span class="tui-shortcut">B</span>
                <span>Quit</span>
            </li>
        </ul>
    </fieldset>
</div>

Panel

<div class="tui-panel">
    ...
</div>

Inputs

<!-- Input -->
<input class="tui-input" type="text" />
<input class="tui-input" type="number" />
<input class="tui-input" type="email" />
<input class="tui-input" type="password" />
<input class="tui-input" type="color" />
<input class="tui-input" type="date" />
<input class="tui-input" type="datetime-local" />

<!-- Select -->
<select class="tui-input">
    <option selected>-- SELECT --</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>
<select class="tui-input" multiple>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

<!-- Checkbox -->
<label class="tui-checkbox">
    Checkbox
    <input type="checkbox"/>
    <span></span>
</label>

<!-- Radio -->
<fieldset class="tui-input-fieldset">
    <legend>Radios</legend>
    <label class="tui-radio">
        Option 1
        <input type="radio" name="radio" checked />
        <span></span>
    </label>
    <label class="tui-radio">
        Option 2
        <input type="radio" name="radio" />
        <span></span>
    </label>
</fieldset>

<!-- Textarea -->
<textarea class="tui-input"></textarea>

Window Textarea

<div class="tui-window">
    <fieldset class="tui-window-fieldset">
        <legend align="center">FILE.C</legend>
        <button class="tui-fieldset-button"><span class="green-255-text">↑</span></button>
        <button class="tui-fieldset-button tui-fieldset-button-left"><span class="green-255-text">■</span></button>
        <textarea class="tui-textarea"></textarea>
    </fieldset>
</div>

Table

<table class="tui-table tui-table-hover">
    <thead>
        <tr>
            <td>Name</td>
            <td>Size</td>
            <td>MTime</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>/.mc</td>
            <td>1024</td>
            <td>Apr 24 01:24</td>
        </tr>
    </tbody>
</table>

Progress Bar

<!-- Determinate -->
<div class="tui-progress">
    <span style="width: 25%"></span>
</div>

<!-- Indeterminate -->
<div class="tui-progress">
    <span class="tui-indeterminate"></span>
</div>

CSS Classes

Class	Description
`.tui-divider`	Create a white bottom divider
`.tui-black-divider`	Create a black bottom divider
`.tui-no-shadow`	Remove the shadow
`.tui-no-padding`	Remove padding
`.tui-shadow`	Create a shadow in the element
`.tui-white-bg`	Used in html tag to create a white 168 dot background
`.tui-blue-bg`	Used in html tag to create a blue 168 dot background
`.left`	Quick left float
`.right`	Quick right float
`.inline`	Quick inline display
`.block`	Quick block display
`.tui-shortcut`	Used in lists to put some text like shortcuts on the right side of the main text
`.tui-content`	Put a default padding in the container
`.tui-nav`	Create a navbar
`.tui-nav-fixed`	Change the navbar to a fixed position
`.tui-statusbar`	Create a status bar
`.tui-statusbar-divider`	Put a vertical divider in the status bar
`.tui-input`	Create a TUI theme input like inputs, selects, textareas...
`.tui-button`	Create a TUI button. It can be used to a, buttons, input[type="button"]
`.tui-panel`	Create a TUI panel
`.tui-window`	Create a TUI window
`.tui-window-fieldset`	Put the border for the TUI window
`.tui-input-fieldset`	Used to create a container for the inputs like checkboxes and radios
`.tui-border-solid`	Change the border like fieldset borders to a solid border
`.tui-fieldset-button`	Create a action button in the fieldset like buttons to close, minimize, maximize...
`.tui-fieldset-button-left`	Change the position of the fieldset button to the left side
`.tui-fieldset-statusbar`	Create a bottom status bar in the fieldset
`.tui-checkbox`	Create TUI checkbox
`.tui-radio`	Create TUI radio
`.tui-progress`	Create a TUI progress bar
`.tui-indeterminate`	Set the progress bar to indeterminate property
`.tui-dropdown`	Create a menu dropdown. It can be used to the navbar itens, buttons...
`.tui-dropdown-content`	The content that will be displayed for the dropdown
`.tui-sidenav`	Create a left sidenav. To active, just move the cursor for the left side of the screen
`.tui-table`	Create a table
`.tui-table-hover`	Add an hover effect for the table rows
`.tui-textarea`	Create a textarea without background
`.tui-clock`	Create a clock space in the navbar

CSS Colors

Colors	168 Value	255 Value
`black`	`rgb(0, 0, 0)`	`rgb(0, 0, 0)`
`blue`	`rgb(0, 0, 168)`	`rgb(0, 0, 255)`
`green`	`rgb(0, 168, 0)`	`rgb(0, 255, 0)`
`cyan`	`rgb(0, 168, 168)`	`rgb(0, 255, 255)`
`red`	`rgb(168, 0, 0)`	`rgb(255, 0, 0)`
`purple`	`rgb(168, 0, 168)`	`rgb(255, 0, 255)`
`yellow`	`rgb(168, 168, 0)`	`rgb(255, 255, 0)`
`white`	`rgb(168, 168, 168)`	`rgb(255, 255, 255)`

CSS Color Classes

Class	Description
`.<color>-168`	Change the background color to a specified color name with value 168
`.<color>-255`	Change the background color to a specified color name with value 255
`.<color>-168-text`	Change the foreground color to a specified color name with value 168
`.<color>-255-text`	Change the foreground color to a specified color name with value 255
`.<color>-168-border`	Change the border color to a specified color name with value 168
`.<color>-255-border`	Change the border color to a specified color name with value 255
`.<color>-168-hover`	Change the background color to a specified color name with value 168 on mouse hover
`.<color>-255-hover`	Change the background color to a specified color name with value 255 on mouse hover
`.<color>-168-text-hover`	Change the foreground color to a specified color name with value 168 on mouse hover
`.<color>-255-text-hover`	Change the foreground color to a specified color name with value 255 on mouse hover

README.md

TuiCss