diff --git a/README.md b/README.md index 0fbe37b..14e34ea 100644 --- a/README.md +++ b/README.md @@ -1,328 +1,9 @@ # TuiCss -#### NOTE: This doc is out-of-date of master and corresponds to the v0.0.1-alpha release. It will be moved to repository wiki. -Text-based user interface CSS framework +### 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 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 Turbo Vision Framework 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! -![TuiCss](https://image.ibb.co/gdAYN9/tuiCSS.png) + -## 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: - -```html - -``` - -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 - - -```html - -``` - -### Navbar Menu - - -```html -
  • - File -
    - -
    -
    • -``` - -### Sidenav - - -```html - -``` - -### Window - - -```html -
    -
    - Window - - ... -
    -
    -``` - -### Fieldset Status Bar - - -```html -
    -
    - ... -
    Text format: UTF-8
    - ... -
    -
    -``` - -### Buttons - - -```html -button - -``` - -### Status Bar - - -```html -
    - -
    -``` - -### Menu List - - -```html -
    -
    - -
    -
    -``` - -### Panel - - -```html -
    - ... -
    -``` - -### Inputs - - -```html - - - - - - - - - - - - - - - - - -
    - Radios - - -
    - - - -``` - -### Window Textarea - - -```html -
    -
    - FILE.C - - - -
    -
    -``` - -### Table - - -```html - - - - - - - - - - - - - - - -
    NameSizeMTime
    /.mc1024Apr 24 01:24
    -``` - -### Progress Bar - - -```html - -
    - -
    - - -
    - -
    -``` - -## 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 | -| --- | --- | -| `.-168` | Change the background color to a specified color name with value 168 | -| `.-255` | Change the background color to a specified color name with value 255 | -| `.-168-text` | Change the foreground color to a specified color name with value 168 | -| `.-255-text` | Change the foreground color to a specified color name with value 255 | -| `.-168-border` | Change the border color to a specified color name with value 168 | -| `.-255-border` | Change the border color to a specified color name with value 255 | -| `.-168-hover` | Change the background color to a specified color name with value 168 on mouse hover | -| `.-255-hover` | Change the background color to a specified color name with value 255 on mouse hover | -| `.-168-text-hover` | Change the foreground color to a specified color name with value 168 on mouse hover | -| `.-255-text-hover` | Change the foreground color to a specified color name with value 255 on mouse hover | - -## Credit -TuiCss Framework © Copyright 2018
    -by Vinícius Reif Biavatti
    -VBFoundation +### Documentation +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.