University Computer Centre
Examples

Examples

Heading

Lorem ipsum dolor sit amet, …

Two Column Design

The lecture hall building
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
The lecture hall building
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
<h2 class="linie">Heading</h2>
<p>Lorem ipsum dolor sit amet, …
</p>

<h3>Two Column Design</h3>
 <div class="row spacing">
  <div class="col-xm-4"><img src="/tu/images/campus.jpg"
  class="img-responsive" style="width:260px;margin:auto" alt="The lecture hall building"></div>
  <div class="col-xm-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.</div>
 </div>
 <div class="row spacing">
  <div class="col-xm-4"><img src="/tu/images/campus.jpg" class="img-responsive" alt="The lecture hall building"></div>
  <div class="col-xm-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.</div>
 </div>

Note

  • The class "spacing" inserts a 7px space below each column.

File Header

<?php

// Loading a configuration file
require_once('../config/config.inc');

// Set variables for this page separately
$keywords = 'Example page, keyword';

// Initialise CSS variable if this has not yet been done in config.inc
if (!isset($css_in))
   $css_in = '';

// Add CSS files (no other command may come before @import!)
$css_in = '@import url(second-css.css);' . $css_in;
$css_in = '@import url(first-css.css);' . $css_in;

// Add further CSS code
$css_in .= '
.bsp {
   padding-top: 14px;
}
';

// Loading extensions
require_once('php/hs.inc');

// Loading the template with a special page title
seite(__FILE__, 'Title');?>

Nested Two Column Design

The lecture hall building
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
<div class="row spacing">
  <div class="col-xm-6"><img src="/tu/images/campus.jpg" class="img-responsive" /></div>
  <div class="col-xm-6">
    …
    <div class="row bsp">
      <div class="col-xs-6">…</div>
      <div class="col-xs-6">…</div>
    </div>
  </div>
</div>

Asymmetrical Two Column Design

The lecture hall building
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
<div class="row spacing">
  <div class="col-xm-3"><img src="/tu/images/campus.jpg" class="img-responsive" /></div>
  <div class="col-xm-9">…</div>
</div>

Three Column Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
The lecture hall building
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
The lecture hall building
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
The lecture hall building
<div class="row spacing">
  <div class="col-xm-4">…</div>
  <div class="col-xm-4"><img src="/tu/images/campus.jpg" class="img-responsive" /></div>
  <div class="col-xm-4">…</div>
</div>
<div class="row spacing">
  <div class="col-xm-4"><img src="/tu/images/campus.jpg" class="img-responsive" /></div>
  <div class="col-xm-4">…</div>
  <div class="col-xm-4"><img src="/tu/images/campus.jpg" class="img-responsive" /></div>
</div>

Customisable Design

Change the width of your browser window to test it!
The lecture hall building
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
The lecture hall building
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
The lecture hall building
<div class="row spacing">
  <div class="col-xm-6 col-md-4 col-lg-3">Change the …</div>
  <div class="col-xm-6 col-md-4 col-lg-3"><img src="/tu/images/campus.jpg" class="img-responsive" /></div>
  <div class="col-xm-6 col-md-4 col-lg-3 clear-xm">Lorem ipsum …</div>
<!-- clear-xm forces the element for this display size onto a new line,
     otherwise it could slip underneath the previous element. //-->
  <div class="col-xm-6 col-md-4 col-lg-3 clear-md"><img
  src="/tu/images/campus.jpg" class="img-responsive" /></div>
  <div class="col-xm-6 col-md-4 col-lg-3 clear-xm clear-lg">Lorem ipsum …</div>
  <div class="col-xm-6 col-md-4 col-lg-3"><img src="/tu/images/campus.jpg" class="img-responsive" /></div>
</div>

Notes

  • The classes "clear-*" force an element onto the next line.
    • Restricted to the stated width
    • Example: class="clear-xm" forces a line break from 550px to 800px
    • Necessary if…
      • the columns can no longer all be displayed on one line (class="row"),
      • there are still more than two columns on the line or
      • the width of the column to be wrapped fits below the previous element.