Scratch

Mon, 05/25/2009 - 19:46

Scratch is a basic CSS theme for use as a base for creating a theme.

Download Scratch from drupal.org/project/scratch. This version is 6.x-1.2 from 2009-Jun-25, a 15.29 KB download, and includes a modification described in Block headings.

This theme validates as CSS 2.1, CSS 3, WCAG (WAI) A, XHTML 1.0 Strict, and as US 508 compliant as far as a computer can check. Wave did not detect accessibility errors. The WCAG AA test shows the following heading is not nested properly.
<h3>User login</h3>

Block headings

A future version of HTML may completely replace fixed heading levels with relative headings. Until then there is another way of getting around heading problems to make the theme validate. Consider the following potential change to the Scratch theme. The change replaces the structured headings in blocks with classes containing the same formatting. Blocks are no longer in the heading structure.

First, in style.css, create a class equivalent to heading level 3.
.h3
      {
      display: block;
      font-size: 1.17em;
      font-weight: bold;
      margin: 1em 0;
      }

In block.tpl.php, change:
<h3><?php print $block->subject; ?></h3>
to:
<div class="h3"><?php print $block->subject; ?></div>

Example HTML

Here are example HTML elements to see how they are formatted by this theme.

<a href="?x">link 1</a>: link 1 This is a test of a link you have not visited. See how links are highlighted. Hover your mouse over this link to see any hover effects that might be used then select the link to see the link displayed as visited.

<a href="?y">link 2</a>: link 2 Leave this link unselected as a comparison link you have not visited.

<abbr title="abbreviation">abbr</abbr>: abbreviation

<acronym title="Cyclic Redundancy Checksum">CRC</acronym>: CRC

<blockquote>blockquote</blockquote>:

blockquote

<cite>cite</cite>: cite

<code>code</code>: code

<div>div</div>:

div

<form> and <input>: The the comments form at the end of this page (if you are logged in).

<em>em</em>: em

<h1>h1</h1> is usually the top heading in the page. Repeating h1 in this test would break heading nesting.

<h2>h2</h2>:

h2

<h3>h3</h3>:

h3

<h4>h4</h4>:

h4

<h5>h5</h5>:

h5

<h6>h6</h6>:

h6

<hr />:


<ol><li>li</li></ol>:

  1. li

<p>paragraph</p>:

paragraph

<pre>.h3
      {
      font-size: 1.17em;
      }</pre>

.h3
      {
      font-size: 1.17em;
      }

<q>quote</q>: quote

<span>span</span>: span

<strong>strong</strong>: strong

<table><thead><tr><td>th1</td><td>th2</td></tr></thead>
<tbody>
<tr><td>td1</td><td>td2</td></tr>
<tr><td>td3</td><td>td4</td></tr>
</tbody>
</table>:

th1 th2
td1 td2
td3 td4

<ul><li>li</li></ul>:

  • li
CSS 2.1: 
Validates as CSS 2.1