Getting Started
This site includes documentation of the tools, components, and styles used on OddSite. There are also sample pages available for viewing aspects of the site in context – including typography, colors, responsive images, and more.
Writing Content
When creating content, it is important to stay consistent. Here are some guidelines to help:
Branding
- Always capitalize the “O”, “B”, and “S” in OddBird and OddSite.
Commas
- Use the Oxford comma: “writing, design, and development” Note the final comma before and.
Dashes
- En Dash
–Used to show ranges of things (e.g. “January–March”) - Em Dash
—Instead of using em-dashes for asides (as suggested by the The Chicago Manual of Style), using<space><en-dash><space>makes the block of text more readable (e.g. “this thing – and also that thing – etc”). Read more here. - Citations still need 2-3 dashes (
-) to trigger the attribution class.
Headlines
- Use Title Case: Capitalize the first letter of every word except articles, prepositions, and conjunctions.
- Do not use punctuation at the end of your title unless it contains more than one sentence, is a question, or would benefit from an interrobang (highly encouraged)‽
Tags
- In general, blog posts should include the tag
Article - Reference the tag list to avoid variations of a tag.
- Tags are Title Case:
User Experience - Tags with multiple words should have spaces instead of dashes unless the
phrase is hyphenated (e.g.
Server-Side Rendering). - We have several Post Types which use the same tag structure but we have
promoted on the Posts by Tag (high placement and icon in heading) and Posts
by Date (icon displayed) pages. These include:
- Article
- Case Study
- Link
- Podcast
- Video
- Winging It
Case Study posts include tags for their industry, for example Technology Sector
Images
Image Sizing
The recommended size for hero images is 1600px x 600px. If the aspect ratio for the image is about 3:1 or more, the image will appear shorter on list pages.
Image Organization
| Type of Content | Source Image Folder |
|---|---|
| OddBird Heros | birds |
| Blog | blog |
| Static Pages | pages |
| Open Source | projects |
| Testimonials | quotes |
| Susy | susy |
| Talks | talks |
| Winging It | winging-it |
| Work | work/projectname |
| Books | writing |
There are a few additional image folders for specific use cases.