Content: Templates

Online Styleguide

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. It gives an insight of formatting, use of space and components accross the online presence. It is devided into three essential parts: Typography, Components and Templates.

Development params

debug=true enables development tools classic=true enforces classic website (non-responsive)

Category

1.01 Homepage 25.04.2013

1.02 Artikel - Wochenübersicht 25.04.2013

1.03 Artikel - Archiv 25.04.2013

1.04 Artikel - Detail 25.04.2013

1.05 Events & Leute Uebersicht 25.04.2013

1.06 Filme Übersicht 25.04.2013

1.07 Filme Detail 25.04.2013

1.08 Werbung 25.04.2013

dev = template in development, untested       4.12.03 = date when template finished, tested       no flag = template finished, integrated

Typography

Fonts, Sizes and Styles

{tpl} Regular

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

<p>My text</p>

{tpl} italic

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

<p><em>My text</em></p>

{tpl} bold

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

<p><strong>My text</strong></p>

H1 {tpl}

<h1>My title</h6> or class="font-size-32"

H2 {tpl}

<h2>My title</h6> or class="font-size-28"

H3 {tpl}

<h3>My title</h6> or class="font-size-24"

H4 {tpl}

<h4>My title</h6> or class="font-size-20"

H5 {tpl}

<h5>My title</h6> or class="font-size-18"

H6 {tpl}

<h6>My title</h6> or class="font-size-16"

 

Inline Semantics

The anchor element
<a href="#">My text</a>
The abbr element
<abbr title="#">My text</abbr>
The bold element
<b>My text</b>
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 italic element
<i>My text</i>
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>

 

Block Semantics

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>My text</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>My text</li></ol>

Definition List

Lorem
- is simple dummy text used for typo
Lorem
- is simple dummy text used for typo
Lorem
- is simple dummy text used for typo
Lorem
- is simple dummy text used for typo
Lorem
- is simple dummy text used for typo

<dl><dd>My</dd><dt>- text</dt></dl>

Quotes

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

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

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

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

Preformatting

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

<pre>My text</pre>

Dividers

<hr />

<div class="break"></div>

 

Colors

Primary colors

#e01400
red

Framework colors

#006699
#d92400
#e5d200
#00cc00
#333333
#666666
#999999
#cccccc

 

Textflow

Leadtext Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<p class="lead">My text</p>

The Lorem Ipsum

<h2>My title</h2>

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur.

<div class="grid-12 alpha"><p>My text</p></div>

from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.

<div class="grid-12 omega"><p>My text</p></div>

100x100
.img-left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper egestas nunc in volutpat. Fusce adipiscing velit ac eros tempor iaculis. Phasellus venenatis mollis augue, non posuere odio placerat in. Etiam volutpat ultrices lectus. Fusce eu felis erat. Donec congue interdum elit, sed ornare magna convallis lacinia. In hac habitasse platea dictumst. Mauris volutpat consectetur accumsan.Cras diam justo, sodales quis lobortis sed, lobortis vel mauris. Sed a mollis nunc. Quisque semper condimentum lectus, eget laoreet ipsum auctor et. Quisque sagittis luctus augue, id fringilla enim euismod quis. Nullam blandit, elit at euismod rutrum, tortor nibh posuere mauris, in volutpat diam ante ac dui. Sed velit massa, imperdiet placerat tristique et, consectetur a lorem. Praesent aliquet turpis in quam tempor eu pulvinar nibh luctus.

100x100
.img-left

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Tables

Standard table

Base table structure (caption)
Head 1 Head 2 Head 3 Head 4
Footer spans full size
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

<table></table>

Responsive table

Comprehensive table (caption)
Head 1 Head 2 Head 3 Head 4 Head 5
Footer spans full size
Head 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3 Row 1 Cell 4 Row 1 Cell 5
Head 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3 Row 2 Cell 4 Row 2 Cell 5
Head 3 Cell 1 Row 3 Cell 2 Row 3 Cell 3 Row 3 Cell 4 Row 3 Cell 5
Head 4 Cell 1 Row 4 Cell 2 Row 4 Cell 3 Row 4 Cell 4 Row 4 Cell 5
Head 5 Cell 1 Row 5 Cell 2 Row 5 Cell 3 Row 5 Cell 4 Row 5 Cell 5

<table class="tbl tbl-responsive"></table>

Odd/Even

Head
Row 1
Row 2
Row 3

<table class="tbl tbl-alternate"></table>

Empty

Head Head
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2
Row 3 Cell 1 Row 3 Cell 2

<table class="tbl tbl-empty"></table>

Forms

Input Sizes

Input Types

Vertical Form

Horizontal Form

Plain Form

Radios / Checkboxes

Select

Buttons

  1. Anchor

  1. Submit

  1. Button

Errors

The form could not be sent because of the folowing marked errors:

  1. please enter a valid e-mail address
  2. Please enter a password
  3. Please check this field

Messages

Success .text-success

  • This is a successlist and a link
  • Made with an unordered list
  • And another list entry

This is a paragraph.

Error .text-error

  • This is an errorlist and a link
  • Made with an unordered list
  • And another list entry

This is a paragraph.

Info .text-info

  • This is an infolist and a link
  • Made with an unordered list
  • And another list entry

This is a paragraph.

Warning .text-warning

  • This is a warninglist and a link
  • Made with an unordered list
  • And another list entry

This is a paragraph.

Example

Personal information

  1. Your Details

  1. Delivery

  6. Please check your e-mail address
  7. Please select at least one category
Additional information

Icons

Text Icons .icon

  • Arrow left
    .icon-arrow-left
  • Arrow right
    .icon-reverse icon-arrow-right
  • Featured
    .pl-tb-icon .icon-featured
  • Categories
    .pl-tb-icon .icon-categories
  • Tags
    .pl-tb-icon .icon-tags
  • Location
    .pl-tb-icon .icon-location
  • Arrow down
    .pl-tb-icon .icon-arrow-down
  • Close
    .pl-tb-icon .icon-close
  • Location (grey)
    .pl-tb-icon .icon-location-grey

Helpers

General

Class Preview Description
Style
.bold Example Text sets the text-style to bold
.italic Example Text sets the text-style to italic
.text-muted Example Text sets the text color to muted state
.text-info Example Text sets the text color to info state
.text-success Example Text sets the text color to success state
.text-warning Example Text sets the text color to warning state
.text-error Example Text sets the text color to error state
.lead
Example Text
 sets the text as lead
.legal
Example Text
 sets the text as legal (usually smaller)
.uppercase
Example Text
 sets the text-transformation to uppercase
.lowercase
Example Text
 sets the text-transformation to lowercase
Alignment
.align-left

Example Text

 sets the text-alignment to left
.align-right

Example Text

 sets the text-alignment to right
.align-center

Example Text

 sets the text-alignment to center
.align-top Example Text sets the vertical-alignment to top
.align-bottom Example Text sets the vertical-alignment to bottom
Floating
.left, .float-left Example Text floats an element left, forces float
.right, .float-right Example Text floats an element right, forces float
.no-float Example Text removes floating from an element
.clearfix Example Text sets clearing to an element
.clear Example Text sets clearing to an element
Images
.img 40x40 sets the max width of an image to 100%
.img-left 40x40 sets the image-alignment to left and adds padding
.img-right 40x40 sets the image-alignment to right and adds padding
Spacing
.halfspace

Example Text

 sets the bottom margin to half of its origin value
.nospace

Example Text

 sets the bottom margin to zero
.break
Example Text
 class equivalent to the >hr /> tag
Behaviour
.nowrap
Example Text
 disallows text breaks
.offset
Example Text
 sets the text visibility to offset
.disable, .disabled
Example Text
 adds disabled behaviour to applied element
.inline Example Text forces the element to be inline
.block Example Text forces the element to be a block
.relative Example Text forces the element to be relative positioned
.hidden forces the element to be hidden
.visuallyhidden Example Text forces the element to be hidden but readable by screenreaders
Support
.print Example Text sets the element to be visible only print
.no-print Example Text sets the element to be visible only on screen
.no-js Example Text this class will be removed if javascript is enabled
Resets
.reset-list
  • Example Text
 strips padding, margin and list-type from list

 

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 class="popup" data-width="600" data-height="400"
E-Mail encryption: E-Mail class="mailcrypte" href="#info" data-rel="google.com"

24 Column 960 Grid Example

300
{tpl}

300
{tpl}

300
{tpl}

140
{tpl}

140
{tpl}

140
{tpl}

140
{tpl}

140
{tpl}

140
{tpl}

140
{tpl}

140
{tpl}

620
{tpl}

300
{tpl}

940
{tpl}

300
{tpl}

300
{tpl}

300
{tpl}

300
{tpl}

300
{tpl}

300
{tpl}

300
{tpl}

300
{tpl}

620
{tpl}

Components

Page Navigation

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

Boxes

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

Box

Text here

Development

Core guidelines

Python

For Python we are using the PEP 8 style guide.

In addition, the following rules apply:

  • use 4 space intendation

Django

HTML/CSS

For HTML/CSS we are using the W3Schools and W3C best practices and guidelines.

In addition, the following rules apply:

  • use tab intendation
  • use dashes (-) for css classes and file names
    namespace-module-addition-addition
  • use underscore (_) for html file naming
    namespace_module_addition_addition.ext
  • use double quotes (") for all html attributes and inside the django template language whenever possible

JavaScript

We are using the singleton pattern for javascript along with the class.js library and class.js plugins to create reusable plugins and modules.

In addition, the following rules apply:

  • use tab intendation
  • use dott annotation (.) for javascript file naming
    namespace.module.addition.addition.ext
  • use single quotes (') for all javascript methods and strings whenever possible

Plugin guidelines

Requirements

When developing plugins, the following terms must be fullfilled:

  • W3C HTML validation
  • WCAG 2.0 (A)1 validation
  • No JavaScript and Pageload2 optimization
  • Responsive design
  • Progressive enhancement3
  • Retina support for important brand information like logo

The following requirements could be fullfilled:

  • Full retina support
  • WCAG 2.0 (AA) validation

1) We support the (A) grading as far as reason and logic permit.
2) When loading HTML and JavaScript, dynamic elements should load without any disturbances, also prior to onload.
3) Wherever possible use HTML5 or CSS3 technologies and provide proper fallbacks.

Code

A plugin should always be wrapped with a class using the plugin namespace:
<div class="plugin-gallery">...</div>