Motorcycle Adventures and Free Software
Henri Bergius
Biker, free software consultant, neogeographer

See also my JavaScript blog, The Universal Runtime

This entry was posted on 2004-10-26 14:07:34 UTC to

Standardized CSS layouts with Midgard

Based on my earlier blog entry, there was an interesting talk in OSCOM 4 about CSS Naming Conventions.

My after-talk discussions with Thorsten Scherler led to development of OSCOM specification for CSS Naming Conventions.

I've now used the XHTML skeleton from the specification for some websites, and have been generally quite happy with it. Here is a simple Midgardization of it. Simply paste it to the <(ROOT)> element of your style, and then add the CSS formatting to the <(css)> element.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="&(midcom_site["site_language"]);" lang="&(midcom_site["site_language"]);">
  <head>
    <title><(page-title)></title>
    <meta http-equiv="Content-Type" content="text/html; charset=&(midcom_site["site_encoding"]);" />
    <style type="text/css">
      <!--
        <(css-local)>
        <(css-extra)>
      -->
    </style>
    <link rel="stylesheet" href="&(midcom_site["uri"]);style.css" type="text/css" />
    <(head-extra)>
  </head>
  <body<(bodytag-extra)>>
    <div id="container">
      <div id="branding">
        <div class="grouplogo">
          <!-- Insert logo here -->
        </div>
        <div id="branding-tagline">
          <?php echo $GLOBALS["midcom_site"]['site_welcome']; ?>
        </div>
        <div id="branding-trail">
          <(breadcrumb)>
        </div>
      </div>

      <div id="nav">
        <div id="nav-main">
           <(navi)>
        </div>

        <div id="nav-language">
         <!-- Language switching links -->
        </div>

        <div id="search">
          <div class="search-input">
          </div>
        </div>
      </div>

      <div id="content">
        <div id="content-main">
          <(content)>
        </div>
      </div>

      <div id="siteinfo">
        <div id="siteinfo-credits">
          Created by <a href="http://www.nemein.com/">Nemein Oy</a>.
          Powered by <a href="http://www.midgard-project.org/">Midgard CMS</a>.
        </div>
        <div class="lastmodified">
          <(last-updated)>
        </div>
        <div class="siteinfo-legal">
         <!-- Copyright disclaimer and possible licensing -->
        </div>
        <div id="feedback">
        </div>
        <(edit-this-page)>
      </div>
    </div>
  </body>
</html>

The places with comments are ones I'm still thinking how to pull dynamic content into.

Sponsored links

save money using, phone card

Comments:

There have been no comments so far.

Post a comment:

You need to be logged in to publish comments.

Back