Created: 2018-09-12 11:12
Updated: 2019-02-28 03:01

README.md

TuiCss

Text-based user interface CSS framework

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.

TuiCss

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.

Navbar

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

Navbar Menu

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

Menu List

<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

Credit

TuiCss Framework (c) Copyright 2018
by Vinícius Reif Biavatti
VBFoundation

Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more