Style Guide
This page contains examples and guidance for all of the styles and components used on this website, guycarberry.co.uk.
Overal aesthetic
This website is intentionally minimal, uncluttered, almost 'undesigned' and sparse.
Fonts
This website uses "Helvetica Neue", Helvetica, Arial, san-serif which gives Mac and iOS users a rather delightful typographic experience. Windows and Android users will see Arial. The same font stack is applied to all headings and body copy.
Headings
Heading, level 1
Heading, level 2
Heading, level 3
Heading, level 4
Heading, level 5
Heading, level 6
If you find yourself needing to use headings level 4-6 then your page is probably too long. Consider splitting it into smaller, more focussed topics across multiple pages.
Paragraphs and inline styles
This is a paragraph, the most commonly used HTML element. It can contain any number of inline elements such as bold or italic text or a hyperlink to a webpage.
This is an introductory paragraph with the "intro" class attribute. You'll only have one of these on a page at a time. It's the first, leading paragraph.
Images
Image, right
They were very quick and abrupt in their actions, and their speech, in moments of hot discussion over the allotment of the choicer teeth, was truly a gabble.
They spoke in monosyllables and short jerky sentences that was more a gibberish than a language.
And yet, through it ran hints of grammatical construction, and appeared vestiges of the conjugation of some superior culture. Even the speech of Granser was so corrupt that were it put down literally it would be almost so much nonsense to the reader. This, however, was when he talked with the boys.
Image, left
She had not gone much farther before she came in sight of the house of the March Hare: she thought it must be the right house, because the chimneys were shaped like ears and the roof was thatched with fur.
It was so large a house, that she did not like to go nearer till she had nibbled some more of the lefthand bit of mushroom, and raised herself to about two feet high: even then she walked up towards it rather timidly, saying to herself 'Suppose it should be raving mad after all! I almost wish I'd gone to see the Hatter instead!'
There was a table set out under a tree in front of the house, and the March Hare and the Hatter were having tea at it: a Dormouse was sitting between them, fast asleep, and the other two were using it as a cushion, resting their elbows on it, and talking over its head.
Image, Centre
They filled a little sack at my side with Zodangan money. The medium of exchange upon Mars is not dissimilar from our own except that the coins are oval.
Paper money is issued by individuals as they require it and redeemed twice yearly. If a man issues more than he can redeem, the government pays his creditors in full and the debtor works out the amount upon the farms or in mines, which are all owned by the government.
Image, captioned
These two ladies are having a nice chat
Lists
Only ordered and unordered lists are used on this website. Definition lists are to be avoided.
- Ordered list item
- Ordered list item
- Ordered list item
- Ordered list item
- Ordered list item
- Unordered list item
- Unordered list item
- Unordered list item
- Unordered list item
- Unordered list item
Quotes
This is the piece of quoted text. It is inside a paragraph element withing the blockquote.
This is the cited source, placed within a paragraph element inside a blockquote element.
Tables
Avoid using tables where possible. There is usually another easier way to present information using headings and paragraphs or lists. Where tables are the most suitable mechanism for presenting data, consider accessibility limitations and test thoroughly.
| thead 1 | thead 2 | thead 3 |
|---|---|---|
| tfoot 1 | tfoot 2 | tfoot 3 |
| tbody 1a | tbody 2a | tbody 3a |
| tbody 1b | tbody 2b | tbody 3b |
| tbody 1c | tbody 2c | tbody 3c |
| tbody 1d | tbody 2d | tbody 3d |
| tbody 1e | tbody 2e | tbody 3e |