151 lines
6.8 KiB
Markdown
151 lines
6.8 KiB
Markdown
# 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)
|