# The BotSym CSS The BotSym is a network existing in a universe created by [neon][neon] and [teascade][teascade]. It's purpose is to act as a mirror between that universe and ours, and as the "internet" of the BotSym universe. - [How to use it?](#how-to-use-it) - [`Navbars`](#navbars) - [`Boxes`](#boxes) - [`Lists`](#lists) - [`Forms`](#forms) - [Other helper-classes](#other-helper-classes) - [Legal stuff?](#legal-stuff) ## How to use it? Just include it in your html file with ```html ``` 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 of the universe. If you find this CSS lacking you may edit it or create your own, but if you wish to retain in-universe, 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 ``` ### `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
Regular list:
Button list:
Name: