Advanced example

A demonstration of the goetheuni-layout

This is a demonstration about some advanced features of the goetheuni-layout. It shall be seen in contrast to the basic example which has the most compact source code. Compared to the basic example, this advanced version features:

  • A second logo in the header. Consider all style elements as optional: You can remove the department name as well as the Tabnav navigation just by removing them from the HTML source.
  • A sidebar with more panels. You can add as many panels as you want. If you want to use no sidebar at all, give the expert example a try.

It's all about the grid

This design is based on Bootstrap 3. It heavily relies on the mobile first fluid grid system. This means all horizontal space is divided in 12 equal width basic columns and one can define boxes (or panels) accross any integer number of columns. For example, this white box is 7 columns wide, while the small one on the left makes 5 columns, summing up in total to the number 12.

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

Picture panel

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