The kitchen sink of HTML pages [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 9 years ago.

Improve this question

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
开发者_如何学C
• 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

---

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

---

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.

---

Existing kitchen sinks around the web:

• HTML-ipsum
• jQuery UI theme roller
• Paul Randall's kitchen sink
• Themes on ThemeForest often have good examples

---

Sounds awesome!

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