Skip to content

Commit

Permalink
ready for mod release, updating all
Browse files Browse the repository at this point in the history
  • Loading branch information
@stubbornella
stubbornella committed Apr 16, 2009
1 parent 752d007 commit 8e6c6e7
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 44 deletions.
1 change: 1 addition & 0 deletions grids_docs.html
View file
Expand Up @@ -6,6 +6,7 @@
<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/grids_debug.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/content.css" />
<style type="text/css">
dt{font-weight:bold;}
Expand Down
87 changes: 59 additions & 28 deletions module.html
View file
Expand Up @@ -10,8 +10,7 @@
<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>
--></head>
<body>
<div class="page">
<h1>Modules</h1>
Expand All @@ -20,6 +19,7 @@ <h2>Block Structures</h2>
<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>
Expand All @@ -34,11 +34,12 @@ <h3>mod </h3>
</ul>
</div>
</div>
<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b>
<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>
Expand All @@ -47,18 +48,19 @@ <h3>complex</h3>
<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 only limited by image size</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="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b>
<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>
Expand All @@ -67,23 +69,24 @@ <h3>pop </h3>
<p>Use for popups and other containers that need outside transparency.</p>
<ul class="simpleList">
<li>One image</li>
<li>Height and width only limited by image size</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="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b>
<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 only</h4>
<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>
Expand All @@ -92,9 +95,10 @@ <h3>grab</h3>
<p>Body</p>
</div>
</div>
<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b>
<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>
Expand All @@ -103,9 +107,10 @@ <h3>simpleExt</h3>
<p>Body</p>
</div>
</div>
<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b>
<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>
Expand All @@ -114,9 +119,10 @@ <h3>simple</h3>
<p>Body</p>
</div>
</div>
<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b>
<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>
Expand All @@ -125,9 +131,10 @@ <h3>noted</h3>
<p>Body</p>
</div>
</div>
<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b>
<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>
Expand All @@ -136,9 +143,10 @@ <h3>talk</h3>
<p>Body</p>
</div>
</div>
<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b>
<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>
Expand All @@ -147,9 +155,10 @@ <h3>me</h3>
<p>Body</p>
</div>
</div>
<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b>
<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>
Expand All @@ -158,12 +167,13 @@ <h3>basic</h3>
<p>Must be combined with a background color or content, adds rounded corners.</p>
</div>
</div>
<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b>
<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>
Expand All @@ -175,31 +185,46 @@ <h3>excerpt</h3>
<p>Foot</p>
</div>
</div>
<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b>
<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>talk</h3>
<h3>flow</h3>
</div>
<div class="bd">
<p>Body</p>
<p><a href="#">Body</a></p>
</div>
</div>
<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b>
<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="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b>
<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>
Expand All @@ -208,14 +233,15 @@ <h3>sommers</h3>
<p>Body</p>
</div>
</div>
<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b>
<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>
Expand All @@ -224,9 +250,10 @@ <h3>highlight</h3>
<p>Body</p>
</div>
</div>
<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b>
<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>
Expand All @@ -235,11 +262,12 @@ <h3>universe</h3>
<p>Body</p>
</div>
</div>
<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b>
<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>
Expand All @@ -248,9 +276,10 @@ <h3>comment</h3>
<p>Body</p>
</div>
</div>
<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b>
<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>
Expand All @@ -259,11 +288,12 @@ <h3>foo</h3>
<p>Body</p>
</div>
</div>
<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class="unit size1of3">
<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>
Expand All @@ -272,9 +302,10 @@ <h3>nicole</h3>
<p>Body</p>
</div>
</div>
<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b>
<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>
Expand All @@ -283,7 +314,7 @@ <h3>login</h3>
<p>Body</p>
</div>
</div>
<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>

Expand Down
9 changes: 5 additions & 4 deletions template.html
View file
Expand Up @@ -5,17 +5,18 @@
<title>Template Documentation</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/template_debug.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" />
</head>
<body>
<h1>Template</h1>
<div id="page"><!-- what does yui call "main"? -->
<div id="hd">
<div class="page">
<div class="head">
<h2>Head</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="bd">
<div class="body">
<div class="leftCol">
<h2>Left Column</h2>
<p>Left column is 250px by default. It can be extended by several classes to allow for additional layouts.</p>
Expand All @@ -41,7 +42,7 @@ <h2>Main Content</h2>
<p>Main Content is fully liquid. It takes all the remaining space on the line after the widths of "leftCol" and "rightCol" are taken into account. Alternatively, grids can be used to break up the main content area for fully fluid layouts.</p>
</div>
</div>
<div id="ft">
<div class="foot">
<h2>Foot</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Expand Down

0 comments on commit 8e6c6e7

Please sign in to comment.