Skip to content

Commit 5d2c2d9

Browse files
vinireifvinireif
committed
Merge branch 'master' of https://github.com/vinibiavatti1/TuiCss 
2 parents 1a8bbc7 + 5411a40 commit 5d2c2d9

File tree

1 file changed

+5
-324
lines changed

1 file changed

+5
-324
lines changed

‎README.md

+5-324
Original file line numberDiff line numberDiff line change
@@ -1,328 +1,9 @@
11
# TuiCss
2-
#### <b>NOTE:</b> This doc is out-of-date of master and corresponds to the v0.0.1-alpha release. It will be moved to repository wiki.
3-
Text-based user interface CSS framework
2+
### Text-based user interface CSS framework
43

5-
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 <a href="https://en.wikipedia.org/wiki/Turbo_Vision">Turbo Vision UI Framework</a> and other applications based on TUI.
4+
TuiCss is a framework focused to create web applications using an interface based in ASCII table, like MS-DOS applications. This kind of interface is very eligible because the ultra-contrast colors used and the less effects of the elements. The main framework thats is following to develop TuiCss is <a href="https://en.wikipedia.org/wiki/Turbo_Vision">Turbo Vision Framework</a> with some techniques with [box-drawing characters](https://en.wikipedia.org/wiki/Box-drawing_character), but some others frameworks were checked too, like [curses](https://en.wikipedia.org/wiki/Curses_(programming_library)), [ncurses](https://en.wikipedia.org/wiki/Ncurses), [Newt](https://en.wikipedia.org/wiki/Newt_(programming_library)), etc. Check the examples page in the wiki to see some creations!
65

7-
![TuiCss](https://image.ibb.co/gdAYN9/tuiCSS.png)
6+
<img src="https://i.ibb.co/zhJMy1h/Tui-Css-home.png" width="600">
87

9-
## Getting Started
10-
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:
11-
12-
```html
13-
<link rel="stylesheet" href="TuiCss/tuicss.css" />
14-
```
15-
16-
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.
17-
18-
## Components
19-
20-
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.
21-
22-
### Navbar
23-
<img src="https://image.ibb.co/fACzUp/tui_nav.png"/>
24-
25-
```html
26-
<nav class="tui-nav tui-nav-fixed">
27-
<span class="tui-clock" id="clock"></span>
28-
<ul>
29-
<li>
30-
...
31-
</li>
32-
</ul>
33-
</nav>
34-
```
35-
36-
### Navbar Menu
37-
<img src="https://image.ibb.co/kv0Tpp/tui_menu.png"/>
38-
39-
```html
40-
<li class="tui-dropdown">
41-
<span class="red-168-text">F</span>ile
42-
<div class="tui-dropdown-content">
43-
<ul>
44-
<li>
45-
<a href="#!">
46-
<span class="red-168-text">O</span>pen
47-
<span class="tui-shortcut">ctrl+o</span>
48-
</a>
49-
</li>
50-
<div class="tui-black-divider"></div>
51-
<li>
52-
<a href="#!">
53-
<span class="red-168-text">Q</span>uit
54-
<span class="tui-shortcut">F4</span>
55-
</a>
56-
</li>
57-
</ul>
58-
</div>
59-
</li>
60-
```
61-
62-
### Sidenav
63-
<img src="https://image.ibb.co/ci06aU/tui_sidenav.png"/>
64-
65-
```html
66-
<nav class="tui-sidenav">
67-
<ul>
68-
<li>
69-
<a href="#!">Open</a>
70-
...
71-
</li>
72-
</ul>
73-
</nav>
74-
```
75-
76-
### Window
77-
<img src="https://image.ibb.co/jcRMs9/tui_window.png"/>
78-
79-
```html
80-
<div class="tui-window">
81-
<fieldset class="tui-window-fieldset">
82-
<legend>Window</legend>
83-
<button class="tui-fieldset-button"><span class="green-255-text">■</span></button>
84-
...
85-
</fieldset>
86-
</div>
87-
```
88-
89-
### Fieldset Status Bar
90-
<img src="https://image.ibb.co/grD4ep/tui_fieldset_statusbar.png"/>
91-
92-
```html
93-
<div class="tui-window">
94-
<fieldset class="tui-window-fieldset">
95-
...
96-
<div class="tui-fieldset-statusbar">Text format: UTF-8</div>
97-
...
98-
</fieldset>
99-
</div>
100-
```
101-
102-
### Buttons
103-
<img src="https://image.ibb.co/dqaLkU/tui_buttons.png" />
104-
105-
```html
106-
<a href="#!" class="tui-button">button</a>
107-
<button class="tui-button">button</button>
108-
```
109-
110-
### Status Bar
111-
<img src="https://image.ibb.co/egTHX9/tui_statusbar.png" />
112-
113-
```html
114-
<div class="tui-statusbar">
115-
<ul>
116-
<li><a href="#!"><span class="red-168-text">F1</span> Help</a></li>
117-
<li><a href="#!"><span class="red-168-text">F2</span> Shell</a></li>
118-
<li><a href="#!"><span class="red-168-text">F3</span> Open</a></li>
119-
<span class="tui-statusbar-divider"></span>
120-
<li><a href="#!"><span class="red-168-text">F10</span> Exit</a></li>
121-
</ul>
122-
</div>
123-
```
124-
125-
### Menu List
126-
<img src="https://image.ibb.co/ihphX9/tui_menu_list.png" />
127-
128-
```html
129-
<div class="tui-window">
130-
<fieldset class="tui-window-fieldset tui-window-fieldset-no-legend tui-border-solid">
131-
<ul>
132-
<li class="cyan-255-hover black-255-text-hover">
133-
<span class="tui-shortcut">A</span>
134-
<span>Register Tables</span>
135-
</li>
136-
<li class="cyan-255-hover black-255-text-hover">
137-
<span class="tui-shortcut">B</span>
138-
<span>Quit</span>
139-
</li>
140-
</ul>
141-
</fieldset>
142-
</div>
143-
```
144-
145-
### Panel
146-
<img src="https://image.ibb.co/dapGs9/tui_panel.png" />
147-
148-
```html
149-
<div class="tui-panel">
150-
...
151-
</div>
152-
```
153-
154-
### Inputs
155-
<img src="https://image.ibb.co/fCRFKp/tui_inputs.png" />
156-
157-
```html
158-
<!-- Input -->
159-
<input class="tui-input" type="text" />
160-
<input class="tui-input" type="number" />
161-
<input class="tui-input" type="email" />
162-
<input class="tui-input" type="password" />
163-
<input class="tui-input" type="color" />
164-
<input class="tui-input" type="date" />
165-
<input class="tui-input" type="datetime-local" />
166-
167-
<!-- Select -->
168-
<select class="tui-input">
169-
<option selected>-- SELECT --</option>
170-
<option>Option 1</option>
171-
<option>Option 2</option>
172-
<option>Option 3</option>
173-
</select>
174-
<select class="tui-input" multiple>
175-
<option>Option 1</option>
176-
<option>Option 2</option>
177-
<option>Option 3</option>
178-
</select>
179-
180-
<!-- Checkbox -->
181-
<label class="tui-checkbox">
182-
Checkbox
183-
<input type="checkbox"/>
184-
<span></span>
185-
</label>
186-
187-
<!-- Radio -->
188-
<fieldset class="tui-input-fieldset">
189-
<legend>Radios</legend>
190-
<label class="tui-radio">
191-
Option 1
192-
<input type="radio" name="radio" checked />
193-
<span></span>
194-
</label>
195-
<label class="tui-radio">
196-
Option 2
197-
<input type="radio" name="radio" />
198-
<span></span>
199-
</label>
200-
</fieldset>
201-
202-
<!-- Textarea -->
203-
<textarea class="tui-input"></textarea>
204-
```
205-
206-
### Window Textarea
207-
<img src="https://image.ibb.co/gzkxX9/tui_win_textarea.png" />
208-
209-
```html
210-
<div class="tui-window">
211-
<fieldset class="tui-window-fieldset">
212-
<legend align="center">FILE.C</legend>
213-
<button class="tui-fieldset-button"><span class="green-255-text">↑</span></button>
214-
<button class="tui-fieldset-button tui-fieldset-button-left"><span class="green-255-text">■</span></button>
215-
<textarea class="tui-textarea"></textarea>
216-
</fieldset>
217-
</div>
218-
```
219-
220-
### Table
221-
<img src="https://image.ibb.co/cN8nzp/tui_table.png" />
222-
223-
```html
224-
<table class="tui-table tui-table-hover">
225-
<thead>
226-
<tr>
227-
<td>Name</td>
228-
<td>Size</td>
229-
<td>MTime</td>
230-
</tr>
231-
</thead>
232-
<tbody>
233-
<tr>
234-
<td>/.mc</td>
235-
<td>1024</td>
236-
<td>Apr 24 01:24</td>
237-
</tr>
238-
</tbody>
239-
</table>
240-
```
241-
242-
### Progress Bar
243-
<img src="https://image.ibb.co/moYRs9/tui_progress.png" />
244-
245-
```html
246-
<!-- Determinate -->
247-
<div class="tui-progress">
248-
<span style="width: 25%"></span>
249-
</div>
250-
251-
<!-- Indeterminate -->
252-
<div class="tui-progress">
253-
<span class="tui-indeterminate"></span>
254-
</div>
255-
```
256-
257-
## CSS Classes
258-
| Class | Description |
259-
| --- | --- |
260-
| `.tui-divider` | Create a white bottom divider |
261-
| `.tui-black-divider` | Create a black bottom divider |
262-
| `.tui-no-shadow` | Remove the shadow |
263-
| `.tui-no-padding` | Remove padding |
264-
| `.tui-shadow` | Create a shadow in the element |
265-
| `.tui-white-bg` | Used in html tag to create a white 168 dot background |
266-
| `.tui-blue-bg` | Used in html tag to create a blue 168 dot background |
267-
| `.left` | Quick left float |
268-
| `.right` | Quick right float |
269-
| `.inline` | Quick inline display |
270-
| `.block` | Quick block display |
271-
| `.tui-shortcut` | Used in lists to put some text like shortcuts on the right side of the main text |
272-
| `.tui-content` | Put a default padding in the container |
273-
| `.tui-nav` | Create a navbar |
274-
| `.tui-nav-fixed` | Change the navbar to a fixed position |
275-
| `.tui-statusbar` | Create a status bar |
276-
| `.tui-statusbar-divider` | Put a vertical divider in the status bar |
277-
| `.tui-input` | Create a TUI theme input like inputs, selects, textareas... |
278-
| `.tui-button` | Create a TUI button. It can be used to a, buttons, input[type="button"] |
279-
| `.tui-panel` | Create a TUI panel |
280-
| `.tui-window` | Create a TUI window |
281-
| `.tui-window-fieldset` | Put the border for the TUI window |
282-
| `.tui-input-fieldset` | Used to create a container for the inputs like checkboxes and radios |
283-
| `.tui-border-solid` | Change the border like fieldset borders to a solid border |
284-
| `.tui-fieldset-button` | Create a action button in the fieldset like buttons to close, minimize, maximize... |
285-
| `.tui-fieldset-button-left` | Change the position of the fieldset button to the left side |
286-
| `.tui-fieldset-statusbar` | Create a bottom status bar in the fieldset |
287-
| `.tui-checkbox` | Create TUI checkbox |
288-
| `.tui-radio` | Create TUI radio |
289-
| `.tui-progress` | Create a TUI progress bar |
290-
| `.tui-indeterminate` | Set the progress bar to indeterminate property |
291-
| `.tui-dropdown` | Create a menu dropdown. It can be used to the navbar itens, buttons... |
292-
| `.tui-dropdown-content` | The content that will be displayed for the dropdown |
293-
| `.tui-sidenav` | Create a left sidenav. To active, just move the cursor for the left side of the screen |
294-
| `.tui-table` | Create a table |
295-
| `.tui-table-hover` | Add an hover effect for the table rows |
296-
| `.tui-textarea` | Create a textarea without background |
297-
| `.tui-clock` | Create a clock space in the navbar |
298-
299-
## CSS Colors
300-
| Colors | 168 Value | 255 Value |
301-
| --- | --- | --- |
302-
| `black` | `rgb(0, 0, 0)` | `rgb(0, 0, 0)` |
303-
| `blue` | `rgb(0, 0, 168)` | `rgb(0, 0, 255)` |
304-
| `green` | `rgb(0, 168, 0)` | `rgb(0, 255, 0)` |
305-
| `cyan` | `rgb(0, 168, 168)` | `rgb(0, 255, 255)` |
306-
| `red` | `rgb(168, 0, 0)` | `rgb(255, 0, 0)` |
307-
| `purple` | `rgb(168, 0, 168)` | `rgb(255, 0, 255)` |
308-
| `yellow` | `rgb(168, 168, 0)` | `rgb(255, 255, 0)` |
309-
| `white` |`rgb(168, 168, 168)` | `rgb(255, 255, 255)` |
310-
311-
## CSS Color Classes
312-
| Class | Description |
313-
| --- | --- |
314-
| `.<color>-168` | Change the background color to a specified color name with value 168 |
315-
| `.<color>-255` | Change the background color to a specified color name with value 255 |
316-
| `.<color>-168-text` | Change the foreground color to a specified color name with value 168 |
317-
| `.<color>-255-text` | Change the foreground color to a specified color name with value 255 |
318-
| `.<color>-168-border` | Change the border color to a specified color name with value 168 |
319-
| `.<color>-255-border` | Change the border color to a specified color name with value 255 |
320-
| `.<color>-168-hover` | Change the background color to a specified color name with value 168 on mouse hover |
321-
| `.<color>-255-hover` | Change the background color to a specified color name with value 255 on mouse hover |
322-
| `.<color>-168-text-hover` | Change the foreground color to a specified color name with value 168 on mouse hover |
323-
| `.<color>-255-text-hover` | Change the foreground color to a specified color name with value 255 on mouse hover |
324-
325-
## Credit
326-
TuiCss Framework &copy; Copyright 2018<br>
327-
by Vinícius Reif Biavatti<br>
328-
VBFoundation
8+
### Documentation
9+
Check the [repository wiki](https://github.com/vinibiavatti1/TuiCss/wiki) to access the documentation, getting started, components index, examples, styles, or to know how to contribute for this project.

0 commit comments

Comments
 (0)