Custom Templates

The Online Styleguide is a uniformed compendium for project managers, web publisher, designers or developers of how to maintain, update or further develop a website. The following browsers are supported:
Google Chrome*, Firefox*, Safari, Internet Explorer 8+ * latest 3 iterations

Homepage

1.01 Startseite dev

1.02 Inhalt dev

1.03 Kontakt dev

 

1.04 Neuigkeiten dev

1.05 Neuigkeiten Detail dev

 

1.06 Produktseite dev

1.07a Produkt Finder dev

1.07b Produkte A - Z dev

1.07c Regionale Suche dev

 

1.08 Anbieter in der Region dev

1.09 Region Seller dev

 

1.10 Suchen dev

 

 

Shop

2.01 Homepage

2.02 Products

2.03 Checkout - Step 1

2.04 Checkout - Step 2

2.05 Checkout - Step 3

Development

you can enable the following params by appending the name to the url

?debug=true
enables development tools

Legend

dev
template is in development and untested

outdated
template is no longer in development and is outdated

04.12.03
template is finished or updated according to the specified date

This section defines default css styling and html behaviours available through normalize.css, a library which renders all elements more consistently and in line with modern standards. The following elements can be safely used within a wysiwyg text editor.

Fonts

{tpl} Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()_+

{tpl} italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()_+

{tpl} bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()_+


Headings

h1. {tpl}

h2. {tpl}

h3. {tpl}

h4. {tpl}

h5. {tpl}
h6. {tpl}
<!-- h1 - h6 -->
<h1> ... </h1>

Text

Regular Text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Lead Text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead"> ... </p>

Legal Text

<p class="legal"> ... </p>

Text sizes

This is a paragraph text

This is a paragraph text

This is a paragraph text

This is a paragraph text

This is a paragraph text

This is a paragraph text

<p class="size-16"> ... </p>
<p class="size-18"> ... </p>
<p class="size-20"> ... </p>
<p class="size-24"> ... </p>
<p class="size-28"> ... </p>
<p class="size-32"> ... </p>

Emphasis

The anchor element
<a href="#">My text</a>
The abbr element
<abbr title="#">TXT</abbr>
The cite element
<cite>My text</cite>
The code element
<code>My text</code>
The delete element
<del>My text</del>
The definition element
<dfn>My text</dfn>
The emphasis element
<em>My text</em>
The insert element
<ins>My text</ins>
The keyboard element
<kbd>My text</kbd>
The mark element
<mark>My text</mark>
The strikethrough element
<s>My text</s>
The sample element
<samp>My text</samp>
The small element
<small>My text</small>
The span element
<span>My text</span>
The strong element
<strong>My text</strong>
The subscript element
<sub>My text</sub>
The superscript element
<sup>My text</sup>
The time element
<time>My text</time>
The underline element
<u>My text</u>
The variable element
<var>My text</var>
The wordbreak element
<wbr>My text<wbr>
my address
<address>My text</address>

Alignment

Text

Left aligned text

Center aligned text

Right aligned text

<p class="text-left">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-right">Right aligned text</p>

Images

<p><img src="#" alt="" class="image-left" /></p>
<p><img src="#" alt="" class="image-right" /></p>
<p><img src="#" alt="" class="image-responsive" /></p>

Lists

Unordered List

  • Lorem ipsum dolor
  • Consectetur adipiscing
  • Integer molestie lorem
  • Facilisis in pretium
    • Nulla volutpat aliquam
    • Phasellus iaculis
    • Purus sodales
    • Vestibulum laoreet
    • Facilisis in pretium
  • Faucibus porta lacu
  • Aenean sit amet erat
  • Eget porttitor
<ul>
    <li> ... </li>
</ul>

Ordered List

  1. Lorem ipsum dolor
  2. Consectetur adipiscing
  3. Integer molestie lorem
  4. Facilisis in pretium
    1. Nulla volutpat aliquam
    2. Phasellus iaculis
    3. Purus sodales
    4. Vestibulum laoreet
    5. Facilisis in pretium
      1. Nulla volutpat aliquam
  5. Faucibus porta lacu
  6. Aenean sit amet erat
  7. Eget porttitor
<ol>
    <li> ... </li>
</ol>

Description List

Description
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
    <dt> ... </dt>
    <dd> ... </dd>
</dl>

Others

Quotes

Government of the people, by the people, for the people, shall not perish from the Earth.

Abraham Lincoln
<blockquote>
    <p>My text</p>
    <cite>My cite</cite>
</blockquote>

Build a future where people live in harmony with nature. – We hope they succeed.

<p><q>My text</q> <cite>My cite</cite></p>

Preformatting

<div>
    <p>Sample text here...</p>
</div>
<pre>My text</pre>

Dividers


<hr />

Colors

Text

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

<p class="text-muted"> ... </p>
<p class="text-info"> ... </p>
<p class="text-success"> ... </p>
<p class="text-warning"> ... </p>
<p class="text-error"> ... </p>

Primary colors

#
#

Framework colors

#
#
#
#
#

Code view

code view allows you to look at the html source of the provided examples

disable code view

Categories

Tables us the base class .table for default styling. If not supplied, the default normalize.css behaviours will be used. To make a table responsive, you need to add an outer container with the additional class .table-responsive to forces scrollbars when a table gets to small.

Standard Table

Base table structure (caption)
Head 1 Head 2 Head 3 Head 4
Footer example
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3 Row 1 Cell 4
Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3 Row 2 Cell 4
Row 3 Cell 1 Row 3 Cell 2 Row 3 Cell 3 Row 3 Cell 4
Row 4 Cell 1 Row 4 Cell 2 Row 4 Cell 3 Row 4 Cell 4
<div class="table-responsive">
    <table class="table">
        ...
    </table>
</div>

Empty Table

Base table structure (caption)
Head 1 Head 2 Head 3 Head 4
Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3Row 1 Cell 4
Row 2 Cell 1Row 2 Cell 2Row 2 Cell 3Row 2 Cell 4
Row 3 Cell 1Row 3 Cell 2Row 3 Cell 3Row 3 Cell 4
<table class="table table-empty">
    ...
</table>

Utilities

.table-responsive – adds scrollbars on smaller screen


.align-top – sets vertical-align="top"


.align-bottom – sets vertical-align="bottom"

Code view

code view allows you to look at the html source of the provided examples

disable code view

Categories

Forms us the base class .form for default styling. If not supplied, the default normalize.css behaviours will be used. Our forms use a basic structure which is applied for all cases. We are using placeholders within the styleguide to keep the examples clean.

Structure

<form action="." method="post" class="form" role="form">
    <fieldset>
        <ol>
            <li> {placeholder} </li>
            <li> {placeholder} </li>
            <li> {placeholder} </li>
        </ol>
    </fieldset>
</form>

Alignment

Sizes
Positioning
  1.  
  2.  
  3.  
  4.  
  5.  
  6.  
<label><input type="text" class="input-text input-medium" /></label>
<label><input type="checkbox" class="input-radiocheck" /> text</label>

Types

Supported
Unsupported

Vertical Form

<form action="." method="post" class="form" role="form">
    <fieldset class="form-vertical">
        ...
    </fieldset>
</form>

Horizontal Form

<form action="." method="post" class="form" role="form">
    <fieldset class="form-horizontal">
        ...
    </fieldset>
</form>

Validation

There was an error while submitting the form:

<form action="." method="post" class="form form-error" role="form">
    <fieldset>
        <ol>
            <li class="text-error"> ... </li>
        </ol>
    </fieldset>
</form>

Buttons

  1. Anchor

  1. Submit

  1. Button

  1. Buttons Gryps

<input type="submit" class="btn" value="Input" />
<button class="btn">Button</button>
<a href="#" class="btn">Link</a>

Messages

This is a success message

This is an error message

This is an muted message

This is an info message

This is a warning message

<div class="messages text-success">
    <p> ... </p>
</div>

Add the text classes .text-muted, text-success, text-info, text-warning and text-error for custom styles.


Utilities

.input-text – sets additional input styling


.input-select – sets additional select styling


.input-radiocheck – sets additional radio and checkbox styling


.input-aligned – aligns radio/checkbox text (see cat. alignment)

Code view

code view allows you to look at the html source of the provided examples

disable code view

Categories

We are using fontastic.me as a font service to generate our fontpacks.
The fonts are saved within static/fonts/icons.* and integrated witin sass/modules/fonts.scss.

Standard Icons


  • .icon-
    info

  • .icon-
    question

  • .icon-
    warning

  • .icon-
    accept

  • .icon-
    close

  • .icon-
    arrow-top

  • .icon-
    arrow-right

  • .icon-
    arrow-bottom

  • .icon-
    arrow-left

  • .icon-
    expand

  • .icon-
    collapse

  • .icon-
    rss

  • .icon-
    facebook

  • .icon-
    twitter

  • .icon-
    google

  • .icon-
    print

  • .icon-
    download
<!-- normal icons -->
<span class="icon icon-{name}"></span>

Code view

code view allows you to look at the html source of the provided examples

disable code view

Categories

We are using the Foundation 4 grid system as our base. In addition, a 24-column setup is the default setting with a 20px gutter. The block grid is not included per default. A full documentation can be found on http://foundation.zurb.com/.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
<div class="row">
    <div class="small-8 large-8 column"></div>
    <div class="small-8 large-8 column"></div>
    <div class="small-8 large-8 column"></div>
</div>
<div class="row">
    <div class="large-16 column">
        <div class="row">
            <div class="large-6 column"></div>
            <div class="large-6 column"></div>
            <div class="large-6 column"></div>
            <div class="large-6 column"></div>
            <div class="large-6 column"></div>
            <div class="large-6 column"></div>
            <div class="large-6 column"></div>
            <div class="large-6 column"></div>
        </div>
        <div class="row">
            <div class="large-24 column"></div>
        </div>
    </div>
    <div class="large-8 column"></div>
</div>

Code view

code view allows you to look at the html source of the provided examples

disable code view

Grid Options

show full grid

There are some additional utilities such as .skip-links, .noscript and .chromeframe which might require your attention. Check base_root.html the get a grasp of their functionality and use cases.

General

Class Description
Text
.highlightadds $color-primary to text-color
.uppercasesets text to uppercase
.lowercasesets text to lowercase
.hide-textrenders element but hides text
Spacing
.space(r)adds $line-space * 2 to an empty div
.halfspacehalfes padding top and bottom
.nospacesets 0 on padding top and bottom
.nowrapprevents text from wrapping
Display
.inlinesets display to inline
.blocksets display to inline-block
.relativesets position to relative
.list-resetresets ist padding margin and list-type
Layout
.float-leftsets float to left
.float-rightsets float to right
.float-nonesets float to none
.clearfixclears floating on a wrapper
.clearclears floating using an element
Browser
.ietargets ie7 and below
.ie8targets only ie8
.ie9targets only ie9
Print
.visible-printvisible for print
.hidden-printhidden for print
.pagebreak-afteradds pagebreak after
.pagebreak-beforeadds pagebreak before
.print-jsadds a javascript to print the page

Responsive

Class Phones 520px and below Tablet 520px to 860px Desktop Default
.visible-phone Visible Hidden Hidden
.visible-tablet Hidden Visible Hidden
.visible-desktop Hidden Hidden Visible
.hidden-phone Hidden Visible Visible
.hidden-tablet Visible Hidden Visible
.hidden-desktop Visible Visible Hidden

JavaScript

Link opening as popup:
Open popup

<a href="..." class="popup" data-width="600" data-height="400">Open popup</a>

E-Mail encryption:
E-Mail

<a href="#info" data-rel="google.com" class="mailcrypte">E-Mail</a>

Gryps Custom

Class Description
Text
.font-smallfont-size 13px
.font-lightfont-weight 200
.bg-darkadds $color-background-second to background
.bg-greyadds $color-background-grey to background
.bg-grey-darkadds $color-background-grey-dark to background
.bg-blueadds $color-blue to background
.blue-boxadds padding and position to box
.content-rowadds 60px 0px 0 120px 0 padding to row
.small-content-rowadds 30px 0px 0 55px 0 padding to row

Code view

code view allows you to look at the html source of the provided examples

disable code view

Categories

Default


Pagination

<nav class="pagenav">
    <ul>
       <li> ... </li>
    </ul>
</nav>

Boxes

Box


Text here

<div class="box">
    <p>Text here</p>
</div>

Code view

code view allows you to look at the html source of the provided examples

disable code view

Categories