MediaWiki/Foundation/Simple Buttons

Foundation CSS Framework for MediaWiki: Buttons

Buttons are generally linked to a resource - another article on the same site, or an external webpage.

Foundation has several different button styles which can be customized by using additional classes.

Note: To use components from the Zurb Foundation CSS Framework in MediaWiki, first install a custom skin such as the Foreground Skin or the Pivot Skin, which are built upon the Foundation CSS Framework.

Overview

• Button styles include a Simple Button, as shown on this page; a Split Button; or a Dropdown Button.
• Each button can be styled using additional classes.
• Five types of button have different colours; a default style or defined by four classes named Success, Secondary, Alert and Info.
• Button shapes can be changed from the square corners of the default style; to a small radius; or rounded corners.
• Button can be displayed in three sizes: tiny, small or large.
• Button width increases to fit the text; or expanded to fit the width of a container.
• Buttons can also be disabled.
• Buttons can be arranged in a row, called a Button Group.

1: Simple Buttons

• Default Button
• Success Button
• Secondary Button
• Alert Button
• Info Button

The code for the simple buttons is shown below:-

2: Radius Buttons

• Default Radius
• Success Radius
• Secondary Radius
• Alert Radius
• Info Radius

The code for the simple radius buttons is shown below:-

3: Round Buttons

• Default Round
• Success Round
• Secondary Round
• Alert Round
• Info Round

The code for the simple round buttons is shown below:-

4: Button Sizes

Tiny Button Small Button Large Button

The code for the each size of simple (radius) buttons is shown below:-

5: Expanded Buttons

3 Columns

4 Columns

5 Columns

Small Button Expanded to width of screen (12 Columns)

Code for small buttons with radius and expanded is shown below:-

Note that the width is not defined, other than the class .expand. The width is controlled by the container. In the above example the grid was used to define column widths of 3, 4 and 5 (total = 12) and the three columns are the containers for each button.

6: Disabled Buttons

• Default Button
• Success Button
• Secondary Button
• Alert Button
• Info Button

The code for disabled buttons is shown below:-

Disabled buttons are not active so why would you use them?

• A disabled button could be used as a Label, or
• As a developer you may find it useful to disable a button to indicate that the link target does not exist yet.

---

Notes

The code samples shown here are screen-captured images. This is because it did not seem possible to display the text only without the button class displayed as the button itself.

For interest, I used the extension SyntaxHighlight; and the html tags for pre and code, in various combinations, and could not prevent the button from being displayed instead of the text.

Grant

Open source wiki