Uncategorised

Every block this template provides, rendered as it will appear in an article. Copy the pattern you need, or insert it from the editor's content-template list — the class names under each example are what the editor inserts.

Nothing on this page uses inline styling. If a block here looks right and the same block on a live page doesn't, the difference is a stray inline style or a missing class, not the template.

---

Text

Body text inherits the site's base font. Paragraphs and list items are held to a readable line length automatically — you don't need to wrap them in anything.

A third-level heading

Headings take the frame colour. Second-level headings carry a short gold rule beneath them, which is the one recurring crest cue on the site. Add cc-bare to a heading to drop that rule where it isn't wanted.

A third-level heading with the rule added

The reverse of cc-bare: cc-rule-under puts the gold rule on a heading that wouldn't otherwise have one. Use it where an H3 is doing the work of a section break.

A fourth-level heading

Use cc-lead on an opening paragraph to set it slightly larger and softer, as at the top of this page. Use it once per page at most.

• Lists inherit the same measure as paragraphs.
• Nothing needs a class.
• Keep items to a line or two.

Quotations take a gold rule on the left. Good for an Old Girl's recollection, a line from a Chronicle, or an extract from the archive.

— Attribution, class of 1974

---

Links and buttons

An ordinary inline link needs no class. Buttons are links with a class, applied from the editor's link-styles list — so nobody has to write HTML to get one.

Register for the jubilee Read the programme

Two variants: btn-cc for the action you want taken, btn-cc-outline for the secondary one beside it. One solid button per section — two solid buttons side by side means neither is the primary.

The third variant, btn-cc-onframe, is for buttons sitting on a dark panel. It's shown in the panel section below.

---

Layout

Grid

A responsive grid for any repeating items. Add cc-grid--2, cc-grid--3 or cc-grid--4 to set the widest layout; it steps down to two across on a tablet and one on a phone by itself.

The same markup at four across, for short items:

And two across, where each item needs room to breathe:

Text columns

Where the content is prose rather than separate items, use cc-cols cc-cols--2 (or --3). The text flows between columns and collapses to a single column on a phone. Don't use this for anything the reader needs to compare side by side.

At three columns the lines get short, so keep the text short too — notices and short entries rather than argument:

Spacing and width helpers

cc-stack puts even vertical space between everything inside it, which saves fighting margins when you're assembling a page from several blocks. cc-measure holds any block to the readable line length. cc-center centres text within its block.

---

Panels

A panel groups related content on a tinted background. Add cc-panel--frame for the dark variant — headings and plain links turn white automatically, and buttons inside it should use btn-cc-onframe.

---

Cards

Cards are for repeating items with a picture and a short piece of text — news, profiles, event listings. Put them in a grid. The image is optional: drop the cc-card__media block and the card still works.

Write real alternative text for card images, as above. A photograph of identifiable people carries information a screen-reader user should get; only a purely decorative image takes an empty alt.

---

Images with captions

Use a figure whenever an image needs a caption or a credit. The caption is where provenance goes — date, photographer, collection reference.

---

Tables

For rolls, honours boards, committee lists and schedules. Wrap the table in cc-table-wrap so a wide table scrolls sideways on a phone instead of breaking the page. Put the table's description in a <caption> rather than a heading above it.

---

Callouts

A callout lifts one thing out of the flow — a deadline, a change of venue, a note about access to records. Two variants: the standard blue, and cc-callout--gold for anything jubilee-related.

---

Jubilee blocks

These three are specific to this site rather than part of the shared foundation, so they're named tghs- instead of cc-. If they ever turn up on another site they get promoted; until then they live in the client layer.

The band

The anniversary statement. One per page at most, and nothing else on that page should compete with it. Inside an article it sits within the content column — for a full-width band across the page, put the same markup in a module assigned to a full-width position instead.

The timeline

Dated markers are worth using here because the content genuinely is a sequence. Keep each entry to a sentence; anything longer belongs in its own article with the timeline linking to it.

• 1880

  Timaru High School opens on the corner of Cain and Hassall streets.

• 1898

  The school separates into two single-sex schools on the same site.

• 1913

  The boys' school moves to North Street, leaving Cain Street to the girls' school.

• 1930

  The Chronicle publishes its fiftieth jubilee number.

• 2030

  One hundred and fifty years.

The crest

tghs-crest sizes and centres the crest so it stays proportionate from phone to desktop. Use it for the crest only, not for general images.

---

Small things worth knowing

• cy — an empty span that fills with the current year: © Timaru Girls' High School. Use it in footers and copyright lines so nothing goes stale.
• cc-noprint — hides a block when the page is printed. Useful on booking buttons and navigation aids; the header, footer and menus are already hidden in print.
• visually-hidden — text available to screen readers but not shown. It fixes the repeated-link problem: Read more about the jubilee programme reads as a distinct link to someone listening to the page, and looks like plain "Read more" to everyone else.
• cc-credit — the small print line at the foot of a page or module.
• Links should be relative and without a leading slash, as every link on this page is. That keeps the site working when it moves between staging and live.

This paragraph is marked cc-noprint — print this page and it disappears.

---

Editor snippets

These are available from the editor's content-template list, so common blocks don't have to be built by hand or copied from this page.

Buttons come from the editor's link-styles list rather than a snippet: select a link, choose Button, Button (outline) or Button (on dark).

---

House rules for this site

• Never paste styling into an article — no colours, no font sizes, no inline spacing. If a block needs a look the classes above don't give it, that's a gap to fix in the template, not in the content.
• Class names describe what a thing is, not what it looks like. Don't rename them to match a colour.
• Headings run in order: the article title is the H1, sections are H2, subsections H3. Don't skip a level to get a size.
• Every image gets alternative text unless it is purely decorative.
• Captions carry provenance. For anything from the archive, name the collection.