Developer-Guide/frontend/styles_and_layout.md

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.

<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:

<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.

<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.

<span class="input">
    <button type="button"><i class="fa fa-book"></i></button>
    <input type="text">
</span>

Checkbox

The following snippet creates a checkbox.

<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.

<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.

<section class="portlet green">
    ...
</section>

Tabs

Tabs are a useful tool in order to display more information on one page.

<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.