mirror of
https://github.com/Karaka-Management/Developer-Guide.git
synced 2026-01-17 15:08:42 +00:00
146 lines
3.5 KiB
Markdown
146 lines
3.5 KiB
Markdown
# Styles and Layout
|
|
|
|
## Css
|
|
|
|
This project only supports scss and css. All css files need to be provided with a scss file which will be processed for every build. The css file has to be minimized, optimized and compressed as `.gz`. This means there is at least one scss file (multiple if you are combining/importing multiple scss files and creating one output css file), one css file and one compressed `.gz` file. The file name has to be lower case and the same for every file and only the extension is different.
|
|
|
|
## Grid/Flexbox
|
|
|
|
Flexboxes are preferred for all content containers.
|
|
|
|
```html
|
|
<div class="row">
|
|
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-1">
|
|
<section class="portlet">...</section>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
Available sizes are `xs-*`, `sm-*`, `md-*`, `lg-*` with a grid ranging from `1-12`.
|
|
|
|
## Sizes
|
|
|
|
### Container
|
|
|
|
A container (e.g. section, div, table, etc) can be sized by using `.wf-*` classes. Available sizes for `*` are `100`, `80`, `75`, `66`, `50`, `33`, `25`, `20`.
|
|
|
|
## Icons
|
|
|
|
This project uses font-awesome for its icons, the following example allows for stacked icons e.g. creating new/unread email notifications:
|
|
|
|
```html
|
|
<i class="fa fa-lg infoIcon fa-envelope">
|
|
<span class="badge">333</span>
|
|
</i>
|
|
```
|
|
|
|
## Form Elements
|
|
|
|
### Input with button
|
|
|
|
The following snippet creates a 100% input with a button next to it.
|
|
|
|
```html
|
|
<div class="ipt-wrap">
|
|
<div class="ipt-first"><input type="text" id="iID"></div>
|
|
<div class="ipt-second"><button>Text</button></div>
|
|
</div>
|
|
```
|
|
|
|
### Input with dictionary
|
|
|
|
The following snippet creates a dictionary button (e.g. for opening a popup window to search for accounts/groups etc) right before an input field.
|
|
|
|
```html
|
|
<span class="input">
|
|
<button type="button"><i class="fa fa-book"></i></button>
|
|
<input type="text">
|
|
</span>
|
|
```
|
|
|
|
### Checkbox
|
|
|
|
The following snippet creates a checkbox.
|
|
|
|
```html
|
|
<label class="checkbox" for="iID">
|
|
<input id="iID" type="checkbox" name="name" value="1">
|
|
<span class="checkmark"></span>
|
|
Text
|
|
</label>
|
|
```
|
|
|
|
### Radio
|
|
|
|
The following snippet creates a checkbox.
|
|
|
|
```html
|
|
<label class="checkbox" for="iID">
|
|
<input id="iID" type="radio" name="name" value="1">
|
|
<span class="checkmark"></span>
|
|
Text
|
|
</label
|
|
|
|
## Section
|
|
|
|
A section is a container for information that can and should be grouped together.
|
|
|
|
```html
|
|
<section class="portlet">
|
|
<div class="portlet-head">Title</div>
|
|
<div class="portlet-body">
|
|
...
|
|
</div>
|
|
<div class="portlet-foot">Footer</div>
|
|
</section>
|
|
```
|
|
|
|
Additional coloring of sections can be achieved by adding a coloring class.
|
|
|
|
```html
|
|
<section class="portlet green">
|
|
...
|
|
</section>
|
|
```
|
|
|
|
## Tabs
|
|
|
|
Tabs are a useful tool in order to display more information on one page.
|
|
|
|
```html
|
|
<div class="tabview tab-2">
|
|
<ul class="tab-links">
|
|
<li><label for="tab-1">Tab Title 1</label>
|
|
<li><label for="tab-2">Tab Title 2</label>
|
|
<li><label for="tab-*">...</label>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<input type="radio" id="tab-1" name="tabular-2" checked>
|
|
<div class="tab">
|
|
... Tab content ...
|
|
</div>
|
|
<input type="radio" id="tab-2" name="tabular-2" checked>
|
|
<div class="tab">
|
|
... Tab content ...
|
|
</div>
|
|
<input type="radio" id="tab-*" name="tabular-2" checked>
|
|
<div class="tab">
|
|
... Tab content ...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
## Tables
|
|
|
|
## Lists
|
|
|
|
## Accordion
|
|
|
|
## Breadcrumbs
|
|
|
|
## Badges/Tags
|
|
|
|
## Examples
|
|
|
|
An example of all styles can be found in the tests called `StandardElements.htm`. |