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="box wf-100">...</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/undread email notifications:

<i class="fa fa-lg infoIcon fa-envelope">
    <span class="badge">333</span>
</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

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 befor an input field.

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

Section

A section is a container for information that can and should be grouped together.

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

<section class="box 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.