Simple Drupal look-alike HTML style

Summary

This page describes an alternative way to generate www pages with similar graphical layout as the official departmental pages.

If you want to create an ordinary HTML page (e.g. a personal page or a group page) that looks reasonably similar to the official pages in department's Drupal contents management system then this simple HTML style is what you need. Of course, you should know at least the basics of HTML and be comfortable editing plain HTML with a text editor.

An additional benefit of of using this style is speed. Pages written using this style load substantially faster than pages loaded from the Drupal system. Ideally a text only page generates only three HTTP requests: the page itself, the style sheet, and the banner image.

Creating a page with the style

If you want to create a new page using this style (or want to convert a old page), the first thing to do is to copy the page skeleton from http://www.cs.helsinki.fi/csstyle/skel.html [Save link/target as...]. The skeleton is rather simple and it is pictured below. The red comments are not part of the skeleton.

<!DOCTYPE html>  — Simple definition of DOCTYPE for HTML5 [1]
<html lang="en"> — Or lang="fi"
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> — Must be first <meta> [2]
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">     — This is necessary for IE: use highest mode available or GCF if installed [3]
  <link rel="stylesheet" type="text/css" href="/csstyle/style.css">  — Actual style sheet [4]
  <title> ... </title>
</head>
<body>
  <div id="page"> — The entire page must be contained this <div> [5]
    <a href="/en"><img src="/csstyle/banner-en.png" alt="Department of Computer Science"></a> — Or banner-fi.png for finnish pages [6]
    <div id="subtitle"> ... </div> — Single line subtitle below "Department of Computer Science" in the banner [7]
    <div id="main"> — Everything else except the banner goes here [8]
      ...
    </div> — End of "main"
    <br>  — This <br> is essential, it is needed to trim the columns [9]
  </div> — End of "page"
</body>
</html>

Some comments

For humans writing HTML by hand is easier than writing strict XHTML. That is why we use HTML. The current HTML5 draft defines the definition as obsolete but permitted. Old non-HTML5 browsers are nowaday rare, we can use this simple DOCTYPE for HTML5.
The Content-type <meta> tag must come before other <meta> tags. And please, use UTF-8. There is currently no excuse to use anything else than Unicode.
This is required to get IE8/IE9/IE10 to render the page always in standards mode and not in quirks mode.
The style sheet is only about 2.3K in size.
The <div id="page"> contains everything except the gray background.
The banner image is the same as used in the Drupal system except that it does not contain the search box, language selector, nor the link tabs.
This <div> is part of the banner but it is optional. It can contain addtional text to be put under name of the department.
The <div id="main"> contains the actual contents of the page. See below for some pre-defined classes which can be used here.
This <br> is required, especially if your page has uneven columns.

Remember!

Always remember to check your pages with the W3C Markup Validation Service.
If your page introduces some style definitions please use the W3C CSS Validation Service too.

Using the style

The style defines basic layout and colors, font face, size, and line spacing. The style modifies <h1>, <h2>, and <h3> headings and defines triangular bullets as a default for <ul> lists. Additionally, the style defines means to create boxes with rounded corners on the left or right side of the text and means to control text flow.

First fill in the title, choose the appropriate banner image, and fill in or remove the optional banner subtitle. Then start the main part of your page with a <h1> heading. After that, you have rather free hands.

Predefined classes

<div class="box-l"> ... </div>: Creates a box on the left side of the text. The text flows on the right side of the text for the height of the box.
<div class="box-r"> ... </div>: Creates a box on the right side of the text. The text flows on the left side of the text for the height of the box.
<div class="col-l"> ... </div>: Restricts the text flow so that it does not flow on the rightmost column.
<div class="col-r"> ... </div>: Restricts the text flow so that it does not flow on the leftmost column.
<div class="col-m"> ... </div>: Restricts the text flow to the middle column only.

You should use the box classes only when text is flowing over the entire page width.

Examples

The source of this page of course an example of the use of the style. Maybe a better example is the official demo page http://www.cs.helsinki.fi/csstyle/demo.html.

Browser compatibility

As of this writing the style has been tested successfully with Chrome 18-23, Firefox 10-16, IE8, IE9 and IE10, Opera 12, and Safari 5.1 under Windows, Chrome 22 and Firefox 15 under Ubuntu Linux, Safari 6.0 under OS X 10.6-10.8, Android stock browser under Android 2.3-4.0 on phones and tablets, and Safari on iPad under iOS 5.0-6.0. Some browsers, including IE6 and IE7, Konqueror, and Mobile Safari produce suboptimal layout results. There is no reason to believe the style would not work with any standards conformant browser.

— Last edited September 2012 —