Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

353 lines (349 sloc) 10.555 kb
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Standard Module Format</title>
<link rel="stylesheet" type="text/css" media="all" href="css/libraries.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/template.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/grids.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/content.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/mod.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/mod_skins.css" />
<!--<link rel="stylesheet" type="text/css" media="all" href="css/mod_debug.css" />
--></head>
<body>
<div class="page">
<h1>Modules</h1>
<h2>Block Structures</h2>
<p>There are three basic block structures that you can build from. Examine how the structures work in Firebug, Dragonfly, or by applying the stylesheet mod_debug.css</p>
<div class="line">
<div class="unit size1of3">
<div class="mod">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>mod </h3>
</div>
<div class="bd">
<p>Mod is the basic container, all other containers inherit from this one. This is the high performance container that should be used unless you specifically need another type of container.</p>
<ul class="simpleList">
<li>One tiny image</li>
<li>Expands to any height or width</li>
<li>Compatible with any content</li>
<li>Choose for any container object that doesn't require outside transparency or complex borders.</li>
</ul>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class="unit size1of3">
<div class="mod complex">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>complex</h3>
</div>
<div class="bd">
<p>complex should be used in cases where you require images for borders because borders or drop shadows are too complex to be simulated via borders on mod and/or inner. </p>
<ul class="simpleList">
<li>One image</li>
<li>Height and width limited by image size</li>
<li>Compatible with any content</li>
<li>Choose when you require complex borders which cannot be simulated via css borders on mod and inner.</li>
</ul>
<p>Inspired by a conversation with Arnaud.</p>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class="unit size1of3 lastUnit">
<div class="mod pop">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>pop </h3>
</div>
<div class="bd">
<p>Use for popups and other containers that need outside transparency.</p>
<ul class="simpleList">
<li>One image</li>
<li>Height and width limited by image size</li>
<li>Compatible with any container, but not any content</li>
<li>Choose when you require outside transparency which cannot be simulated. (do i need to make this work with clip rather than bkg position?)</li>
</ul>
<p>Inspired by Leslie Sommers mojo blocks.</p>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
</div>
<h2>Block Skins</h2>
<h3>Contour</h3>
<div class="line">
<div class=" unit size1of3">
<h4>Extends mod</h4>
<div class="mod grab">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>grab</h3>
</div>
<div class="bd">
<p>Body</p>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
<div class="mod simpleExt">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>simpleExt</h3>
</div>
<div class="bd">
<p>Body</p>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
<div class="mod simple">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>simple</h3>
</div>
<div class="bd">
<p>Body</p>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
<div class="mod noted">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>noted</h3>
</div>
<div class="bd">
<p>Body</p>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
<div class="mod talk">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>talk</h3>
</div>
<div class="bd">
<p>Body</p>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
<div class="mod me">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>me</h3>
</div>
<div class="bd">
<p>Body</p>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
<div class="mod basic">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>basic</h3>
</div>
<div class="bd">
<p>Must be combined with a background color or content, adds rounded corners.</p>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class=" unit size1of3">
<h4>Extends complex</h4>
<div class="mod complex excerpt">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd section">
<h3>excerpt</h3>
</div>
<div class="bd">
<p>Body</p>
</div>
<div class="ft act">
<p>Foot</p>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
<div class="mod complex flow">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>flow</h3>
</div>
<div class="bd">
<p><a href="#">Body</a></p>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
<!--<div class="mod boo">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>flow</h3>
</div>
<div class="bd">
<p><a href="#">Body</a></p>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>-->
<div class="mod complex photo">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="bd">
<img src="img/kakapo.png" alt="boo" />
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class=" unit size1of3 lastUnit">
<h4>Extends pop</h4>
<div class="mod pop sommers">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>sommers</h3>
</div>
<div class="bd">
<p>Body</p>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
<div class="mod pop gonzalo">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd gonz">
<h3>gonzalo</h3>
</div>
<div class="bd">
<p>Body</p>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
</div>
<h2>Background Objects</h2>
<div class="line">
<div class="unit size1of3">
<div class="mod highlight">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>highlight</h3>
</div>
<div class="bd">
<p>Body</p>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
<div class="mod universe">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>universe</h3>
</div>
<div class="bd">
<p>Body</p>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class="unit size1of3">
<div class="mod comment">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>comment</h3>
</div>
<div class="bd">
<p>Body</p>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
<div class="mod foo">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>foo</h3>
</div>
<div class="bd">
<p>Body</p>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class="unit size1of3 lastUnit">
<div class="mod nicole">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>nicole</h3>
</div>
<div class="bd">
<p>Body</p>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
<div class="mod login">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>login</h3>
</div>
<div class="bd">
<p>Body</p>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
</div>
<h2>Block Headers</h2>
<h3 class="bam">Bam</h3>
<br />
<h3 class="topper">Topper</h3>
<br />
<h3 class="section">Section</h3>
<h2>Block Footers</h2>
<div class="ft act">button here</div>
</div>
<!--<script type="text/javascript" src="http://webbits.pl/yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="http://webbits.pl/yui/build/dom/dom.js"></script>
<script type="text/javascript">
var currentStyles = YAHOO.util.Dom.getStyle(document.body, 'backgroundColor');
console.log(currentStyles);
</script>-->
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.