Full features

A demonstration of the goetheuni-layout

This example demonstrates all of the important features of the goetheuni-layout. If you find it too overloaded, have a look at the basic example or the advanced example.

goetheuni-layout in one sentence: This layout aims to imitate the official layout of Goethe University with a free and modular approach based on LESS.

Kitchen sink

Example of the bootstrap widgets

Inspired by the fully fledged demonstrations (e.g. Bootstrap theme examples), I would like to display some commonly used widgets also here, in a very-day like example.

The primary bootstrap color is the Goethe blue, reflecting in the primary button color:

I frequently make use of Bootstrap's excellent form styling feature:

per

The submit button already includes the next fancy feature: The use of the very elaborate Font-Awesome icons. All the examples given there can be directly applied (see also the sidebar):

Rotating:

Stacked:

Main panel

This panel has the inverted colors for attracting the user's attention immediately.

Additional panel

This is the most simple sidebar box. They are used heavily on the official Goethe university website. You can put anything in this sidebar, but some elements are very typical, for example

  • List icons
  • can be used
  • as bullets
  • in lists

Picture panel

You can put anything in this sidebar, for example pictures:

Panel demonstration

This section makes use of the full content width. This is useful as the sidebar in this page is quite short.

This is the most simple panel. It is just called panel-box and does not make use of a panel-header. It features a white background and rounded corners.

The panel with an attached table.

A B
C D

Thumbtalk box and subtext

This panel is great for displaying iconify topics.

button group

Box 1

This is a panel-grid with embedded panel-boxes. For computer displays, this looks like a big panel with (in this case) three columns.

Box 2

On a small display, the columns break into three rows (as builtin by Bootstrap) and the overall panel optically disappears, while the nested panel-box instances stand out optically as single panels.

Box 3

This resembles the look of "grid boxes" as used on the homepage of Goethe University. In contrast, this version is mobile accessible.

The teaser panel

Do you want to see more? Continue to the expert example.

The regular panel

Do you want to see more? Continue to the expert example.

Sidebar content

Lorem ipsum dolor este blabla

The panel with bar

This kind of box is frequently used on the Goethe university website. The left sidebar is used for navigation while the page content is displayed in the right panel.

In this bootstrap layout, this box is realized as panel-with-bar. A panel which breaks nicely for mobile phone, displaying the navigation horizontally and overall looking like a simple panel-box.