MediaWiki/Foundation/Panels

Foundation CSS Framework for MediaWiki: Panels

This text is enclosed in a Panel. The colour of the panel is defined by a predefined style.

The width of the panel is defined using the Grid. A full-width panel uses 12 columns.

The depth of the panel is defined by the contents as it automatically resizes to fit the content.

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.

See Also:-

Callout Panel

Example 1: Full-width Panel

This Panel uses the full width of the screen. A panel has square corners by default.

This is the code:-

<div class="row">
     <div class="small-12 columns">
      	 <div class="panel">
	        <p>This Panel uses the full width of the screen. A panel has square corners by default.</p>
        </div>
    </div>
</div>

---

Example 2: A Panel with Radius Corners.

This is a radius panel which uses the full width of the screen

Add the word radius to the class. This is the code:-

<div class="row">
     <div class="small-12 columns">
      	 <div class="panel radius">
	        <p>This is a radius panel which uses the full width of the screen</p>
        </div>
    </div>
</div>

---

Example 3: Two Panels each half screen width

This Panel uses half the width of the screen

Left side text goes here...

This Panel uses half the width of the screen

Right side text goes here...

This is the code:-

<div class="row">
     <div class="small-6 columns">
      	 <div class="panel">
	        <h6>This Panel uses half the width of the screen</h6>
	        <p>Left side text goes here...</p>
        </div>
    </div>
     <div class="small-6 columns">
      	 <div class="panel">
	        <h6>This Panel uses half the width of the screen</h6>
	        <p>Right side text goes here...</p>
        </div>
    </div>
</div>

---

Example 4: Three Equal Panels

This is the left panel

This is the centre panel

This is the right panel

This is the code:-

<div class="row">
     <div class="small-4 columns">
      	 <div class="panel">
	        <p>This is the left panel</p>
        </div>
    </div>
     <div class="small-4 columns">
      	 <div class="panel">
	        <p>This is the centre panel</p>
        </div>
    </div>
     <div class="small-4 columns">
      	 <div class="panel">
	        <p>This is the right panel</p>
        </div>
    </div>
</div>

---

Example 5: Small Panel on the right only

In this example nine columns have been used for plain text. The panel on the right of the screen has a width of three columns.

This is the effect we want:-

Bryan Zmijewski started ZB Design in 1998. The company has grown since and is now known as Zurb. In 2011 Zurb released Foundation which is an open-source framework to assist web developers with a predefined set of CSS classes. MediaWiki authors can now use the Zurb Foundation by installing the Foreground Skin.

Wow! Did you know that?

This is the code:-

<div class="row">
     <div class="small-9 columns">
         <p>Bryan Zmijewski started ZB Design in 1998. The company has grown since and is now known as Zurb. In 2011 Zurb released Foundation which is an open-source framework to assist web developers with a predefined set of CSS classes. MediaWiki authors can now use the Zurb Foundation by installing the Foreground Skin.</p>
     </div>
     <div class="small-3 columns">
      	 <div class="panel">
	         <p>Wow! Did you know that?</p>
         </div>
     </div>
</div>

---

Open source wiki