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 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