16

I'm designing web themes and I'd like to put together a "kitchen sink" HTML page which contains the most common design elements of a web page. It's great to show theme features but also helps me develop CSS for everything on the page without missing anything.

There's the obvious list of HTML tags which is a great starting point:

  • Headings <h1> through <h6>
  • Paragraphs
  • <em> and <strong> in paragraphs, headings, etc
  • Floated images with optional caption
  • Lists <ol> and <li>, short (one-liner) and long (multi-line) list items
  • Definition lists <dl>, <dt>, <dd>
  • Horizontal rules <hr> with optional Back To Top link
  • Tables with <thead> and <th>, <tbody> with alternate row highlighting, <tfoot> with pagination and/or notes
  • Feature comparison tables (tick/cross or dash)
  • <blockquote> for long/referenced quotes
  • <q> for short quotes
  • Forms with text, radio, checkbox, textarea, select and buttons, and support for left/right labels, default values, hint text and validation error highlighting
  • Code samples with syntax highlighting and raw output/clipboard

Then additional styling of stuff:

  • Breadcrumbs
  • Dropcap on paragraphs
  • Floated extract of text, pullquotes
  • Columns
  • Block inset - background colour, border, etc
  • Background highlighting of text
  • Hover-activated links (dotted underline)
  • Tooltips

And then specific applications of a block of HTML:

  • Table of Contents for document/wiki
  • Homepage feature slider/box
  • File download
  • Contact information, styled <dl> for address, phone, email, etc
  • Gallery of images
  • Calendar (year, month, week, day views)
  • Embedded video
  • Pricing table
  • Maps
  • WYSIYG editor
  • Blog post summary, blog post
  • Forum list of posts, form post
  • "Add to cart" style block
  • Customer review with star rating
  • Out-of-page user alerts (SO style)
  • In-page feedback - error, success, etc
  • User profile block - avatar, username, stats

Page-related actions:

  • Send to a friend
  • Tweet, Like/Share, +1, Flattr
  • Alternative formats RSS/XML/CSV etc
  • Print

jQuery UI elements (is this re-inventing the wheel?):

  • Accordion
  • Tabbed box
  • Dialog
  • Single button
  • Multiple choice button
  • Slider
  • Datepicker
  • Progress bar
  • Autocomplete
  • Overlay/shadow
  • Framework icons

Is there anything I'm missing? I'd like to include as many common elements as possible. If you buy themes do you find they miss something important, or contain something awesome that I haven't thought of?

Hopefully this will turn into a community wiki question

Tak
  • 11,428
  • 5
  • 29
  • 48
  • Is this something to show others or for your own reference? I've thought about a similar project myself but imagined how visually unappealing the final result could be. Yes, it has more practical purpose but visitors (potential clients) may not understand that. – Sparky Jul 08 '11 at 15:06
  • @Sparky672 Almost entirely for developer reference. Easy browser compatibility testing of existing CSS, and a task list and inheritance test for new CSS themes. I like your point about clients not understanding it. – Tak Jul 08 '11 at 15:12
  • I don't think this question is suitable for SO. It's a typical `big-list`, Community Wiki type of question. – You Jul 08 '11 at 15:13
  • 1
    @You I agree about the community wiki point. Why not suitable for SO? It's a programming question and answerable IMO. And it's starting to get good too – Tak Jul 08 '11 at 15:17
  • Looks more like a list of things you could encounter in a real website. There's no telling how large this list will become, and I already think the sheer size of the list outweighs the usefulness of the question. This is blog post material, not question material. I think it'd be better off being a short "Are there any HTML5 kitchen sinks?" question, to which [Taks answer](http://stackoverflow.com/questions/6625062/the-kitchen-sink-of-html-pages/6627146#6627146) is appropriate along with an answer linking to the list you currently have in the question. But hey, maybe that's just me. – You Jul 08 '11 at 20:52
  • (And I'm probably nitpicking here, so feel free to ignore my ramblings.) – You Jul 08 '11 at 20:53

4 Answers4

6

Some really useful things that you always spend time working on:

  • Menus (Horizontal, Vertical, Expandable, etc..)
  • Form verification (This is if you are also including javascript)
  • Tooltips
  • WYSIYG editor
  • Maps

Hope it helps

jasalguero
  • 4,142
  • 2
  • 31
  • 52
  • Thanks! I added tooltips, WYSIWYG editor and maps. I think menus are really part of the template rather than content. Form verification errors already on the list. – Tak Jul 08 '11 at 13:44
4

How about common UI widgets like:

  • Calendar
  • Tabs

Or boxes:

  • Rounded corners

And maybe:

  • Feedback / things that catch attention (e.g. your X have been updated)
  • em / strong

I think the tricky one is making sure you catch all the combinations such as em in a h2 (a simple example but that sort of thing).

The jquery-ui theme roller page might give you some ideas.

Alex KeySmith
  • 16,657
  • 11
  • 74
  • 152
  • Calendar, boxes, feedback and `em`/`strong` all good stuff thanks. Will have a look through theme roller for more ideas – Tak Jul 08 '11 at 14:00
4

Existing kitchen sinks around the web:

Tak
  • 11,428
  • 5
  • 29
  • 48
1

Sounds awesome!

You could go crazy and include a web chat/IM widget. Having just styled one, it seems to be a unique problem.

Beth Budwig
  • 114
  • 6