View source for MDN/Projects/Development/Building Blocks

As part of the redesign, we intend to offer templates for page layouts of the standard types of pages (see [https://developer.mozilla.org/en-US/docs/Project:MDN/Contributing/Page_types Page types] on MDN). In addition, we will offer in the toolbar a list of standard components for pages; we call these "building blocks."

This page covers each of the building blocks we'll need, what features they should have, and what they should look like.

==YouTube video==
We'll be using embedded YouTube videos more and more often. We need to make it easy to embed these in a standard way. While we already have a button in the toolbar for linking these, we want to add this to the building block mechanism.

===Features===
* Specify the URL of the video
* Specify a caption to display under the video
* The video and caption should be drawn styled neatly inside a box
* Make sure there's alt text for a11y; most not be optional

===Mockup===
<coming soon>

==Feature boxes==
Many landing pages need to have "feature boxes" that highlight specific articles. There are two basic types of this:

* Single feature boxes that are larger, often with artwork.
* Grids of feature boxes that are smaller, simpler, and point to one or two pages each.

===Features===

* Title
* Descriptive text
* Link
* Optional background image

===Mockup===

Coming soon.

==Screenshot==
Screenshots are a commonly used item. Let's standardize their appearance.

===Features===
* Upload or select an existing image as the screenshot; both of these options should be available from the UI for configuring the screenshot
* Specify an optional caption
* Draw the screenshot (and caption, if any) neatly in a box, sized to fit the available space
* Click to zoom into a lightbox
* Make sure there's alt text for a11y; this mustn't be optional

===Mockup===
<coming soon>

==Live sample==
We have buttons for live samples, but let's move this into the building blocks mechanism and add functionality.

===Features===
* One or more code chunks in a pre block, as currently supported
* Specify the title for the code sample
* Specify whether or not to have subheadings for each code block, and what they are
* Configure the size and placement of the live rendering
* Offer an option to open the live sample in a lightbox?
* Offer support for sending the sample to a JSFiddle or similar environment for tinkering
* Offer a button that copies the entire sample to the clipboard?

===Mockup===
<coming soon>

==Community info==
Many landing pages need to present information about community contact points.

===Features===
* Zero or more IRC channel links
* Zero or more newsgroups/mailing lists - we need to present links for both accessing them as a mailing list and as a newsgroup
* Optional "other" link with description (such as to a stack overflow topic)

===Mockup===
<coming soon>

==Subpage list==
A list of all of the immediate children of the current page.

===Features===
* A definition list, with the dt being the page title and the dd being the page's summary.
* Needs to support one-column or multi-column views (that is, allow to pick that the list should be in one column, versus using all available columns)

===Mockup===
<coming soon>

==Link list==
We often need to provide lists of links, both in-wiki and off-site.

===Features===
* Select links by looking for them in-site or by entering URLs
* Require a description
** Option: display description as a tooltip or in-content

===Mockup===
<coming soon>

==Quotes==
It will add to the readablity and skimmability of the page if we provide some important points as quotes in large text.

===Features===
* Specidy the content to be quoted

===Mockup===
http://i.imgur.com/1nk73sF.png