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
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:
- 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`
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>
<ultabindex="0"class="list-symbol">File
<li>
<ul>Save</ul>
<ul>Save As</ul>
<ul>Exit</ul>
</li>
</ul>
</li>
</nav>
```
### `Boxes`
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
<divclass="box inline width-50">
Hello! This is a black box!
</div
><divclass="box inline white width-50">
White box
</div>
<divclass="box blue width-100">
Blue! box
</div>
```
### `Lists`
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.
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.
