MDN/Projects/Development/Building Blocks

As part of the redesign, we intend to offer templates for page layouts of the standard types of pages. 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>

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>