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
2: Radius Buttons
3: Round Buttons
4: Button Sizes
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
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