# The BotSym CSS

BotSym css created by [teascade][teascade] and was originally created for a specific game project 
by [teascade][teascade] and [neon][neon] that in the end never saw the light of day. It is a small CSS library
that closely resembles a retro terminal-ey look.

- [How to use it?](#how-to-use-it)
  - [`Navbars`](#navbars)
  - [`Boxes`](#boxes)
  - [`Lists`](#lists)
  - [`Forms`](#forms)
  - [Other helper-classes](#other-helper-classes)
- [License](#license)

## How to use it?
Just include it in your html file with
```html
<link type="text/css" rel="stylesheet" href="style.css" />
```
and you should be fine on most part. There are some exceptions though, which means some things must be done specifically, and there are some styling-classes that you can use.

Basic understanding of HTML and CSS is required.

What isn't covered by these subtitles may work by using the elements normally. Such styled elements include
- `a`-tag (links)
- `li`-tag (lists)
- `b`-tag (bold)
- `i`-tag (italics)
- `hr`-tag (horizontal line)
- `p`-tag (paragraph)

**Do note:** It is **crucial** that you do not use any `h`-tags like `h1` as they do not conform to the text-based aesthetic.

If you find this CSS lacking you may edit it or create your own, but if you wish to retain a similar look, it is desirable that you keep our main philosophies as a focus:
- Priorize text-alignment first.
- Could I do this in ncurses in a real terminal? If not, don't do it.
- Preferably stay in the color-scheme set by the current CSS

If you do find yourself editing the CSS or creating your own you are always welcomed to commit your changes and they may be included in the official BotSym CSS.


### `Navbars`
![navbar](images/navbar.png)  
To create navbars, or "file menus", create a `nav`-element, inside that create a list (`li`-element, inside which each list-element is an `ul`-element). This would create a navbar with simple buttons.  
To add a submenu (shown in the image), you need to add `tabindex="0"` to the `ul`-element with the submenu (so it can be focused), `list-symbol`-class (so it'll have that small arrow to the right of it) and lastly a new list inside the `ul`-element after the text. After this the html should look a bit like this:
```html
<nav>
  <li>
    <ul>BOTSYM.exe</ul>
    <ul tabindex="0" class="list-symbol">File
      <li>
        <ul>Save</ul>
        <ul>Save As</ul>
        <ul>Exit</ul>
      </li>
    </ul>
  </li>
</nav>
```

### `Boxes`
![box](images/box.png)  
To create a `box` simply make a `div`-element with `box`-class. There are however a few helper classes used with boxes that are important to know. All of these helper classes can be added right after the `box`-class, ie. `class="box blue"`

- `white`, `blue`, `black`  
  These are color variants for the boxes.
- `width-x`
  This is a helper-class that can help limit the width of the box, which would otherwise take up the whole screen. `x` means the width in character-widths. The available widths are currently `5`, `10`, `15`, `20`, `25`, `50`, `100`, `150`, `200`, and `250`.
- `inline`
  This simply makes the box an inline-block. However to line-up boxes properly, you need to remove whitespace between the inline boxes, otherwise there will emerge whitespace between the boxes which ruins the alignment.

The HTML in the image is as such
```html
<div class="box inline width-50">
  Hello! This is a black box!
</div
><div class="box inline white width-50">
  White box
</div>
<div class="box blue width-100">
  Blue! box
</div>
```

### `Lists`
![box](images/list.png)  
There are two kinds of lists in this style. The regular list and a button list. Both lists are created exactly like regular HTML lists, except for the button list you must add a class `button-list`. You can also make some or all of the buttons in this list into links by wrapping the text of the list-element in an `a`-tag.

This example also uses [boxes](#boxes):
```html
<div class="box white inline width-50">
  <p><b>Regular list:</b></p>
  <li>
    <ul>List element 1</ul>
    <ul>List element 2</ul>
    <ul>List element 3</ul>
  </li>
</div
><div class="box white inline width-50">
  <p><b>Button list:</b></p>
  <li class="button-list">
    <ul><a href="linked button!">List button 1</a></ul>
    <ul>List button 2</ul>
    <ul>List button 3</ul>
  </li>
</div>
```

### `Forms`
![box](images/forms.png)  
Forms are somewhat unfinished, but everything essential should be covered, like `text`-`inputs`, `radio`-, `checkboxes`, and `buttons`.

Forms are a bit weirder to implement and it's different for all of them.
- `textfield`  
  For textfield you must create a `label`-element in which you create the `<input type="text">`-element. Then add an `#id` to the `input` and add `for="id"` and a `textinput`-class to the label.
- `radio` or `checkbox`  
  Create an `<input type="checkbox">` or `<input type="radio"` (whichever you need), then give it an `id="id"`. Then **right after the input** add a `label`-element and for it a `for="id"`. After that you need to add either `checkbox-right` and/or `checkbox-left` to the label if you're creating a checbox or `radio-right` and/or `radio-left` to the label if you're creating a radio-button. This determines on which side of the label-text the checkbox/radio is going to be.
- `button`  
  A button is created regularly like a `button`-element is created.

This example also uses [boxes](#boxes) and [padding and no-select -helper-class](#other-helper-classes):
```html
<div class="box white width-100">
  <div class="padding-1">
    <b>A test form!</b>
    <p>Name: <label for="name" class="textinput"><input type="text" id="name"></label></p>
    <p><input type="checkbox" id="checkbox"><label class="checkbox-right no-select" for="checkbox"> Yes or no? </label></p>
    <p><input type="radio" id="radio1" name="radio"><label for="radio1" class="radio-right no-select"> Radiobutton 1 </label></p>
    <p><input type="radio" id="radio2" name="radio"><label for="radio2" class="radio-right no-select"> Radiobutton 2 </label></p>
    <p><button name="button" label="button">Button</button></p>
  </div>
</div>
```

### Other helper-classes

- `padding-x`
  A class that simply adds padding for an area. Intended to use in a div immediately inside a `box`. Existing paddings are `1`, `2`, `3`, `4`, and `5`.
- `space-x`
  A class that simply adds a "line-break" of `x` lines. Intended to use in it's own div. Available spaces are `1`, `2`, `3`, `4`, and `5`.
- `no-select`
  A class that prevents the area from being selected by the user. Convinient for buttons and clickable things.

## License
The BotSym CSS repository is licensed under the terms of [GNU GPLv3][gplv3] license. See more at [LICENSE](LICENSE) or [tl;dr legal][tldrgplv3]

[teascade]: https://teascade.net/
[neon]: https://neon.moe/
[gplv3]: https://gnu.org/licenses/gpl-3.0.html
[tldrgplv3]: https://tldrlegal.com/license/gnu-general-public-license-v3-(gpl-3)