Jingga/Developer-Guide
1
0
Fork 0
mirror of https://github.com/Karaka-Management/Developer-Guide.git synced 2026-02-09 08:58:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add styles docs

Browse Source
This commit is contained in:
Dennis Eichhorn 2017-11-22 16:46:43 +01:00
parent cdb490f5b3
commit 6f38c6c5e1
1 changed files with 23 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/styles_and_layout.md
View File

@ -34,6 +34,10 @@ This project uses font-awesome for its icons, the following example allows for s
</i> </i>
``` ```
## Colors
Coloring can be added to many elements such as icons, sections etc. Available colors are `lightgreen`, `green`, `darkgreen`, `lightblue`, `blue`, `darkblue`, `lightred`, `red`, `darkred`, `lightyellow`, `yellow`, `lightorange`, `orange`, `white`, `lightgrey`, `grey`, `black`, `lightpurple`, `purple`, `darkpurple`, `lightteal`, `teal`, `darkteal`, `lightpink`, `pink`.
## Form Elements ## Form Elements
### Input with button ### Input with button
@ -60,6 +64,25 @@ The following snippet creates a dictionary button (e.g. for opening a popup wind
## Section ## Section
A section is a container for information that can and should be grouped together.
```html
<section class="box wf-100">
<h1>Title</h1>
<div class="inner">
...
</div>
</section>
```
Additional coloring of sections can be achieved by adding a coloring class.
```html
<section class="box green">
...
</section>
```
## Tabs ## Tabs
## Tables ## Tables