340 lines
10 KiB
HTML
340 lines
10 KiB
HTML
|
<!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="#CHEMIN{css/libraries.css}" />
|
||
|
|
<link rel="stylesheet" type="text/css" media="all" href="#CHEMIN{css/template.css}" />
|
||
|
|
<link rel="stylesheet" type="text/css" media="all" href="#CHEMIN{css/grids.css}" />
|
||
|
|
<link rel="stylesheet" type="text/css" media="all" href="#CHEMIN{css/content.css}" />
|
||
|
|
<link rel="stylesheet" type="text/css" media="all" href="#CHEMIN{css/mod.css}" />
|
||
|
|
<link rel="stylesheet" type="text/css" media="all" href="#CHEMIN{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 nicole">
|
||
|
|
<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>
|
||
|
|
</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>
|