Conheça o Framework CSS que deixa seu site no estilo MS-DOS

TuiCss é uma biblioteca voltada para a criação de aplicações web utilizando uma interface baseada em tabela ASCII, como os antigos aplicativos MS-DOS.

Este tipo de interface é muito elegível devido às cores de ultra-contraste usadas e aos efeitos reduzidos usados nos componentes da vista.

A base deste projeto é Turbo Vision Framework, mas alguns outros frameworks foram verificados também para introduzir alguns recursos ao TuiCss, como curses, ncurses, Newt, etc

Instalação

Você pode usar o TuiCss via gerenciador de pacotes javascript, exemplo usando o npm:

sudo npm --global install tuicss

Ou fazer o download e linkar localmente:

wget https://codeload.github.com/vinibiavatti1/TuiCss/zip/refs/heads/master
unzip TuiCss-master.zip
cd unzip TuiCss-master
vim index.html

E adicionar o css e o javascript:

<link rel="stylesheet" href="dist/tuicss.min.css"/>
<script src="dist/tuicss.min.js"></script>

Utilização

Salve esse exemplo index.html na sua máquina e veja alguns widgets que podem ser implementados:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>TUI.css</title>
      <link rel="stylesheet" href="dist/tuicss.min.css"/>
      <script src="dist/tuicss.min.js"></script>
      <style type="text/css" media="all">
         button, input { margin-top: 20px; } 
      </style>
   </head>
   <body class="tui-bg-blue-black">
      <nav class="tui-nav">
         <ul>
            <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">N</span>ew</a></li>
                  </ul>
               </div>
            </li>
         </ul>
      </nav>
      <br>
      <div class="buttons">
         <!-- Default -->
         <button class="tui-button">Button</button>
         <br>
         <!-- Input -->
         <input type="button" class="tui-button" value="Input" />
         <br><br>
         <!-- Anchor -->
         <a href="#!" class="tui-button">Anchor</a>
         <br>
         <!-- Custom Color -->
         <button class="tui-button orange-168 white-text">Custom</button>
         <br>
         <!-- Disabled -->
         <button class="tui-button red-168 white-text disabled" disabled>Disabled</button>
         <br>
         <!-- Focused -->
         <button class="tui-button" autofocus>Focused</button>
         <br>
      </div>
      <br>
      <div class="progress-bar">
         <div class="tui-window">
            <fieldset class="tui-fieldset tui-border-double">
               <legend>Carregando ...</legend>
               <!-- Indeterminate --> 
               <div class="tui-progress-bar">
                  <span class="tui-indeterminate"></span>
               </div>
            </fieldset>
         </div>
      </div>
   </body>
</html>