12/fixed/index.html 12/fixed/jquery/index.html 12/fixed/mootools/index.html 12/fixed/none/index.html 12/fluid/index.html 12/fluid/jquery/index.html 12/fluid/mootools/index.html 12/fluid/none/index.html 16/fixed/index.html 16/fixed/jquery/index.html 16/fixed/mootools/index.html 16/fixed/none/index.html 16/fluid/index.html 16/fluid/jquery/index.html 16/fluid/mootools/index.html 16/fluid/none/index.html data/ajax-response.html @@ -1,20 +1,15 @@ <!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" xml:lang="en" lang="en"> +<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Fluid 960 Grid System | 12-column Grid</title> - <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" /> - <link rel="stylesheet" type="text/css" href="css/text.css" media="screen" /> - <link rel="stylesheet" type="text/css" href="css/grid.css" media="screen" /> - <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" /> - <link rel="stylesheet" type="text/css" href="css/nav.css" media="screen" /> -  -  - <script type="text/javascript" src="js/mootools.js"></script> - <script type="text/javascript" src="js/fluid12.js"></script> - <script type="text/javascript" src="js/kwick.js"></script> - <script type="text/javascript" src="js/accordion.js"></script> - <script type="text/javascript" src="js/sectionmenu.js"></script> + <link rel="stylesheet" type="text/css" href="../css/reset.css" media="screen" /> + <link rel="stylesheet" type="text/css" href="../css/text.css" media="screen" /> + <link rel="stylesheet" type="text/css" href="../css/grid.css" media="screen" /> + <link rel="stylesheet" type="text/css" href="../css/layout.css" media="screen" /> + <link rel="stylesheet" type="text/css" href="../css/nav.css" media="screen" /> +  +  </head> <body> <div class="container_12"> @@ -27,195 +22,389 @@ <div class="grid_12"> <ul class="nav main"> <li> - <a name="mainmenu1">Menu 1</a> + <a href="../12/">Fluid 12-column</a> <ul> <li> - <a name="mainmenu1-submenu1">Submenu 1</a> + <a href="../12/fluid/mootools/">MooTools</a> </li> <li> - <a name="mainmenu1-submenu2">Submenu 2</a> + <a href="../12/fluid/jquery/">jQuery</a> </li> <li> - <a name="mainmenu1-submenu3">Submenu 3</a> - </li> - <li> - <a name="mainmenu1-submenu4">Submenu 4</a> - </li> - <li> - <a name="mainmenu1-submenu5">Submenu 5</a> + <a href="../12/fluid/none/">No Javascript</a> </li> </ul> </li> <li> - <a name="mainmenu2">Menu 2</a> + <a href="../16/">Fluid 16-column</a> <ul> <li> - <a name="mainmenu2-submenu1">Submenu 1</a> - </li> - <li> - <a name="mainmenu2-submenu2">Submenu 2</a> - </li> - <li> - <a name="mainmenu2-submenu3">Submenu 3</a> + <a href="../16/fluid/mootools/">MooTools</a> </li> <li> - <a name="mainmenu2-submenu4">Submenu 4</a> + <a href="../16/fluid/jquery/">jQuery</a> </li> <li> - <a name="mainmenu2-submenu5">Submenu 5</a> + <a href="../16/fluid/none/">No Javascript</a> </li> </ul> </li> <li> - <a name="mainmenu3">Menu 3</a> + <a href="../12/fixed/">Fixed 12-column</a> <ul> <li> - <a name="mainmenu3-submenu1">Submenu 1</a> - </li> - <li> - <a name="mainmenu3-submenu2">Submenu 2</a> + <a href="../12/fixed/mootools/">MooTools</a> </li> <li> - <a name="mainmenu3-submenu3">Submenu 3</a> + <a href="../12/fixed/jquery/">jQuery</a> </li> <li> - <a name="mainmenu3-submenu4">Submenu 4</a> - </li> - <li> - <a name="mainmenu3-submenu5">Submenu 5</a> + <a href="../12/fixed/none/">No Javascript</a> </li> </ul> </li> <li> - <a name="mainmenu4">Menu 4</a> + <a href="../16/fixed/">Fixed 16-column</a> <ul> <li> - <a name="mainmenu4-submenu1">Submenu 1</a> - </li> - <li> - <a name="mainmenu4-submenu2">Submenu 2</a> - </li> - <li> - <a name="mainmenu4-submenu3">Submenu 3</a> + <a href="../16/fixed/mootools/">MooTools</a> </li> <li> - <a name="mainmenu4-submenu4">Submenu 4</a> + <a href="../16/fixed/jquery/">jQuery</a> </li> <li> - <a name="mainmenu4-submenu5">Submenu 5</a> + <a href="../16/fixed/none/">No Javascript</a> </li> </ul> </li> - <li class="secondary"> - <a name="secondarymenu">Secondary Menu Item</a> + <li> + <a href="http://overture21.com/forum/comments.php?DiscussionID=231">Download / Forum</a> <ul> <li> - <a name="secondarymenu-submenu1">Submenu 1</a> - </li> - <li> - <a name="secondarymenu-submenu2">Submenu 2</a> + <a href="http://github.com/bauhouse/fluid960gs/tree/">Download: Github</a> </li> <li> - <a name="secondarymenu-submenu3">Submenu 3</a> + <a href="http://github.com/bauhouse/sym-fluid960gs/tree/">Symphony Ensemble</a> </li> <li> - <a name="secondarymenu-submenu4">Submenu 4</a> - </li> - <li> - <a name="secondarymenu-submenu5">Submenu 5</a> + <a href="http://overture21.com/forum/comments.php?DiscussionID=231">Forum Discussion</a> </li> </ul> </li> + <li class="secondary"> + <a href="http://960.gs/" title="960.gs | A CSS grid system developed by Nathan Smith">The 960 Grid System</a> + </li> </ul> </div> <div class="clear"></div> <div class="grid_12"> - <h2 id="page-heading">Page Heading</h2> + <h2 id="page-heading">Templates for Rapid Interactive Prototyping</h2> </div> <div class="clear"></div> - - <div class="box grid_12" style="padding:0;"><h2 style="margin:0"><a name="12-column" style="background-position:99.3% 50%" id="toggle-grid">12-column Grid</a></h2></div> + <div class="grid_3"> + <div class="box"> + <h2>Design Process</h2> + <div class="block"> + <p>Design is based on the inspiration of past accomplishments. On that foundation, we can build upon those achievements to shape the future. Design is about life — past, present and future — and the learning process that happens between birth and death. It is about community and shared knowledge and experience. It is the passion to build on what we've learned to create something better.</p> + </div> + </div> + </div> + <div class="grid_3"> + <div class="box"> + <h2>Design Influences</h2> + <div class="block"> + <p>The words "design influences" can be understood as both a plural noun and as subject and verb. The plural noun speaks of those who have come before us and paved the way. The verb speaks of the responsibility of design to lead the way. By understanding where we have come from, we have a better idea of where we are going and, perhaps, where we should be heading.</p> + </div> + </div> + </div> + <div class="grid_3"> + <div class="box"> + <h2>Inspiration</h2> + <div class="block"> + <p>I have been inspired by the work of many who have pioneered advances in Web Standards, including + <a href="http://www.31three.com/" title="www.31three.com">Jesse Bennett-Chamberlain</a>, + <a href="http://www.stopdesign.com/" title="www.stopdesign.com">Douglas Bowman</a>, + <a href="http://www.chaoticpattern.com/" title="www.chaoticpattern.com">Allen Chang</a>, + <a href="http://www.stuffandnonsense.co.uk/" title="www.stuffandnonsense.co.uk">Andy Clarke</a>, + <a href="http://www.hicksdesign.co.uk/" title="www.hicksdesign.co.uk">Jon Hicks</a>, + <a href="http://www.shauninman.com/" title="www.shauninman.com">Shaun Inman</a>, + <a href="http://www.cameronmoll.com/" title="www.cameronmoll.com">Cameron Moll</a>, + <a href="http://veerle.duoh.com/" title="veerle.duoh.com">Veerle Pieters</a>, + <a href="http://www.jasonsantamaria.com/" title="www.jasonsantamaria.com">Jason Santa Maria</a>, + <a href="http://www.mezzoblue.com/" title="www.mezzoblue.com">Dave Shea</a>, + <a href="http://www.thebignoob.com/" title="www.thebignoob.com">Ryan Sims</a>, + <a href="http://www.sonspring.com/" title="www.sonspring.com">Nathan Smith</a>, and + <a href="http://www.zeldman.com/" title="www.zeldman.com">Jeffrey Zeldman</a>, + to name a few. Thank you for inspiring <a href="http://www.domain7.com/WhoWeAre/StephenBau.html" title="Stephen Bau, Designer, Domain7">me</a> to give something back.</p> + </div> + </div> + </div> + <div class="grid_3"> + <div class="box"> + <h2>Contribution</h2> + <div class="block"> + <p>The <a href="/fluid960gs/">Fluid 960 Grid System</a> templates have been built upon the work of Nathan Smith and his <a href="http://960.gs/">960 Grid System</a> using effects from the <a href="http://mootools.net/">MooTools</a> JavaScript library. + The idea for building these templates was inspired by Andy Clarke, author of <a href="http://www.transcendingcss.com/">Transcending CSS</a>, who advocates a content-out approach to rapid interactive prototyping, crediting Jason Santa Maria with the <a href="http://www.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php">grey box method</a>.</p> + </div> + </div> + </div> + <div class="clear"></div> + <div class="box grid_12" style="padding:0;"> + <h2 style="margin:0"> + <a href="#" style="background-position:99.3% 50%" id="toggle-grid">12-column Grid</a> + </h2> + </div> <div class="clear"></div> - <div id="grid"> - - <div class="grid_1"><div class="box"><p>01</p></div></div> - <div class="grid_1"><div class="box"><p>02</p></div></div> - <div class="grid_1"><div class="box"><p>03</p></div></div> - <div class="grid_1"><div class="box"><p>04</p></div></div> - <div class="grid_1"><div class="box"><p>05</p></div></div> - <div class="grid_1"><div class="box"><p>06</p></div></div> - <div class="grid_1"><div class="box"><p>07</p></div></div> - <div class="grid_1"><div class="box"><p>08</p></div></div> - <div class="grid_1"><div class="box"><p>09</p></div></div> - <div class="grid_1"><div class="box"><p>10</p></div></div> - <div class="grid_1"><div class="box"><p>11</p></div></div> - <div class="grid_1"><div class="box"><p>12</p></div></div> + <div class="grid_1"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>03</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>04</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>05</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>06</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>07</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>08</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>09</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>10</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>11</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>12</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_2"><div class="box"><p>01</p></div></div> - <div class="grid_2"><div class="box"><p>02</p></div></div> - <div class="grid_2"><div class="box"><p>03</p></div></div> - <div class="grid_2"><div class="box"><p>04</p></div></div> - <div class="grid_2"><div class="box"><p>05</p></div></div> - <div class="grid_2"><div class="box"><p>06</p></div></div> + <div class="grid_2"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>03</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>04</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>05</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>06</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_3"><div class="box"><p>01</p></div></div> - <div class="grid_3"><div class="box"><p>02</p></div></div> - <div class="grid_3"><div class="box"><p>03</p></div></div> - <div class="grid_3"><div class="box"><p>04</p></div></div> + <div class="grid_3"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_3"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_3"> + <div class="box"> + <p>03</p> + </div> + </div> + <div class="grid_3"> + <div class="box"> + <p>04</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_4"><div class="box"><p>01</p></div></div> - <div class="grid_4"><div class="box"><p>02</p></div></div> - <div class="grid_4"><div class="box"><p>03</p></div></div> + <div class="grid_4"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_4"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_4"> + <div class="box"> + <p>03</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_5"><div class="box"><p>01</p></div></div> - <div class="grid_7"><div class="box"><p>02</p></div></div> + <div class="grid_5"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_7"> + <div class="box"> + <p>02</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_6"><div class="box"><p>01</p></div></div> - <div class="grid_6"><div class="box"><p>02</p></div></div> + <div class="grid_6"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_6"> + <div class="box"> + <p>02</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_1 suffix_11"><div class="box"><p>01</p></div></div> + <div class="grid_1 suffix_11"> + <div class="box"> + <p>01</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_1 suffix_10"><div class="box"><p>02</p></div></div> + <div class="grid_1 prefix_1 suffix_10"> + <div class="box"> + <p>02</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_2 suffix_9"><div class="box"><p>03</p></div></div> + <div class="grid_1 prefix_2 suffix_9"> + <div class="box"> + <p>03</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_3 suffix_8"><div class="box"><p>04</p></div></div> + <div class="grid_1 prefix_3 suffix_8"> + <div class="box"> + <p>04</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_4 suffix_7"><div class="box"><p>05</p></div></div> + <div class="grid_1 prefix_4 suffix_7"> + <div class="box"> + <p>05</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_5 suffix_6"><div class="box"><p>06</p></div></div> + <div class="grid_1 prefix_5 suffix_6"> + <div class="box"> + <p>06</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_6 suffix_5"><div class="box"><p>07</p></div></div> + <div class="grid_1 prefix_6 suffix_5"> + <div class="box"> + <p>07</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_7 suffix_4"><div class="box"><p>08</p></div></div> + <div class="grid_1 prefix_7 suffix_4"> + <div class="box"> + <p>08</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_8 suffix_3"><div class="box"><p>09</p></div></div> + <div class="grid_1 prefix_8 suffix_3"> + <div class="box"> + <p>09</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_9 suffix_2"><div class="box"><p>10</p></div></div> + <div class="grid_1 prefix_9 suffix_2"> + <div class="box"> + <p>10</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_10 suffix_1"><div class="box"><p>11</p></div></div> + <div class="grid_1 prefix_10 suffix_1"> + <div class="box"> + <p>11</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_11"><div class="box"><p>12</p></div></div> + <div class="grid_1 prefix_11"> + <div class="box"> + <p>12</p> + </div> + </div> <div class="clear"></div> - </div> - <div class="grid_12"> <div class="box" id="kwick-box"> <h2>Mootools Fx.Elements</h2> <div id="kwick"> <ul class="kwicks"> - <li><a class="kwick one" name="one"><span>One</span></a></li> - <li><a class="kwick two" name="two"><span>Two</span></a></li> - <li><a class="kwick three" name="three"><span>Three</span></a></li> - <li><a class="kwick four" name="four"><span>Four</span></a></li> + <li> + <a class="kwick one" href="#"> + <span>One</span> + </a> + </li> + <li> + <a class="kwick two" href="#"> + <span>Two</span> + </a> + </li> + <li> + <a class="kwick three" href="#"> + <span>Three</span> + </a> + </li> + <li> + <a class="kwick four" href="#"> + <span>Four</span> + </a> + </li> </ul> </div> </div> @@ -224,108 +413,106 @@ <div class="grid_3"> <div class="box"> <h2> - <a name="paragraph" id="toggle-paragraphs" class="hidden">Paragraphs</a> + <a href="#" id="toggle-paragraphs">Paragraphs</a> </h2> <div class="block" id="paragraphs"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> - <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="box"> <h2> - <a name="ajax" id="toggle-ajax" class="hidden"> - <img src="img/ajax-loader.gif" id="loading" alt="Loading" /> - Ajax Content - </a> + <a href="#" id="toggle-ajax" class="hidden"><img src="../img/ajax-loader.gif" id="loading" alt="Loading" /> + Ajax Content + </a> </h2> <div class="block" id="ajax-content"> - Content loaded dynamically - </div> + Content loaded dynamically + </div> </div> <div class="box menu"> <h2> - <a name="section-menu" id="toggle-section-menu">Section Menu</a> + <a href="#" id="toggle-section-menu">Section Menu</a> </h2> <div class="block" id="section-menu"> <ul class="section menu"> <li> - <a name="menu1" class="menuitem">Menu 1</a> + <a class="menuitem">Menu 1</a> <ul class="submenu"> <li> - <a name="menu1-submenu1">Submenu 1</a> + <a>Submenu 1</a> </li> <li> - <a name="menu1-submenu2">Submenu 2</a> + <a>Submenu 2</a> </li> <li> - <a name="menu1-submenu3" class="active">Submenu 3</a> + <a class="active">Submenu 3</a> </li> <li> - <a name="menu1-submenu4">Submenu 4</a> + <a>Submenu 4</a> </li> <li> - <a name="menu1-submenu5">Submenu 5</a> + <a>Submenu 5</a> </li> </ul> </li> <li> - <a name="menu2" class="menuitem">Menu 2</a> + <a class="menuitem">Menu 2</a> <ul class="submenu"> <li> - <a name="menu2-submenu1">Submenu 1</a> + <a>Submenu 1</a> </li> <li> - <a name="menu2-submenu2">Submenu 2</a> + <a>Submenu 2</a> </li> <li> - <a name="menu2-submenu3">Submenu 3</a> + <a>Submenu 3</a> </li> <li> - <a name="menu2-submenu4">Submenu 4</a> + <a>Submenu 4</a> </li> <li> - <a name="menu2-submenu5">Submenu 5</a> + <a>Submenu 5</a> </li> </ul> </li> <li> - <a name="menu3" class="menuitem">Menu 3</a> + <a class="menuitem">Menu 3</a> <ul class="submenu"> <li> - <a name="menu3-submenu1">Submenu 1</a> + <a>Submenu 1</a> </li> <li> - <a name="menu3-submenu2">Submenu 2</a> + <a>Submenu 2</a> </li> <li> - <a name="menu3-submenu3">Submenu 3</a> + <a>Submenu 3</a> </li> <li> - <a name="menu3-submenu4">Submenu 4</a> + <a>Submenu 4</a> </li> <li> - <a name="menu3-submenu5">Submenu 5</a> + <a>Submenu 5</a> </li> </ul> </li> <li> - <a name="menu4" class="menuitem">Menu 4</a> + <a class="menuitem">Menu 4</a> <ul class="submenu"> <li> - <a name="menu4-submenu1">Submenu 1</a> + <a>Submenu 1</a> </li> <li> - <a name="menu4-submenu2">Submenu 2</a> + <a>Submenu 2</a> </li> <li> - <a name="menu4-submenu3">Submenu 3</a> + <a>Submenu 3</a> </li> <li> - <a name="menu4-submenu4">Submenu 4</a> + <a>Submenu 4</a> </li> <li> - <a name="menu4-submenu5">Submenu 5</a> + <a>Submenu 5</a> </li> </ul> </li> @@ -334,44 +521,44 @@ </div> <div class="box"> <h2> - <a name="list-items" id="toggle-list-items">List Items</a> + <a href="#" id="toggle-list-items">List Items</a> </h2> <div class="block" id="list-items"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. </p> <h5>A menu</h5> <ul class="menu"> <li> - <a name="item1">Item 1</a> + <a href="#">Item 1</a> </li> <li> - <a name="item2">Item 2</a> + <a href="#">Item 2</a> </li> <li> - <a name="item3">Item 3</a> + <a href="#">Item 3</a> </li> </ul> <h5>An unordered list</h5> <ul> <li> - <a name="item1">Item 1</a> + <a href="#">Item 1</a> </li> <li> - <a name="item2">Item 2</a> + <a href="#">Item 2</a> </li> <li> - <a name="item3">Item 3</a> + <a href="#">Item 3</a> </li> </ul> <h5>An ordered list</h5> <ol> <li> - <a name="item1">Item 1</a> + <a href="#">Item 1</a> </li> <li> - <a name="item2">Item 2</a> + <a href="#">Item 2</a> </li> <li> - <a name="item3">Item 3</a> + <a href="#">Item 3</a> </li> </ol> </div> @@ -379,13 +566,15 @@ </div> <div class="grid_5"> <div class="box"> - <h2><a name="accordian" id="toggle-accordian">Accordian</a></h2> - <div class="block" id="accordian-block"> + <h2> + <a href="#" id="toggle-accordion">Accordion</a> + </h2> + <div class="block" id="accordion"> <div id="accordion"> <h3 class="toggler atStart">Design Process</h3> <div class="element atStart"> <h4>The Value of Design</h4> - <p>Design is based on the inspiration of past accomplishments. On that foundation, we can build upon those achievements to shape the future. Design is about life — past, present and future — and the learning process that happens between birth and death. It is about community and shared knowledge and experience. It is the passion to build on what we've learned to create something better.</p> + <p>Design is based on the inspiration of past accomplishments. On that foundation, we can build upon those achievements to shape the future. Design is about life — past, present and future — and the learning process that happens between birth and death. It is about community and shared knowledge and experience. It is the passion to build on what we've learned to create something better.</p> </div> <h3 class="toggler atStart">Design Influences</h3> <div class="element atStart"> @@ -396,20 +585,20 @@ <div class="element atStart"> <h4>Inspired by the Past</h4> <p>I have been inspired by the work of many who have pioneered advances in Web Standards, including - <a href="http://www.31three.com/" title="www.31three.com">Jesse Bennett-Chamberlain</a>, - <a href="http://www.stopdesign.com/" title="www.stopdesign.com">Douglas Bowman</a>, - <a href="http://www.chaoticpattern.com/" title="www.chaoticpattern.com">Allen Chang</a>, - <a href="http://www.stuffandnonsense.co.uk/" title="www.stuffandnonsense.co.uk">Andy Clarke</a>, - <a href="http://www.hicksdesign.co.uk/" title="www.hicksdesign.co.uk">Jon Hicks</a>, - <a href="http://www.shauninman.com/" title="www.shauninman.com">Shaun Inman</a>, - <a href="http://www.cameronmoll.com/" title="www.cameronmoll.com">Cameron Moll</a>, - <a href="http://veerle.duoh.com/" title="veerle.duoh.com">Veerle Pieters</a>, - <a href="http://www.jasonsantamaria.com/" title="www.jasonsantamaria.com">Jason Santa Maria</a>, - <a href="http://www.mezzoblue.com/" title="www.mezzoblue.com">Dave Shea</a>, - <a href="http://www.thebignoob.com/" title="www.thebignoob.com">Ryan Sims</a>, - <a href="http://www.sonspring.com/" title="www.sonspring.com">Nathan Smith</a>, and - <a href="http://www.zeldman.com/" title="www.zeldman.com">Jeffrey Zeldman</a>, - to name a few. Thank you for inspiring <a href="http://www.domain7.com/WhoWeAre/StephenBau.html" title="Stephen Bau, Designer, Domain7">me</a> to give something back.</p> + <a href="http://www.31three.com/" title="www.31three.com">Jesse Bennett-Chamberlain</a>, + <a href="http://www.stopdesign.com/" title="www.stopdesign.com">Douglas Bowman</a>, + <a href="http://www.chaoticpattern.com/" title="www.chaoticpattern.com">Allen Chang</a>, + <a href="http://www.stuffandnonsense.co.uk/" title="www.stuffandnonsense.co.uk">Andy Clarke</a>, + <a href="http://www.hicksdesign.co.uk/" title="www.hicksdesign.co.uk">Jon Hicks</a>, + <a href="http://www.shauninman.com/" title="www.shauninman.com">Shaun Inman</a>, + <a href="http://www.cameronmoll.com/" title="www.cameronmoll.com">Cameron Moll</a>, + <a href="http://veerle.duoh.com/" title="veerle.duoh.com">Veerle Pieters</a>, + <a href="http://www.jasonsantamaria.com/" title="www.jasonsantamaria.com">Jason Santa Maria</a>, + <a href="http://www.mezzoblue.com/" title="www.mezzoblue.com">Dave Shea</a>, + <a href="http://www.thebignoob.com/" title="www.thebignoob.com">Ryan Sims</a>, + <a href="http://www.sonspring.com/" title="www.sonspring.com">Nathan Smith</a>, and + <a href="http://www.zeldman.com/" title="www.zeldman.com">Jeffrey Zeldman</a>, + to name a few. Thank you for inspiring <a href="http://www.domain7.com/WhoWeAre/StephenBau.html" title="Stephen Bau, Designer, Domain7">me</a> to give something back.</p> </div> <h3 class="toggler atStart">Contribution</h3> <div class="element atStart"> @@ -421,18 +610,20 @@ </div> <div class="box"> <h2> - <a name="blockquote" id="toggle-blockquote">Blockquote</a> + <a href="#" id="toggle-blockquote">Blockquote</a> </h2> <div class="block" id="blockquote"> <blockquote> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> - <p class="cite"><cite>John Smith</cite></p> + <p class="cite"> + <cite>John Smith</cite> + </p> </blockquote> </div> </div> <div class="box"> <h2> - <a name="tables" id="toggle-tables">Tables</a> + <a href="#" id="toggle-tables">Tables</a> </h2> <div class="block" id="tables"> <table> @@ -465,9 +656,9 @@ <table summary="This table includes examples of as many table elements as possible"> <caption>An example table</caption> <colgroup> - <col class="colA"/> - <col class="colB"/> - <col class="colC"/> + <col class="colA" /> + <col class="colB" /> + <col class="colC" /> </colgroup> <thead> <tr> @@ -523,103 +714,138 @@ </div> <div class="box"> <h2> - <a name="forms" id="toggle-forms">Forms</a> + <a href="#" id="toggle-forms">Forms</a> </h2> <div class="block" id="forms"> <form action=""> <fieldset class="login"> <legend>Login Information</legend> - <p><label>Username: </label><input type="text" name="username" value="" /></p> - <p><label>Password: </label><input type="password" name="password" /></p> - <p><label>Re-type Password: </label><input type="password" name="password2" /></p> + <p> + <label>Username: </label> + <input type="text" name="username" value="" /> + </p> + <p> + <label>Password: </label> + <input type="password" name="password" /> + </p> + <p> + <label>Re-type Password: </label> + <input type="password" name="password2" /> + </p> <input class="confirm button" type="submit" value="Confirm Availability" /> </fieldset> <fieldset> <legend>Personal Information</legend> - <p><label>First Name: </label><input type="text" name="first-name" value="" /></p> - <p><label>Last Name: </label><input type="text" name="last-name" value="" /></p> - <p><label>Address: </label><input type="text" name="address1" value="" /></p> - <p><label>Address 2: </label><input type="text" name="address2" value="" /></p> - <p><label>City: </label><input type="text" name="city" value="" /></p> - <p><label>State/Province: </label> - <select name="State"> - <option value="" >Select State/Province...</option> - <option value="AL">Alabama </option> - <option value="AK">Alaska </option> - <option value="AB">Alberta </option> - <option value="AZ">Arizona </option> - <option value="AR">Arkansas </option> - <option value="BC">British Columbia </option> - <option value="CA">California </option> - <option value="CO">Colorado </option> - <option value="CT">Connecticut </option> - <option value="DE">Delaware </option> - <option value="DC">District of Columbia </option> - <option value="FL">Florida </option> - <option value="GA">Georgia </option> - <option value="HI">Hawaii </option> - <option value="ID">Idaho </option> - <option value="IL">Illinois </option> - <option value="IN">Indiana </option> - <option value="IA">Iowa </option> - <option value="KS">Kansas </option> - <option value="KY">Kentucky </option> - <option value="LA">Louisiana </option> - <option value="ME">Maine </option> - <option value="MB">Manitoba </option> - <option value="MD">Maryland </option> - <option value="MA">Massachusetts </option> - <option value="MI">Michigan </option> - <option value="MN">Minnesota </option> - <option value="MS">Mississippi </option> - <option value="MO">Missouri </option> - <option value="MT">Montana </option> - <option value="NE">Nebraska </option> - <option value="NV">Nevada </option> - <option value="NB">New Brunswick </option> - <option value="NH">New Hampshire </option> - <option value="NJ">New Jersey </option> - <option value="NM">New Mexico </option> - <option value="NY">New York </option> - <option value="NF">Newfoundland </option> - <option value="NC">North Carolina </option> - <option value="ND">North Dakota </option> - <option value="NT">Northwest Territories </option> - <option value="NS">Nova Scotia </option> - <option value="OH">Ohio </option> - <option value="OK">Oklahoma </option> - <option value="ON">Ontario </option> - <option value="OR">Oregon </option> - <option value="PA">Pennsylvania </option> - <option value="PE">Prince Edward Island </option> - <option value="PR">Puerto Rico </option> - <option value="QC">Quebec </option> - <option value="RI">Rhode Island </option> - <option value="SK">Saskatchewan </option> - <option value="SC">South Carolina </option> - <option value="SD">South Dakota </option> - <option value="TN">Tennessee </option> - <option value="TX">Texas </option> - <option value="UT">Utah </option> - <option value="VT">Vermont </option> - <option value="VA">Virginia </option> - <option value="WA">Washington </option> - <option value="WV">West Virginia </option> - <option value="WI">Wisconsin </option> - <option value="WY">Wyoming </option> + <p> + <label>First Name: </label> + <input type="text" name="first-name" value="" /> + </p> + <p> + <label>Last Name: </label> + <input type="text" name="last-name" value="" /> + </p> + <p> + <label>Address: </label> + <input type="text" name="address1" value="" /> + </p> + <p> + <label>Address 2: </label> + <input type="text" name="address2" value="" /> + </p> + <p> + <label>City: </label> + <input type="text" name="city" value="" /> + </p> + <p> + <label>State/Province: </label> + <select name="State"> + <option value="">Select State/Province...</option> + <option value="AL">Alabama </option> + <option value="AK">Alaska </option> + <option value="AB">Alberta </option> + <option value="AZ">Arizona </option> + <option value="AR">Arkansas </option> + <option value="BC">British Columbia </option> + <option value="CA">California </option> + <option value="CO">Colorado </option> + <option value="CT">Connecticut </option> + <option value="DE">Delaware </option> + <option value="DC">District of Columbia </option> + <option value="FL">Florida </option> + <option value="GA">Georgia </option> + <option value="HI">Hawaii </option> + <option value="ID">Idaho </option> + <option value="IL">Illinois </option> + <option value="IN">Indiana </option> + <option value="IA">Iowa </option> + <option value="KS">Kansas </option> + <option value="KY">Kentucky </option> + <option value="LA">Louisiana </option> + <option value="ME">Maine </option> + <option value="MB">Manitoba </option> + <option value="MD">Maryland </option> + <option value="MA">Massachusetts </option> + <option value="MI">Michigan </option> + <option value="MN">Minnesota </option> + <option value="MS">Mississippi </option> + <option value="MO">Missouri </option> + <option value="MT">Montana </option> + <option value="NE">Nebraska </option> + <option value="NV">Nevada </option> + <option value="NB">New Brunswick </option> + <option value="NH">New Hampshire </option> + <option value="NJ">New Jersey </option> + <option value="NM">New Mexico </option> + <option value="NY">New York </option> + <option value="NF">Newfoundland </option> + <option value="NC">North Carolina </option> + <option value="ND">North Dakota </option> + <option value="NT">Northwest Territories </option> + <option value="NS">Nova Scotia </option> + <option value="OH">Ohio </option> + <option value="OK">Oklahoma </option> + <option value="ON">Ontario </option> + <option value="OR">Oregon </option> + <option value="PA">Pennsylvania </option> + <option value="PE">Prince Edward Island </option> + <option value="PR">Puerto Rico </option> + <option value="QC">Quebec </option> + <option value="RI">Rhode Island </option> + <option value="SK">Saskatchewan </option> + <option value="SC">South Carolina </option> + <option value="SD">South Dakota </option> + <option value="TN">Tennessee </option> + <option value="TX">Texas </option> + <option value="UT">Utah </option> + <option value="VT">Vermont </option> + <option value="VA">Virginia </option> + <option value="WA">Washington </option> + <option value="WV">West Virginia </option> + <option value="WI">Wisconsin </option> + <option value="WY">Wyoming </option> <option value="YT">Yukon </option> </select> </p> - <p><label>Country: </label> - <select name="Country"> + <p> + <label>Country: </label> + <select name="Country"> <option value="">Select Country...</option> - <option value="Canada">Canada</option> + <option value="Canada">Canada</option> <option value="United States">United States</option> </select> </p> - <p><label>Zip/Postal Code: </label><input type="text" name="zipcode" value="" /></p> - <p><label>Phone Number: </label><input type="text" name="phone" value="" /></p> - <p><label>Email Address: </label><input type="text" name="email" value="" /></p> + <p> + <label>Zip/Postal Code: </label> + <input type="text" name="zipcode" value="" /> + </p> + <p> + <label>Phone Number: </label> + <input type="text" name="phone" value="" /> + </p> + <p> + <label>Email Address: </label> + <input type="text" name="email" value="" /> + </p> <input type="submit" value="Register" class="register-button" /> </fieldset> </form> @@ -629,28 +855,34 @@ <div class="grid_4"> <div class="box"> <h2> - <a name="search" id="toggle-search">Search</a> + <a href="#" id="toggle-search">Search</a> </h2> <div class="block" id="search"> <form method="get" action="" class="search"> <p> - <input class="search text" name="value" type="text"/> - <input class="search button" value="Search" type="submit"/> + <input class="search text" name="value" type="text" /> + <input class="search button" value="Search" type="submit" /> </p> </form> </div> </div> <div class="box"> <h2> - <a name="login-forms" id="toggle-login-forms">Login Forms</a> + <a href="#" id="toggle-login-forms">Login Forms</a> </h2> <div class="block" id="login-forms"> <form action=""> <fieldset class="login"> <legend>Login</legend> <p class="notice">Login to complete your purchase.</p> - <p><label>Username: </label><input type="text" name="username" /></p> - <p><label>Password: </label><input type="password" name="password" /></p> + <p> + <label>Username: </label> + <input type="text" name="username" /> + </p> + <p> + <label>Password: </label> + <input type="password" name="password" /> + </p> <input class="login button" type="submit" value="Login" /> </fieldset> </form> @@ -665,31 +897,41 @@ </div> <div class="box articles"> <h2> - <a name="articles" id="toggle-articles">Articles</a> + <a href="#" id="toggle-articles">Articles</a> </h2> <div class="block" id="articles"> <div class="first article"> - <h3><a name="heading1">Article Heading</a></h3> + <h3> + <a href="#">Article Heading</a> + </h3> <h4>Subheading</h4> - <p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p> - <a name="image1" class="image"><img src="img/photo_60x60.jpg" width="60" height="60" alt="photo"/></a> - <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a name="link1">Visit site.</a></p> + <p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p> + <a href="#" class="image"> + <img src="../img/photo_60x60.jpg" width="60" height="60" alt="photo" /> + </a> + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a href="#">Visit site.</a></p> </div> <div class="article"> - <h3><a name="heading2">Article Heading</a></h3> + <h3> + <a href="#">Article Heading</a> + </h3> <h4>Subheading</h4> - <p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p> - <a name="image2" class="image"><img src="img/photo_60x60.jpg" width="60" height="60" alt="photo"/></a> - <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a name="link2">Visit site.</a></p> + <p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p> + <a href="#" class="image"> + <img src="../img/photo_60x60.jpg" width="60" height="60" alt="photo" /> + </a> + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a href="#">Visit site.</a></p> </div> <div class="article"> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> - <p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p> - <a name="image3" class="image"><img src="img/photo_60x60.jpg" width="60" height="60" alt="photo"/></a> - <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a name="link3">Visit site.</a></p> + <p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p> + <a href="#" class="image"> + <img src="../img/photo_60x60.jpg" width="60" height="60" alt="photo" /> + </a> + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a href="#">Visit site.</a></p> <h5>Heading 5</h5> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> <h6>Heading 6</h6> @@ -702,12 +944,13 @@ <div class="grid_12" id="site_info"> <div class="box"> <p>Fluid 960 Grid System, created by <a href="http://www.domain7.com/WhoWeAre/StephenBau.html">Stephen Bau</a>, based on the <a href="http://960.gs/">960 Grid System</a> by <a href="http://sonspring.com/journal/960-grid-system">Nathan Smith</a>. Released under the - <a href="licenses/GPL_license.txt">GPL</a>/ - <a href="licenses/MIT_license.txt">MIT</a> - <a href="README.txt">Licenses</a>.</p> + <a href="../licenses/GPL_license.txt">GPL</a> / <a href="../licenses/MIT_license.txt">MIT</a> <a href="../README.txt">Licenses</a>.</p> </div> </div> <div class="clear"></div> </div> + <script type="text/javascript" src="../js/mootools-1.2.1-core.js"></script> + <script type="text/javascript" src="../js/mootools-1.2-more.js"></script> + <script type="text/javascript" src="../js/mootools-fluid16-autoselect.js"></script> </body> </html> \ No newline at end of file 12/index.html @@ -1,20 +1,15 @@ <!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" xml:lang="en" lang="en"> +<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Fluid 960 Grid System | 16-column Grid</title> - <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" /> - <link rel="stylesheet" type="text/css" href="css/text.css" media="screen" /> - <link rel="stylesheet" type="text/css" href="css/grid.css" media="screen" /> - <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" /> - <link rel="stylesheet" type="text/css" href="css/nav.css" media="screen" /> -  -  - <script type="text/javascript" src="js/mootools.js"></script> - <script type="text/javascript" src="js/fluid16.js"></script> - <script type="text/javascript" src="js/kwick.js"></script> - <script type="text/javascript" src="js/accordion.js"></script> - <script type="text/javascript" src="js/sectionmenu.js"></script> + <link rel="stylesheet" type="text/css" href="../css/reset.css" media="screen" /> + <link rel="stylesheet" type="text/css" href="../css/text.css" media="screen" /> + <link rel="stylesheet" type="text/css" href="../css/grid.css" media="screen" /> + <link rel="stylesheet" type="text/css" href="../css/layout.css" media="screen" /> + <link rel="stylesheet" type="text/css" href="../css/nav.css" media="screen" /> +  +  </head> <body> <div class="container_16"> @@ -27,332 +22,598 @@ <div class="grid_16"> <ul class="nav main"> <li> - <a name="mainmenu1">Menu 1</a> + <a href="../12/">Fluid 12-column</a> <ul> <li> - <a name="mainmenu1-submenu1">Submenu 1</a> + <a href="../12/fluid/mootools/">MooTools</a> </li> <li> - <a name="mainmenu1-submenu2">Submenu 2</a> + <a href="../12/fluid/jquery/">jQuery</a> </li> <li> - <a name="mainmenu1-submenu3">Submenu 3</a> - </li> - <li> - <a name="mainmenu1-submenu4">Submenu 4</a> - </li> - <li> - <a name="mainmenu1-submenu5">Submenu 5</a> + <a href="../12/fluid/none/">No Javascript</a> </li> </ul> </li> <li> - <a name="mainmenu2">Menu 2</a> + <a href="../16/">Fluid 16-column</a> <ul> <li> - <a name="mainmenu2-submenu1">Submenu 1</a> + <a href="../16/fluid/mootools/">MooTools</a> </li> <li> - <a name="mainmenu2-submenu2">Submenu 2</a> + <a href="../16/fluid/jquery/">jQuery</a> </li> <li> - <a name="mainmenu2-submenu3">Submenu 3</a> - </li> - <li> - <a name="mainmenu2-submenu4">Submenu 4</a> - </li> - <li> - <a name="mainmenu2-submenu5">Submenu 5</a> + <a href="../16/fluid/none/">No Javascript</a> </li> </ul> </li> <li> - <a name="mainmenu3">Menu 3</a> + <a href="../12/fixed/">Fixed 12-column</a> <ul> <li> - <a name="mainmenu3-submenu1">Submenu 1</a> - </li> - <li> - <a name="mainmenu3-submenu2">Submenu 2</a> - </li> - <li> - <a name="mainmenu3-submenu3">Submenu 3</a> + <a href="../12/fixed/mootools/">MooTools</a> </li> <li> - <a name="mainmenu3-submenu4">Submenu 4</a> + <a href="../12/fixed/jquery/">jQuery</a> </li> <li> - <a name="mainmenu3-submenu5">Submenu 5</a> + <a href="../12/fixed/none/">No Javascript</a> </li> </ul> </li> <li> - <a name="mainmenu4">Menu 4</a> + <a href="../16/fixed/">Fixed 16-column</a> <ul> <li> - <a name="mainmenu4-submenu1">Submenu 1</a> - </li> - <li> - <a name="mainmenu4-submenu2">Submenu 2</a> + <a href="../16/fixed/mootools/">MooTools</a> </li> <li> - <a name="mainmenu4-submenu3">Submenu 3</a> + <a href="../16/fixed/jquery/">jQuery</a> </li> <li> - <a name="mainmenu4-submenu4">Submenu 4</a> - </li> - <li> - <a name="mainmenu4-submenu5">Submenu 5</a> + <a href="../16/fixed/none/">No Javascript</a> </li> </ul> </li> - <li class="secondary"> - <a name="secondarymenu">Secondary Menu Item</a> + <li> + <a href="http://overture21.com/forum/comments.php?DiscussionID=231">Download / Forum</a> <ul> <li> - <a name="secondarymenu-submenu1">Submenu 1</a> + <a href="http://github.com/bauhouse/fluid960gs/tree/">Download: Github</a> </li> <li> - <a name="secondarymenu-submenu2">Submenu 2</a> + <a href="http://github.com/bauhouse/sym-fluid960gs/tree/">Symphony Ensemble</a> </li> <li> - <a name="secondarymenu-submenu3">Submenu 3</a> - </li> - <li> - <a name="secondarymenu-submenu4">Submenu 4</a> - </li> - <li> - <a name="secondarymenu-submenu5">Submenu 5</a> + <a href="http://overture21.com/forum/comments.php?DiscussionID=231">Forum Discussion</a> </li> </ul> </li> + <li class="secondary"> + <a href="http://960.gs/" title="960.gs | A CSS grid system developed by Nathan Smith">The 960 Grid System</a> + </li> </ul> </div> <div class="clear"></div> <div class="grid_16"> - <h2 id="page-heading">Page Heading</h2> + <h2 id="page-heading">Templates for Rapid Interactive Prototyping</h2> + </div> + <div class="clear"></div> + <div class="grid_4"> + <div class="box"> + <h2>Design Process</h2> + <div class="block"> + <p>Design is based on the inspiration of past accomplishments. On that foundation, we can build upon those achievements to shape the future. Design is about life — past, present and future — and the learning process that happens between birth and death. It is about community and shared knowledge and experience. It is the passion to build on what we've learned to create something better.</p> + </div> + </div> + </div> + <div class="grid_4"> + <div class="box"> + <h2>Design Influences</h2> + <div class="block"> + <p>The words "design influences" can be understood as both a plural noun and as subject and verb. The plural noun speaks of those who have come before us and paved the way. The verb speaks of the responsibility of design to lead the way. By understanding where we have come from, we have a better idea of where we are going and, perhaps, where we should be heading.</p> + </div> + </div> + </div> + <div class="grid_4"> + <div class="box"> + <h2>Inspiration</h2> + <div class="block"> + <p>I have been inspired by the work of many who have pioneered advances in Web Standards, including + <a href="http://www.31three.com/" title="www.31three.com">Jesse Bennett-Chamberlain</a>, + <a href="http://www.stopdesign.com/" title="www.stopdesign.com">Douglas Bowman</a>, + <a href="http://www.chaoticpattern.com/" title="www.chaoticpattern.com">Allen Chang</a>, + <a href="http://www.stuffandnonsense.co.uk/" title="www.stuffandnonsense.co.uk">Andy Clarke</a>, + <a href="http://www.hicksdesign.co.uk/" title="www.hicksdesign.co.uk">Jon Hicks</a>, + <a href="http://www.shauninman.com/" title="www.shauninman.com">Shaun Inman</a>, + <a href="http://www.cameronmoll.com/" title="www.cameronmoll.com">Cameron Moll</a>, + <a href="http://veerle.duoh.com/" title="veerle.duoh.com">Veerle Pieters</a>, + <a href="http://www.jasonsantamaria.com/" title="www.jasonsantamaria.com">Jason Santa Maria</a>, + <a href="http://www.mezzoblue.com/" title="www.mezzoblue.com">Dave Shea</a>, + <a href="http://www.thebignoob.com/" title="www.thebignoob.com">Ryan Sims</a>, + <a href="http://www.sonspring.com/" title="www.sonspring.com">Nathan Smith</a>, and + <a href="http://www.zeldman.com/" title="www.zeldman.com">Jeffrey Zeldman</a>, + to name a few. Thank you for inspiring <a href="http://www.domain7.com/WhoWeAre/StephenBau.html" title="Stephen Bau, Designer, Domain7">me</a> to give something back.</p> + </div> + </div> + </div> + <div class="grid_4"> + <div class="box"> + <h2>Contribution</h2> + <div class="block"> + <p>The <a href="/fluid960gs/">Fluid 960 Grid System</a> templates have been built upon the work of Nathan Smith and his <a href="http://960.gs/">960 Grid System</a> using effects from the <a href="http://mootools.net/">MooTools</a> and <a href="http://jquery.com/">jQuery</a> JavaScript libraries. + The idea for building these templates was inspired by Andy Clarke, author of <a href="http://www.transcendingcss.com/">Transcending CSS</a>, who advocates a content-out approach to rapid interactive prototyping, crediting Jason Santa Maria with the <a href="http://www.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php">grey box method</a>.</p> + </div> + </div> </div> <div class="clear"></div> - - <div class="box grid_16" style="padding:0;"><h2 style="margin:0"><a href="16-column" style="background-position:99.3% 50%" id="toggle-grid">16-column Grid</a></h2></div> + <div class="box grid_16" style="padding:0;"> + <h2 style="margin:0"> + <a href="#" style="background-position:99.3% 50%" id="toggle-grid">16-column Grid</a> + </h2> + </div> <div class="clear"></div> - <div id="grid"> - - <div class="grid_1"><div class="box"><p>01</p></div></div> - <div class="grid_1"><div class="box"><p>02</p></div></div> - <div class="grid_1"><div class="box"><p>03</p></div></div> - <div class="grid_1"><div class="box"><p>04</p></div></div> - <div class="grid_1"><div class="box"><p>05</p></div></div> - <div class="grid_1"><div class="box"><p>06</p></div></div> - <div class="grid_1"><div class="box"><p>07</p></div></div> - <div class="grid_1"><div class="box"><p>08</p></div></div> - <div class="grid_1"><div class="box"><p>09</p></div></div> - <div class="grid_1"><div class="box"><p>10</p></div></div> - <div class="grid_1"><div class="box"><p>11</p></div></div> - <div class="grid_1"><div class="box"><p>12</p></div></div> - <div class="grid_1"><div class="box"><p>13</p></div></div> - <div class="grid_1"><div class="box"><p>14</p></div></div> - <div class="grid_1"><div class="box"><p>15</p></div></div> - <div class="grid_1"><div class="box"><p>16</p></div></div> + <div class="grid_1"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>03</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>04</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>05</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>06</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>07</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>08</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>09</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>10</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>11</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>12</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>13</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>14</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>15</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>16</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_2"><div class="box"><p>01</p></div></div> - <div class="grid_2"><div class="box"><p>02</p></div></div> - <div class="grid_2"><div class="box"><p>03</p></div></div> - <div class="grid_2"><div class="box"><p>04</p></div></div> - <div class="grid_2"><div class="box"><p>05</p></div></div> - <div class="grid_2"><div class="box"><p>06</p></div></div> - <div class="grid_2"><div class="box"><p>07</p></div></div> - <div class="grid_2"><div class="box"><p>08</p></div></div> + <div class="grid_2"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>03</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>04</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>05</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>06</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>07</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>08</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_3"><div class="box"><p>01</p></div></div> - <div class="grid_3"><div class="box"><p>02</p></div></div> - <div class="grid_3"><div class="box"><p>03</p></div></div> - <div class="grid_3"><div class="box"><p>04</p></div></div> - <div class="grid_4"><div class="box"><p>05</p></div></div> + <div class="grid_3"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_3"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_3"> + <div class="box"> + <p>03</p> + </div> + </div> + <div class="grid_3"> + <div class="box"> + <p>04</p> + </div> + </div> + <div class="grid_4"> + <div class="box"> + <p>05</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_4"><div class="box"><p>01</p></div></div> - <div class="grid_4"><div class="box"><p>02</p></div></div> - <div class="grid_4"><div class="box"><p>03</p></div></div> - <div class="grid_4"><div class="box"><p>04</p></div></div> + <div class="grid_4"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_4"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_4"> + <div class="box"> + <p>03</p> + </div> + </div> + <div class="grid_4"> + <div class="box"> + <p>04</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_5"><div class="box"><p>01</p></div></div> - <div class="grid_5"><div class="box"><p>02</p></div></div> - <div class="grid_6"><div class="box"><p>03</p></div></div> + <div class="grid_5"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_5"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_6"> + <div class="box"> + <p>03</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_6"><div class="box"><p>01</p></div></div> - <div class="grid_5"><div class="box"><p>02</p></div></div> - <div class="grid_5"><div class="box"><p>03</p></div></div> + <div class="grid_6"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_5"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_5"> + <div class="box"> + <p>03</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_7"><div class="box"><p>01</p></div></div> - <div class="grid_5"><div class="box"><p>02</p></div></div> - <div class="grid_4"><div class="box"><p>03</p></div></div> + <div class="grid_7"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_5"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_4"> + <div class="box"> + <p>03</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_8"><div class="box"><p>01</p></div></div> - <div class="grid_8"><div class="box"><p>02</p></div></div> + <div class="grid_8"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_8"> + <div class="box"> + <p>02</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_1 suffix_11"><div class="box"><p>01</p></div></div> + <div class="grid_1 suffix_11"> + <div class="box"> + <p>01</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_1 suffix_10"><div class="box"><p>02</p></div></div> + <div class="grid_1 prefix_1 suffix_10"> + <div class="box"> + <p>02</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_2 suffix_9"><div class="box"><p>03</p></div></div> + <div class="grid_1 prefix_2 suffix_9"> + <div class="box"> + <p>03</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_3 suffix_8"><div class="box"><p>04</p></div></div> + <div class="grid_1 prefix_3 suffix_8"> + <div class="box"> + <p>04</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_4 suffix_7"><div class="box"><p>05</p></div></div> + <div class="grid_1 prefix_4 suffix_7"> + <div class="box"> + <p>05</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_5 suffix_6"><div class="box"><p>06</p></div></div> + <div class="grid_1 prefix_5 suffix_6"> + <div class="box"> + <p>06</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_6 suffix_5"><div class="box"><p>07</p></div></div> + <div class="grid_1 prefix_6 suffix_5"> + <div class="box"> + <p>07</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_7 suffix_4"><div class="box"><p>08</p></div></div> + <div class="grid_1 prefix_7 suffix_4"> + <div class="box"> + <p>08</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_8 suffix_3"><div class="box"><p>09</p></div></div> + <div class="grid_1 prefix_8 suffix_3"> + <div class="box"> + <p>09</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_9 suffix_2"><div class="box"><p>10</p></div></div> + <div class="grid_1 prefix_9 suffix_2"> + <div class="box"> + <p>10</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_10 suffix_1"><div class="box"><p>11</p></div></div> + <div class="grid_1 prefix_10 suffix_1"> + <div class="box"> + <p>11</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_11 suffix_1"><div class="box"><p>12</p></div></div> + <div class="grid_1 prefix_11 suffix_1"> + <div class="box"> + <p>12</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_12 suffix_1"><div class="box"><p>13</p></div></div> + <div class="grid_1 prefix_12 suffix_1"> + <div class="box"> + <p>13</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_13 suffix_1"><div class="box"><p>14</p></div></div> + <div class="grid_1 prefix_13 suffix_1"> + <div class="box"> + <p>14</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_14 suffix_1"><div class="box"><p>15</p></div></div> + <div class="grid_1 prefix_14 suffix_1"> + <div class="box"> + <p>15</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_15"><div class="box"><p>16</p></div></div> + <div class="grid_1 prefix_15"> + <div class="box"> + <p>16</p> + </div> + </div> <div class="clear"></div> - </div> - <div class="grid_16"> <div class="box" id="kwick-box"> <h2>Mootools Fx.Elements</h2> <div id="kwick"> <ul class="kwicks"> - <li><a class="kwick one" name="one"><span>One</span></a></li> - <li><a class="kwick two" name="two"><span>Two</span></a></li> - <li><a class="kwick three" name="three"><span>Three</span></a></li> - <li><a class="kwick four" name="four"><span>Four</span></a></li> + <li> + <a class="kwick one" href="#"> + <span>One</span> + </a> + </li> + <li> + <a class="kwick two" href="#"> + <span>Two</span> + </a> + </li> + <li> + <a class="kwick three" href="#"> + <span>Three</span> + </a> + </li> + <li> + <a class="kwick four" href="#"> + <span>Four</span> + </a> + </li> </ul> </div> </div> </div> <div class="clear"></div> - <div class="grid_2"> + <div class="grid_4"> <div class="box"> <h2> - <a name="paragraph" id="toggle-paragraphs" class="hidden">Paragraphs</a> + <a href="#" id="toggle-paragraphs">Paragraphs</a> </h2> <div class="block" id="paragraphs"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> - <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="box"> <h2> - <a name="ajax" id="toggle-ajax" class="hidden"> - <img src="img/ajax-loader.gif" id="loading" alt="Loading" /> - Ajax Content - </a> + <a href="#" id="toggle-ajax" class="hidden"><img src="../img/ajax-loader.gif" id="loading" alt="Loading" /> + Ajax Content + </a> </h2> <div class="block" id="ajax-content"> - Content loaded dynamically - </div> + Content loaded dynamically + </div> </div> <div class="box menu"> <h2> - <a name="section-menu" id="toggle-section-menu">Section Menu</a> + <a href="#" id="toggle-section-menu">Section Menu</a> </h2> <div class="block" id="section-menu"> <ul class="section menu"> <li> - <a name="menu1" class="menuitem">Menu 1</a> + <a class="menuitem">Menu 1</a> <ul class="submenu"> <li> - <a name="menu1-submenu1">Submenu 1</a> + <a>Submenu 1</a> </li> <li> - <a name="menu1-submenu2">Submenu 2</a> + <a>Submenu 2</a> </li> <li> - <a name="menu1-submenu3" class="active">Submenu 3</a> + <a class="active">Submenu 3</a> </li> <li> - <a name="menu1-submenu4">Submenu 4</a> + <a>Submenu 4</a> </li> <li> - <a name="menu1-submenu5">Submenu 5</a> + <a>Submenu 5</a> </li> </ul> </li> <li> - <a name="menu2" class="menuitem">Menu 2</a> + <a class="menuitem">Menu 2</a> <ul class="submenu"> <li> - <a name="menu2-submenu1">Submenu 1</a> + <a>Submenu 1</a> </li> <li> - <a name="menu2-submenu2">Submenu 2</a> + <a>Submenu 2</a> </li> <li> - <a name="menu2-submenu3">Submenu 3</a> + <a>Submenu 3</a> </li> <li> - <a name="menu2-submenu4">Submenu 4</a> + <a>Submenu 4</a> </li> <li> - <a name="menu2-submenu5">Submenu 5</a> + <a>Submenu 5</a> </li> </ul> </li> <li> - <a name="menu3" class="menuitem">Menu 3</a> + <a class="menuitem">Menu 3</a> <ul class="submenu"> <li> - <a name="menu3-submenu1">Submenu 1</a> + <a>Submenu 1</a> </li> <li> - <a name="menu3-submenu2">Submenu 2</a> + <a>Submenu 2</a> </li> <li> - <a name="menu3-submenu3">Submenu 3</a> + <a>Submenu 3</a> </li> <li> - <a name="menu3-submenu4">Submenu 4</a> + <a>Submenu 4</a> </li> <li> - <a name="menu3-submenu5">Submenu 5</a> + <a>Submenu 5</a> </li> </ul> </li> <li> - <a name="menu4" class="menuitem">Menu 4</a> + <a class="menuitem">Menu 4</a> <ul class="submenu"> <li> - <a name="menu4-submenu1">Submenu 1</a> + <a>Submenu 1</a> </li> <li> - <a name="menu4-submenu2">Submenu 2</a> + <a>Submenu 2</a> </li> <li> - <a name="menu4-submenu3">Submenu 3</a> + <a>Submenu 3</a> </li> <li> - <a name="menu4-submenu4">Submenu 4</a> + <a>Submenu 4</a> </li> <li> - <a name="menu4-submenu5">Submenu 5</a> + <a>Submenu 5</a> </li> </ul> </li> @@ -361,58 +622,60 @@ </div> <div class="box"> <h2> - <a name="list-items" id="toggle-list-items">List Items</a> + <a href="#" id="toggle-list-items">List Items</a> </h2> <div class="block" id="list-items"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. </p> <h5>A menu</h5> <ul class="menu"> <li> - <a name="item1">Item 1</a> + <a href="#">Item 1</a> </li> <li> - <a name="item2">Item 2</a> + <a href="#">Item 2</a> </li> <li> - <a name="item3">Item 3</a> + <a href="#">Item 3</a> </li> </ul> <h5>An unordered list</h5> <ul> <li> - <a name="ul-item1">Item 1</a> + <a href="#">Item 1</a> </li> <li> - <a name="ul-item2">Item 2</a> + <a href="#">Item 2</a> </li> <li> - <a name="ul-item3">Item 3</a> + <a href="#">Item 3</a> </li> </ul> <h5>An ordered list</h5> <ol> <li> - <a name="ol-item1">Item 1</a> + <a href="#">Item 1</a> </li> <li> - <a name="ol-item2">Item 2</a> + <a href="#">Item 2</a> </li> <li> - <a name="ol-item3">Item 3</a> + <a href="#">Item 3</a> </li> </ol> </div> </div> </div> - <div class="grid_6"> + <div class="grid_7"> <div class="box"> - <h2><a name="accordian" id="toggle-accordian">Accordian</a></h2> - <div class="block" id="accordian-block"> + <h2> + <a href="#" id="toggle-accordion">Accordion</a> + </h2> + <div class="block" id="accordion"> <div id="accordion"> <h3 class="toggler atStart">Design Process</h3> <div class="element atStart"> <h4>The Value of Design</h4> - <p>Design is based on the inspiration of past accomplishments. On that foundation, we can build upon those achievements to shape the future. Design is about life — past, present and future — and the learning process that happens between birth and death. It is about community and shared knowledge and experience. It is the passion to build on what we've learned to create something better.</p> + <p>Design is based on the inspiration of past accomplishments. On that foundation, we can build upon those achievements to shape the future. Design is about life — past, present and future — and the learning process that happens between birth and death. It is about community and shared knowledge and experience. It is the passion to build on what we've learned to create something better.</p> </div> <h3 class="toggler atStart">Design Influences</h3> <div class="element atStart"> @@ -423,20 +686,20 @@ <div class="element atStart"> <h4>Inspired by the Past</h4> <p>I have been inspired by the work of many who have pioneered advances in Web Standards, including - <a href="http://www.31three.com/" title="www.31three.com">Jesse Bennett-Chamberlain</a>, - <a href="http://www.stopdesign.com/" title="www.stopdesign.com">Douglas Bowman</a>, - <a href="http://www.chaoticpattern.com/" title="www.chaoticpattern.com">Allen Chang</a>, - <a href="http://www.stuffandnonsense.co.uk/" title="www.stuffandnonsense.co.uk">Andy Clarke</a>, - <a href="http://www.hicksdesign.co.uk/" title="www.hicksdesign.co.uk">Jon Hicks</a>, - <a href="http://www.shauninman.com/" title="www.shauninman.com">Shaun Inman</a>, - <a href="http://www.cameronmoll.com/" title="www.cameronmoll.com">Cameron Moll</a>, - <a href="http://veerle.duoh.com/" title="veerle.duoh.com">Veerle Pieters</a>, - <a href="http://www.jasonsantamaria.com/" title="www.jasonsantamaria.com">Jason Santa Maria</a>, - <a href="http://www.mezzoblue.com/" title="www.mezzoblue.com">Dave Shea</a>, - <a href="http://www.thebignoob.com/" title="www.thebignoob.com">Ryan Sims</a>, - <a href="http://www.sonspring.com/" title="www.sonspring.com">Nathan Smith</a>, and - <a href="http://www.zeldman.com/" title="www.zeldman.com">Jeffrey Zeldman</a>, - to name a few. Thank you for inspiring <a href="http://www.domain7.com/WhoWeAre/StephenBau.html" title="Stephen Bau, Designer, Domain7">me</a> to give something back.</p> + <a href="http://www.31three.com/" title="www.31three.com">Jesse Bennett-Chamberlain</a>, + <a href="http://www.stopdesign.com/" title="www.stopdesign.com">Douglas Bowman</a>, + <a href="http://www.chaoticpattern.com/" title="www.chaoticpattern.com">Allen Chang</a>, + <a href="http://www.stuffandnonsense.co.uk/" title="www.stuffandnonsense.co.uk">Andy Clarke</a>, + <a href="http://www.hicksdesign.co.uk/" title="www.hicksdesign.co.uk">Jon Hicks</a>, + <a href="http://www.shauninman.com/" title="www.shauninman.com">Shaun Inman</a>, + <a href="http://www.cameronmoll.com/" title="www.cameronmoll.com">Cameron Moll</a>, + <a href="http://veerle.duoh.com/" title="veerle.duoh.com">Veerle Pieters</a>, + <a href="http://www.jasonsantamaria.com/" title="www.jasonsantamaria.com">Jason Santa Maria</a>, + <a href="http://www.mezzoblue.com/" title="www.mezzoblue.com">Dave Shea</a>, + <a href="http://www.thebignoob.com/" title="www.thebignoob.com">Ryan Sims</a>, + <a href="http://www.sonspring.com/" title="www.sonspring.com">Nathan Smith</a>, and + <a href="http://www.zeldman.com/" title="www.zeldman.com">Jeffrey Zeldman</a>, + to name a few. Thank you for inspiring <a href="http://www.domain7.com/WhoWeAre/StephenBau.html" title="Stephen Bau, Designer, Domain7">me</a> to give something back.</p> </div> <h3 class="toggler atStart">Contribution</h3> <div class="element atStart"> @@ -448,18 +711,20 @@ </div> <div class="box"> <h2> - <a name="blockquote" id="toggle-blockquote">Blockquote</a> + <a href="#" id="toggle-blockquote">Blockquote</a> </h2> <div class="block" id="blockquote"> <blockquote> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> - <p class="cite"><cite>John Smith</cite></p> + <p class="cite"> + <cite>John Smith</cite> + </p> </blockquote> </div> </div> <div class="box"> <h2> - <a name="tables" id="toggle-tables">Tables</a> + <a href="#" id="toggle-tables">Tables</a> </h2> <div class="block" id="tables"> <table> @@ -492,9 +757,9 @@ <table summary="This table includes examples of as many table elements as possible"> <caption>An example table</caption> <colgroup> - <col class="colA"/> - <col class="colB"/> - <col class="colC"/> + <col class="colA" /> + <col class="colB" /> + <col class="colC" /> </colgroup> <thead> <tr> @@ -550,103 +815,138 @@ </div> <div class="box"> <h2> - <a name="forms" id="toggle-forms">Forms</a> + <a href="#" id="toggle-forms">Forms</a> </h2> <div class="block" id="forms"> <form action=""> <fieldset class="login"> <legend>Login Information</legend> - <p><label>Username: </label><input type="text" name="username" value="" /></p> - <p><label>Password: </label><input type="password" name="password" /></p> - <p><label>Re-type Password: </label><input type="password" name="password2" /></p> + <p> + <label>Username: </label> + <input type="text" name="username" value="" /> + </p> + <p> + <label>Password: </label> + <input type="password" name="password" /> + </p> + <p> + <label>Re-type Password: </label> + <input type="password" name="password2" /> + </p> <input class="confirm button" type="submit" value="Confirm Availability" /> </fieldset> <fieldset> <legend>Personal Information</legend> - <p><label>First Name: </label><input type="text" name="first-name" value="" /></p> - <p><label>Last Name: </label><input type="text" name="last-name" value="" /></p> - <p><label>Address: </label><input type="text" name="address1" value="" /></p> - <p><label>Address 2: </label><input type="text" name="address2" value="" /></p> - <p><label>City: </label><input type="text" name="city" value="" /></p> - <p><label>State/Province: </label> - <select name="State"> - <option value="" >Select State/Province...</option> - <option value="AL">Alabama </option> - <option value="AK">Alaska </option> - <option value="AB">Alberta </option> - <option value="AZ">Arizona </option> - <option value="AR">Arkansas </option> - <option value="BC">British Columbia </option> - <option value="CA">California </option> - <option value="CO">Colorado </option> - <option value="CT">Connecticut </option> - <option value="DE">Delaware </option> - <option value="DC">District of Columbia </option> - <option value="FL">Florida </option> - <option value="GA">Georgia </option> - <option value="HI">Hawaii </option> - <option value="ID">Idaho </option> - <option value="IL">Illinois </option> - <option value="IN">Indiana </option> - <option value="IA">Iowa </option> - <option value="KS">Kansas </option> - <option value="KY">Kentucky </option> - <option value="LA">Louisiana </option> - <option value="ME">Maine </option> - <option value="MB">Manitoba </option> - <option value="MD">Maryland </option> - <option value="MA">Massachusetts </option> - <option value="MI">Michigan </option> - <option value="MN">Minnesota </option> - <option value="MS">Mississippi </option> - <option value="MO">Missouri </option> - <option value="MT">Montana </option> - <option value="NE">Nebraska </option> - <option value="NV">Nevada </option> - <option value="NB">New Brunswick </option> - <option value="NH">New Hampshire </option> - <option value="NJ">New Jersey </option> - <option value="NM">New Mexico </option> - <option value="NY">New York </option> - <option value="NF">Newfoundland </option> - <option value="NC">North Carolina </option> - <option value="ND">North Dakota </option> - <option value="NT">Northwest Territories </option> - <option value="NS">Nova Scotia </option> - <option value="OH">Ohio </option> - <option value="OK">Oklahoma </option> - <option value="ON">Ontario </option> - <option value="OR">Oregon </option> - <option value="PA">Pennsylvania </option> - <option value="PE">Prince Edward Island </option> - <option value="PR">Puerto Rico </option> - <option value="QC">Quebec </option> - <option value="RI">Rhode Island </option> - <option value="SK">Saskatchewan </option> - <option value="SC">South Carolina </option> - <option value="SD">South Dakota </option> - <option value="TN">Tennessee </option> - <option value="TX">Texas </option> - <option value="UT">Utah </option> - <option value="VT">Vermont </option> - <option value="VA">Virginia </option> - <option value="WA">Washington </option> - <option value="WV">West Virginia </option> - <option value="WI">Wisconsin </option> - <option value="WY">Wyoming </option> + <p> + <label>First Name: </label> + <input type="text" name="first-name" value="" /> + </p> + <p> + <label>Last Name: </label> + <input type="text" name="last-name" value="" /> + </p> + <p> + <label>Address: </label> + <input type="text" name="address1" value="" /> + </p> + <p> + <label>Address 2: </label> + <input type="text" name="address2" value="" /> + </p> + <p> + <label>City: </label> + <input type="text" name="city" value="" /> + </p> + <p> + <label>State/Province: </label> + <select name="State"> + <option value="">Select State/Province...</option> + <option value="AL">Alabama </option> + <option value="AK">Alaska </option> + <option value="AB">Alberta </option> + <option value="AZ">Arizona </option> + <option value="AR">Arkansas </option> + <option value="BC">British Columbia </option> + <option value="CA">California </option> + <option value="CO">Colorado </option> + <option value="CT">Connecticut </option> + <option value="DE">Delaware </option> + <option value="DC">District of Columbia </option> + <option value="FL">Florida </option> + <option value="GA">Georgia </option> + <option value="HI">Hawaii </option> + <option value="ID">Idaho </option> + <option value="IL">Illinois </option> + <option value="IN">Indiana </option> + <option value="IA">Iowa </option> + <option value="KS">Kansas </option> + <option value="KY">Kentucky </option> + <option value="LA">Louisiana </option> + <option value="ME">Maine </option> + <option value="MB">Manitoba </option> + <option value="MD">Maryland </option> + <option value="MA">Massachusetts </option> + <option value="MI">Michigan </option> + <option value="MN">Minnesota </option> + <option value="MS">Mississippi </option> + <option value="MO">Missouri </option> + <option value="MT">Montana </option> + <option value="NE">Nebraska </option> + <option value="NV">Nevada </option> + <option value="NB">New Brunswick </option> + <option value="NH">New Hampshire </option> + <option value="NJ">New Jersey </option> + <option value="NM">New Mexico </option> + <option value="NY">New York </option> + <option value="NF">Newfoundland </option> + <option value="NC">North Carolina </option> + <option value="ND">North Dakota </option> + <option value="NT">Northwest Territories </option> + <option value="NS">Nova Scotia </option> + <option value="OH">Ohio </option> + <option value="OK">Oklahoma </option> + <option value="ON">Ontario </option> + <option value="OR">Oregon </option> + <option value="PA">Pennsylvania </option> + <option value="PE">Prince Edward Island </option> + <option value="PR">Puerto Rico </option> + <option value="QC">Quebec </option> + <option value="RI">Rhode Island </option> + <option value="SK">Saskatchewan </option> + <option value="SC">South Carolina </option> + <option value="SD">South Dakota </option> + <option value="TN">Tennessee </option> + <option value="TX">Texas </option> + <option value="UT">Utah </option> + <option value="VT">Vermont </option> + <option value="VA">Virginia </option> + <option value="WA">Washington </option> + <option value="WV">West Virginia </option> + <option value="WI">Wisconsin </option> + <option value="WY">Wyoming </option> <option value="YT">Yukon </option> </select> </p> - <p><label>Country: </label> - <select name="Country"> + <p> + <label>Country: </label> + <select name="Country"> <option value="">Select Country...</option> - <option value="Canada">Canada</option> + <option value="Canada">Canada</option> <option value="United States">United States</option> </select> </p> - <p><label>Zip/Postal Code: </label><input type="text" name="zipcode" value="" /></p> - <p><label>Phone Number: </label><input type="text" name="phone" value="" /></p> - <p><label>Email Address: </label><input type="text" name="email" value="" /></p> + <p> + <label>Zip/Postal Code: </label> + <input type="text" name="zipcode" value="" /> + </p> + <p> + <label>Phone Number: </label> + <input type="text" name="phone" value="" /> + </p> + <p> + <label>Email Address: </label> + <input type="text" name="email" value="" /> + </p> <input type="submit" value="Register" class="register-button" /> </fieldset> </form> @@ -656,28 +956,34 @@ <div class="grid_5"> <div class="box"> <h2> - <a name="search" id="toggle-search">Search</a> + <a href="#" id="toggle-search">Search</a> </h2> <div class="block" id="search"> <form method="get" action="" class="search"> <p> - <input class="search text" name="value" type="text"/> - <input class="search button" value="Search" type="submit"/> + <input class="search text" name="value" type="text" /> + <input class="search button" value="Search" type="submit" /> </p> </form> </div> </div> <div class="box"> <h2> - <a name="login-forms" id="toggle-login-forms">Login Forms</a> + <a href="#" id="toggle-login-forms">Login Forms</a> </h2> <div class="block" id="login-forms"> <form action=""> <fieldset class="login"> <legend>Login</legend> <p class="notice">Login to complete your purchase.</p> - <p><label>Username: </label><input type="text" name="username" /></p> - <p><label>Password: </label><input type="password" name="password" /></p> + <p> + <label>Username: </label> + <input type="text" name="username" /> + </p> + <p> + <label>Password: </label> + <input type="password" name="password" /> + </p> <input class="login button" type="submit" value="Login" /> </fieldset> </form> @@ -692,31 +998,41 @@ </div> <div class="box articles"> <h2> - <a name="articles" id="toggle-articles">Articles</a> + <a href="#" id="toggle-articles">Articles</a> </h2> <div class="block" id="articles"> <div class="first article"> - <h3><a name="heading1">Article Heading</a></h3> + <h3> + <a href="#">Article Heading</a> + </h3> <h4>Subheading</h4> - <p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p> - <a name="image1" class="image"><img src="img/photo_60x60.jpg" width="60" height="60" alt="photo"/></a> - <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a name="link1">Visit site.</a></p> + <p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p> + <a href="#" class="image"> + <img src="../img/photo_60x60.jpg" width="60" height="60" alt="photo" /> + </a> + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a href="#">Visit site.</a></p> </div> <div class="article"> - <h3><a name="heading2">Article Heading</a></h3> + <h3> + <a href="#">Article Heading</a> + </h3> <h4>Subheading</h4> - <p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p> - <a name="image2" class="image"><img src="img/photo_60x60.jpg" width="60" height="60" alt="photo"/></a> - <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a name="link2">Visit site.</a></p> + <p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p> + <a href="#" class="image"> + <img src="../img/photo_60x60.jpg" width="60" height="60" alt="photo" /> + </a> + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a href="#">Visit site.</a></p> </div> <div class="article"> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> - <p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p> - <a name="image3" class="image"><img src="img/photo_60x60.jpg" width="60" height="60" alt="photo"/></a> - <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a name="link3">Visit site.</a></p> + <p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p> + <a href="#" class="image"> + <img src="../img/photo_60x60.jpg" width="60" height="60" alt="photo" /> + </a> + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a href="#">Visit site.</a></p> <h5>Heading 5</h5> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> <h6>Heading 6</h6> @@ -725,161 +1041,17 @@ </div> </div> </div> - <div class="grid_3"> - <div class="box"> - <h2> - <a name="paragraphs2" id="toggle-paragraphs2" class="hidden">Paragraphs</a> - </h2> - <div class="block" id="paragraphs2"> - <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> - - <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> - </div> - </div> - <div class="box menu"> - <h2> - <a name="section-menu2" id="toggle-section-menu2">Section Menu</a> - </h2> - <div class="block" id="section-menu2"> - <ul class="section menu"> - <li class="current"> - <a name="section2-menu1">Menu 1</a> - <ul> - <li> - <a name="section2-menu1-submenu1">Submenu 1</a> - </li> - <li> - <a name="section2-menu1-submenu2">Submenu 2</a> - </li> - <li> - <a name="section2-menu1-submenu3" class="active">Submenu 3</a> - </li> - <li> - <a name="section2-menu1-submenu4">Submenu 4</a> - </li> - <li> - <a name="section2-menu1-submenu5">Submenu 5</a> - </li> - </ul> - </li> - <li> - <a href="section2-menu2">Menu 2</a> - <ul> - <li> - <a name="section2-menu2-submenu1">Submenu 1</a> - </li> - <li> - <a name="section2-menu2-submenu2">Submenu 2</a> - </li> - <li> - <a name="section2-menu2-submenu3">Submenu 3</a> - </li> - <li> - <a name="section2-menu2-submenu4">Submenu 4</a> - </li> - <li> - <a name="section2-menu2-submenu5">Submenu 5</a> - </li> - </ul> - </li> - <li> - <a name="section2-menu3">Menu 3</a> - <ul> - <li> - <a name="section2-menu3-submenu1">Submenu 1</a> - </li> - <li> - <a name="section2-menu3-submenu2">Submenu 2</a> - </li> - <li> - <a name="section2-menu3-submenu3">Submenu 3</a> - </li> - <li> - <a name="section2-menu3-submenu4">Submenu 4</a> - </li> - <li> - <a name="section2-menu3-submenu5">Submenu 5</a> - </li> - </ul> - </li> - <li> - <a name="section2-menu4">Menu 4</a> - <ul> - <li> - <a name="section2-menu4-submenu1">Submenu 1</a> - </li> - <li> - <a name="section2-menu4-submenu2">Submenu 2</a> - </li> - <li> - <a name="section2-menu4-submenu3">Submenu 3</a> - </li> - <li> - <a name="section2-menu4-submenu4">Submenu 4</a> - </li> - <li> - <a name="section2-menu4-submenu5">Submenu 5</a> - </li> - </ul> - </li> - </ul> - </div> - </div> - <div class="box"> - <h2> - <a name="list-items2" id="toggle-list-items2">List Items</a> - </h2> - <div class="block" id="list-items2"> - <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. </p> - <h5>A menu</h5> - <ul class="menu"> - <li> - <a name="list-items2-item1">Item 1</a> - </li> - <li> - <a name="list-items2-item2">Item 2</a> - </li> - <li> - <a name="list-items2-item3">Item 3</a> - </li> - </ul> - <h5>An unordered list</h5> - <ul> - <li> - <a name="list-items2-ul-item1">Item 1</a> - </li> - <li> - <a name="list-items2-ul-item2">Item 2</a> - </li> - <li> - <a name="list-items2-ul-item3">Item 3</a> - </li> - </ul> - <h5>An ordered list</h5> - <ol> - <li> - <a name="list-items2-ol-item1">Item 1</a> - </li> - <li> - <a name="list-items2-ol-item2">Item 2</a> - </li> - <li> - <a name="list-items2-ol-item3">Item 3</a> - </li> - </ol> - </div> - </div> - </div> <div class="clear"></div> <div class="grid_16" id="site_info"> <div class="box"> <p>Fluid 960 Grid System, created by <a href="http://www.domain7.com/WhoWeAre/StephenBau.html">Stephen Bau</a>, based on the <a href="http://960.gs/">960 Grid System</a> by <a href="http://sonspring.com/journal/960-grid-system">Nathan Smith</a>. Released under the - <a href="licenses/GPL_license.txt">GPL</a>/ - <a href="licenses/MIT_license.txt">MIT</a> - <a href="README.txt">Licenses</a>.</p> + <a href="../licenses/GPL_license.txt">GPL</a> / <a href="../licenses/MIT_license.txt">MIT</a> <a href="../README.txt">Licenses</a>.</p> </div> </div> <div class="clear"></div> </div> + <script type="text/javascript" src="../js/mootools-1.2.1-core.js"></script> + <script type="text/javascript" src="../js/mootools-1.2-more.js"></script> + <script type="text/javascript" src="../js/mootools-fluid16-autoselect.js"></script> </body> </html> \ No newline at end of file 16/index.html @@ -1,331 +1,619 @@ <!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" xml:lang="en" lang="en"> +<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> - <title>960 Grid System | 12-column Grid</title> - <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" /> - <link rel="stylesheet" type="text/css" href="css/text.css" media="screen" /> - <link rel="stylesheet" type="text/css" href="css/960.css" media="screen" /> - <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" /> - <link rel="stylesheet" type="text/css" href="css/nav.css" media="screen" /> - <script type="text/javascript" src="js/mootools.js"></script> - <script type="text/javascript" src="js/960.js"></script> - <script type="text/javascript" src="js/kwick.js"></script> - <script type="text/javascript" src="js/accordion.js"></script> - <script type="text/javascript" src="js/sectionmenu.js"></script> + <title>Fluid 960 Grid System | 16-column Grid</title> + <link rel="stylesheet" type="text/css" href="../css/reset.css" media="screen" /> + <link rel="stylesheet" type="text/css" href="../css/text.css" media="screen" /> + <link rel="stylesheet" type="text/css" href="../css/grid.css" media="screen" /> + <link rel="stylesheet" type="text/css" href="../css/layout.css" media="screen" /> + <link rel="stylesheet" type="text/css" href="../css/nav.css" media="screen" /> +  +  </head> <body> - <div class="container_12"> - <div class="grid_12"> + <div class="container_16"> + <div class="grid_16"> <h1 id="branding"> <a href="../">Fluid 960 Grid System</a> </h1> </div> <div class="clear"></div> - <div class="grid_12"> + <div class="grid_16"> <ul class="nav main"> <li> - <a name="mainmenu1">Menu 1</a> + <a href="../12/">Fluid 12-column</a> <ul> <li> - <a name="mainmenu1-submenu1">Submenu 1</a> + <a href="../12/fluid/mootools/">MooTools</a> </li> <li> - <a name="mainmenu1-submenu2">Submenu 2</a> + <a href="../12/fluid/jquery/">jQuery</a> </li> <li> - <a name="mainmenu1-submenu3">Submenu 3</a> - </li> - <li> - <a name="mainmenu1-submenu4">Submenu 4</a> - </li> - <li> - <a name="mainmenu1-submenu5">Submenu 5</a> + <a href="../12/fluid/none/">No Javascript</a> </li> </ul> </li> <li> - <a name="mainmenu2">Menu 2</a> + <a href="../16/">Fluid 16-column</a> <ul> <li> - <a name="mainmenu2-submenu1">Submenu 1</a> + <a href="../16/fluid/mootools/">MooTools</a> </li> <li> - <a name="mainmenu2-submenu2">Submenu 2</a> + <a href="../16/fluid/jquery/">jQuery</a> </li> <li> - <a name="mainmenu2-submenu3">Submenu 3</a> - </li> - <li> - <a name="mainmenu2-submenu4">Submenu 4</a> - </li> - <li> - <a name="mainmenu2-submenu5">Submenu 5</a> + <a href="../16/fluid/none/">No Javascript</a> </li> </ul> </li> <li> - <a name="mainmenu3">Menu 3</a> + <a href="../12/fixed/">Fixed 12-column</a> <ul> <li> - <a name="mainmenu3-submenu1">Submenu 1</a> - </li> - <li> - <a name="mainmenu3-submenu2">Submenu 2</a> + <a href="../12/fixed/mootools/">MooTools</a> </li> <li> - <a name="mainmenu3-submenu3">Submenu 3</a> + <a href="../12/fixed/jquery/">jQuery</a> </li> <li> - <a name="mainmenu3-submenu4">Submenu 4</a> - </li> - <li> - <a name="mainmenu3-submenu5">Submenu 5</a> + <a href="../12/fixed/none/">No Javascript</a> </li> </ul> </li> <li> - <a name="mainmenu4">Menu 4</a> + <a href="../16/fixed/">Fixed 16-column</a> <ul> <li> - <a name="mainmenu4-submenu1">Submenu 1</a> - </li> - <li> - <a name="mainmenu4-submenu2">Submenu 2</a> - </li> - <li> - <a name="mainmenu4-submenu3">Submenu 3</a> + <a href="../16/fixed/mootools/">MooTools</a> </li> <li> - <a name="mainmenu4-submenu4">Submenu 4</a> + <a href="../16/fixed/jquery/">jQuery</a> </li> <li> - <a name="mainmenu4-submenu5">Submenu 5</a> + <a href="../16/fixed/none/">No Javascript</a> </li> </ul> </li> - <li class="secondary"> - <a name="secondarymenu">Secondary Menu Item</a> + <li> + <a href="http://overture21.com/forum/comments.php?DiscussionID=231">Download / Forum</a> <ul> <li> - <a name="secondarymenu-submenu1">Submenu 1</a> - </li> - <li> - <a name="secondarymenu-submenu2">Submenu 2</a> + <a href="http://github.com/bauhouse/fluid960gs/tree/">Download: Github</a> </li> <li> - <a name="secondarymenu-submenu3">Submenu 3</a> + <a href="http://github.com/bauhouse/sym-fluid960gs/tree/">Symphony Ensemble</a> </li> <li> - <a name="secondarymenu-submenu4">Submenu 4</a> - </li> - <li> - <a name="secondarymenu-submenu5">Submenu 5</a> + <a href="http://overture21.com/forum/comments.php?DiscussionID=231">Forum Discussion</a> </li> </ul> </li> + <li class="secondary"> + <a href="http://960.gs/" title="960.gs | A CSS grid system developed by Nathan Smith">The 960 Grid System</a> + </li> </ul> </div> <div class="clear"></div> - <div class="grid_12"> - <h2 id="page-heading">Page Heading</h2> + <div class="grid_16"> + <h2 id="page-heading">Templates for Rapid Interactive Prototyping</h2> </div> <div class="clear"></div> - - <div class="box grid_12" style="padding:0;"> - <h2 style="margin:0"><a name="12-column" style="background-position:99.3% 50%" id="toggle-grid">12-column Grid</a></h2> + <div class="grid_4"> + <div class="box"> + <h2>Design Process</h2> + <div class="block"> + <p>Design is based on the inspiration of past accomplishments. On that foundation, we can build upon those achievements to shape the future. Design is about life — past, present and future — and the learning process that happens between birth and death. It is about community and shared knowledge and experience. It is the passion to build on what we've learned to create something better.</p> + </div> + </div> + </div> + <div class="grid_4"> + <div class="box"> + <h2>Design Influences</h2> + <div class="block"> + <p>The words "design influences" can be understood as both a plural noun and as subject and verb. The plural noun speaks of those who have come before us and paved the way. The verb speaks of the responsibility of design to lead the way. By understanding where we have come from, we have a better idea of where we are going and, perhaps, where we should be heading.</p> + </div> + </div> + </div> + <div class="grid_4"> + <div class="box"> + <h2>Inspiration</h2> + <div class="block"> + <p>I have been inspired by the work of many who have pioneered advances in Web Standards, including + <a href="http://www.31three.com/" title="www.31three.com">Jesse Bennett-Chamberlain</a>, + <a href="http://www.stopdesign.com/" title="www.stopdesign.com">Douglas Bowman</a>, + <a href="http://www.chaoticpattern.com/" title="www.chaoticpattern.com">Allen Chang</a>, + <a href="http://www.stuffandnonsense.co.uk/" title="www.stuffandnonsense.co.uk">Andy Clarke</a>, + <a href="http://www.hicksdesign.co.uk/" title="www.hicksdesign.co.uk">Jon Hicks</a>, + <a href="http://www.shauninman.com/" title="www.shauninman.com">Shaun Inman</a>, + <a href="http://www.cameronmoll.com/" title="www.cameronmoll.com">Cameron Moll</a>, + <a href="http://veerle.duoh.com/" title="veerle.duoh.com">Veerle Pieters</a>, + <a href="http://www.jasonsantamaria.com/" title="www.jasonsantamaria.com">Jason Santa Maria</a>, + <a href="http://www.mezzoblue.com/" title="www.mezzoblue.com">Dave Shea</a>, + <a href="http://www.thebignoob.com/" title="www.thebignoob.com">Ryan Sims</a>, + <a href="http://www.sonspring.com/" title="www.sonspring.com">Nathan Smith</a>, and + <a href="http://www.zeldman.com/" title="www.zeldman.com">Jeffrey Zeldman</a>, + to name a few. Thank you for inspiring <a href="http://www.domain7.com/WhoWeAre/StephenBau.html" title="Stephen Bau, Designer, Domain7">me</a> to give something back.</p> + </div> + </div> + </div> + <div class="grid_4"> + <div class="box"> + <h2>Contribution</h2> + <div class="block"> + <p>The <a href="/fluid960gs/">Fluid 960 Grid System</a> templates have been built upon the work of Nathan Smith and his <a href="http://960.gs/">960 Grid System</a> using effects from the <a href="http://mootools.net/">MooTools</a> and <a href="http://jquery.com/">jQuery</a> JavaScript libraries. + The idea for building these templates was inspired by Andy Clarke, author of <a href="http://www.transcendingcss.com/">Transcending CSS</a>, who advocates a content-out approach to rapid interactive prototyping, crediting Jason Santa Maria with the <a href="http://www.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php">grey box method</a>.</p> + </div> + </div> + </div> + <div class="clear"></div> + <div class="box grid_16" style="padding:0;"> + <h2 style="margin:0"> + <a href="#" style="background-position:99.3% 50%" id="toggle-grid">16-column Grid</a> + </h2> </div> <div class="clear"></div> - <div id="grid"> - - <div class="grid_1"><div class="box"><p>01</p></div></div> - <div class="grid_1"><div class="box"><p>02</p></div></div> - <div class="grid_1"><div class="box"><p>03</p></div></div> - <div class="grid_1"><div class="box"><p>04</p></div></div> - <div class="grid_1"><div class="box"><p>05</p></div></div> - <div class="grid_1"><div class="box"><p>06</p></div></div> - <div class="grid_1"><div class="box"><p>07</p></div></div> - <div class="grid_1"><div class="box"><p>08</p></div></div> - <div class="grid_1"><div class="box"><p>09</p></div></div> - <div class="grid_1"><div class="box"><p>10</p></div></div> - <div class="grid_1"><div class="box"><p>11</p></div></div> - <div class="grid_1"><div class="box"><p>12</p></div></div> + <div class="grid_1"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>03</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>04</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>05</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>06</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>07</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>08</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>09</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>10</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>11</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>12</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>13</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>14</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>15</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>16</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_2"><div class="box"><p>01</p></div></div> - <div class="grid_2"><div class="box"><p>02</p></div></div> - <div class="grid_2"><div class="box"><p>03</p></div></div> - <div class="grid_2"><div class="box"><p>04</p></div></div> - <div class="grid_2"><div class="box"><p>05</p></div></div> - <div class="grid_2"><div class="box"><p>06</p></div></div> + <div class="grid_2"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>03</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>04</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>05</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>06</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>07</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>08</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_3"><div class="box"><p>01</p></div></div> - <div class="grid_3"><div class="box"><p>02</p></div></div> - <div class="grid_3"><div class="box"><p>03</p></div></div> - <div class="grid_3"><div class="box"><p>04</p></div></div> + <div class="grid_3"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_3"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_3"> + <div class="box"> + <p>03</p> + </div> + </div> + <div class="grid_3"> + <div class="box"> + <p>04</p> + </div> + </div> + <div class="grid_4"> + <div class="box"> + <p>05</p> + </div> + </div> + <div class="clear"></div> + <div class="grid_4"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_4"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_4"> + <div class="box"> + <p>03</p> + </div> + </div> + <div class="grid_4"> + <div class="box"> + <p>04</p> + </div> + </div> + <div class="clear"></div> + <div class="grid_5"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_5"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_6"> + <div class="box"> + <p>03</p> + </div> + </div> + <div class="clear"></div> + <div class="grid_6"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_5"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_5"> + <div class="box"> + <p>03</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_4"><div class="box"><p>01</p></div></div> - <div class="grid_4"><div class="box"><p>02</p></div></div> - <div class="grid_4"><div class="box"><p>03</p></div></div> + <div class="grid_7"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_5"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_4"> + <div class="box"> + <p>03</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_5"><div class="box"><p>01</p></div></div> - <div class="grid_7"><div class="box"><p>02</p></div></div> + <div class="grid_8"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_8"> + <div class="box"> + <p>02</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_6"><div class="box"><p>01</p></div></div> - <div class="grid_6"><div class="box"><p>02</p></div></div> + <div class="grid_1 suffix_11"> + <div class="box"> + <p>01</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_1 suffix_11"><div class="box"><p>01</p></div></div> + <div class="grid_1 prefix_1 suffix_10"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="clear"></div> + <div class="grid_1 prefix_2 suffix_9"> + <div class="box"> + <p>03</p> + </div> + </div> + <div class="clear"></div> + <div class="grid_1 prefix_3 suffix_8"> + <div class="box"> + <p>04</p> + </div> + </div> + <div class="clear"></div> + <div class="grid_1 prefix_4 suffix_7"> + <div class="box"> + <p>05</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_1 suffix_10"><div class="box"><p>02</p></div></div> + <div class="grid_1 prefix_5 suffix_6"> + <div class="box"> + <p>06</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_2 suffix_9"><div class="box"><p>03</p></div></div> + <div class="grid_1 prefix_6 suffix_5"> + <div class="box"> + <p>07</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_3 suffix_8"><div class="box"><p>04</p></div></div> + <div class="grid_1 prefix_7 suffix_4"> + <div class="box"> + <p>08</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_4 suffix_7"><div class="box"><p>05</p></div></div> + <div class="grid_1 prefix_8 suffix_3"> + <div class="box"> + <p>09</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_5 suffix_6"><div class="box"><p>06</p></div></div> + <div class="grid_1 prefix_9 suffix_2"> + <div class="box"> + <p>10</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_6 suffix_5"><div class="box"><p>07</p></div></div> + <div class="grid_1 prefix_10 suffix_1"> + <div class="box"> + <p>11</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_7 suffix_4"><div class="box"><p>08</p></div></div> + <div class="grid_1 prefix_11 suffix_1"> + <div class="box"> + <p>12</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_8 suffix_3"><div class="box"><p>09</p></div></div> + <div class="grid_1 prefix_12 suffix_1"> + <div class="box"> + <p>13</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_9 suffix_2"><div class="box"><p>10</p></div></div> + <div class="grid_1 prefix_13 suffix_1"> + <div class="box"> + <p>14</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_10 suffix_1"><div class="box"><p>11</p></div></div> + <div class="grid_1 prefix_14 suffix_1"> + <div class="box"> + <p>15</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_11"><div class="box"><p>12</p></div></div> + <div class="grid_1 prefix_15"> + <div class="box"> + <p>16</p> + </div> + </div> <div class="clear"></div> - </div> - - <div class="grid_12"> + <div class="grid_16"> <div class="box" id="kwick-box"> <h2>Mootools Fx.Elements</h2> <div id="kwick"> <ul class="kwicks"> - <li><a class="kwick one" name="one"><span>One</span></a></li> - <li><a class="kwick two" name="two"><span>Two</span></a></li> - <li><a class="kwick three" name="three"><span>Three</span></a></li> - <li><a class="kwick four" name="four"><span>Four</span></a></li> + <li> + <a class="kwick one" href="#"> + <span>One</span> + </a> + </li> + <li> + <a class="kwick two" href="#"> + <span>Two</span> + </a> + </li> + <li> + <a class="kwick three" href="#"> + <span>Three</span> + </a> + </li> + <li> + <a class="kwick four" href="#"> + <span>Four</span> + </a> + </li> </ul> </div> </div> </div> <div class="clear"></div> - <div class="grid_3"> + <div class="grid_4"> <div class="box"> <h2> - <a name="paragraph" id="toggle-paragraphs" class="hidden">Paragraphs</a> + <a href="#" id="toggle-paragraphs">Paragraphs</a> </h2> <div class="block" id="paragraphs"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> - <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="box"> <h2> - <a name="ajax" id="toggle-ajax" class="hidden"> - <img src="img/ajax-loader.gif" id="loading" alt="Loading" /> - Ajax Content - </a> + <a href="#" id="toggle-ajax" class="hidden"><img src="../img/ajax-loader.gif" id="loading" alt="Loading" /> + Ajax Content + </a> </h2> <div class="block" id="ajax-content"> - Content loaded dynamically - </div> + Content loaded dynamically + </div> </div> <div class="box menu"> <h2> - <a name="section-menu" id="toggle-section-menu">Section Menu</a> + <a href="#" id="toggle-section-menu">Section Menu</a> </h2> <div class="block" id="section-menu"> <ul class="section menu"> <li> - <a name="menu1" class="menuitem">Menu 1</a> + <a class="menuitem">Menu 1</a> <ul class="submenu"> <li> - <a name="menu1-submenu1">Submenu 1</a> + <a>Submenu 1</a> </li> <li> - <a name="menu1-submenu2">Submenu 2</a> + <a>Submenu 2</a> </li> <li> - <a name="menu1-submenu3" class="active">Submenu 3</a> + <a class="active">Submenu 3</a> </li> <li> - <a name="menu1-submenu4">Submenu 4</a> + <a>Submenu 4</a> </li> <li> - <a name="menu1-submenu5">Submenu 5</a> + <a>Submenu 5</a> </li> </ul> </li> <li> - <a name="menu2" class="menuitem">Menu 2</a> + <a class="menuitem">Menu 2</a> <ul class="submenu"> <li> - <a name="menu2-submenu1">Submenu 1</a> + <a>Submenu 1</a> </li> <li> - <a name="menu2-submenu2">Submenu 2</a> + <a>Submenu 2</a> </li> <li> - <a name="menu2-submenu3">Submenu 3</a> + <a>Submenu 3</a> </li> <li> - <a name="menu2-submenu4">Submenu 4</a> + <a>Submenu 4</a> </li> <li> - <a name="menu2-submenu5">Submenu 5</a> + <a>Submenu 5</a> </li> </ul> </li> <li> - <a name="menu3" class="menuitem">Menu 3</a> + <a class="menuitem">Menu 3</a> <ul class="submenu"> <li> - <a name="menu3-submenu1">Submenu 1</a> + <a>Submenu 1</a> </li> <li> - <a name="menu3-submenu2">Submenu 2</a> + <a>Submenu 2</a> </li> <li> - <a name="menu3-submenu3">Submenu 3</a> + <a>Submenu 3</a> </li> <li> - <a name="menu3-submenu4">Submenu 4</a> + <a>Submenu 4</a> </li> <li> - <a name="menu3-submenu5">Submenu 5</a> + <a>Submenu 5</a> </li> </ul> </li> <li> - <a name="menu4" class="menuitem">Menu 4</a> + <a class="menuitem">Menu 4</a> <ul class="submenu"> <li> - <a name="menu4-submenu1">Submenu 1</a> + <a>Submenu 1</a> </li> <li> - <a name="menu4-submenu2">Submenu 2</a> + <a>Submenu 2</a> </li> <li> - <a name="menu4-submenu3">Submenu 3</a> + <a>Submenu 3</a> </li> <li> - <a name="menu4-submenu4">Submenu 4</a> + <a>Submenu 4</a> </li> <li> - <a name="menu4-submenu5">Submenu 5</a> + <a>Submenu 5</a> </li> </ul> </li> @@ -334,58 +622,60 @@ </div> <div class="box"> <h2> - <a name="list-items" id="toggle-list-items">List Items</a> + <a href="#" id="toggle-list-items">List Items</a> </h2> <div class="block" id="list-items"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. </p> <h5>A menu</h5> <ul class="menu"> <li> - <a name="item1">Item 1</a> + <a href="#">Item 1</a> </li> <li> - <a name="item2">Item 2</a> + <a href="#">Item 2</a> </li> <li> - <a name="item3">Item 3</a> + <a href="#">Item 3</a> </li> </ul> <h5>An unordered list</h5> <ul> <li> - <a name="item1">Item 1</a> + <a href="#">Item 1</a> </li> <li> - <a name="item2">Item 2</a> + <a href="#">Item 2</a> </li> <li> - <a name="item3">Item 3</a> + <a href="#">Item 3</a> </li> </ul> <h5>An ordered list</h5> <ol> <li> - <a name="item1">Item 1</a> + <a href="#">Item 1</a> </li> <li> - <a name="item2">Item 2</a> + <a href="#">Item 2</a> </li> <li> - <a name="item3">Item 3</a> + <a href="#">Item 3</a> </li> </ol> </div> </div> </div> - <div class="grid_5"> + <div class="grid_7"> <div class="box"> - <h2><a name="accordian" id="toggle-accordian">Accordian</a></h2> - <div class="block" id="accordian-block"> + <h2> + <a href="#" id="toggle-accordion">Accordion</a> + </h2> + <div class="block" id="accordion"> <div id="accordion"> <h3 class="toggler atStart">Design Process</h3> <div class="element atStart"> <h4>The Value of Design</h4> - <p>Design is based on the inspiration of past accomplishments. On that foundation, we can build upon those achievements to shape the future. Design is about life — past, present and future — and the learning process that happens between birth and death. It is about community and shared knowledge and experience. It is the passion to build on what we've learned to create something better.</p> + <p>Design is based on the inspiration of past accomplishments. On that foundation, we can build upon those achievements to shape the future. Design is about life — past, present and future — and the learning process that happens between birth and death. It is about community and shared knowledge and experience. It is the passion to build on what we've learned to create something better.</p> </div> <h3 class="toggler atStart">Design Influences</h3> <div class="element atStart"> @@ -396,20 +686,20 @@ <div class="element atStart"> <h4>Inspired by the Past</h4> <p>I have been inspired by the work of many who have pioneered advances in Web Standards, including - <a href="http://www.31three.com/" title="www.31three.com">Jesse Bennett-Chamberlain</a>, - <a href="http://www.stopdesign.com/" title="www.stopdesign.com">Douglas Bowman</a>, - <a href="http://www.chaoticpattern.com/" title="www.chaoticpattern.com">Allen Chang</a>, - <a href="http://www.stuffandnonsense.co.uk/" title="www.stuffandnonsense.co.uk">Andy Clarke</a>, - <a href="http://www.hicksdesign.co.uk/" title="www.hicksdesign.co.uk">Jon Hicks</a>, - <a href="http://www.shauninman.com/" title="www.shauninman.com">Shaun Inman</a>, - <a href="http://www.cameronmoll.com/" title="www.cameronmoll.com">Cameron Moll</a>, - <a href="http://veerle.duoh.com/" title="veerle.duoh.com">Veerle Pieters</a>, - <a href="http://www.jasonsantamaria.com/" title="www.jasonsantamaria.com">Jason Santa Maria</a>, - <a href="http://www.mezzoblue.com/" title="www.mezzoblue.com">Dave Shea</a>, - <a href="http://www.thebignoob.com/" title="www.thebignoob.com">Ryan Sims</a>, - <a href="http://www.sonspring.com/" title="www.sonspring.com">Nathan Smith</a>, and - <a href="http://www.zeldman.com/" title="www.zeldman.com">Jeffrey Zeldman</a>, - to name a few. Thank you for inspiring <a href="http://www.domain7.com/WhoWeAre/StephenBau.html" title="Stephen Bau, Designer, Domain7">me</a> to give something back.</p> + <a href="http://www.31three.com/" title="www.31three.com">Jesse Bennett-Chamberlain</a>, + <a href="http://www.stopdesign.com/" title="www.stopdesign.com">Douglas Bowman</a>, + <a href="http://www.chaoticpattern.com/" title="www.chaoticpattern.com">Allen Chang</a>, + <a href="http://www.stuffandnonsense.co.uk/" title="www.stuffandnonsense.co.uk">Andy Clarke</a>, + <a href="http://www.hicksdesign.co.uk/" title="www.hicksdesign.co.uk">Jon Hicks</a>, + <a href="http://www.shauninman.com/" title="www.shauninman.com">Shaun Inman</a>, + <a href="http://www.cameronmoll.com/" title="www.cameronmoll.com">Cameron Moll</a>, + <a href="http://veerle.duoh.com/" title="veerle.duoh.com">Veerle Pieters</a>, + <a href="http://www.jasonsantamaria.com/" title="www.jasonsantamaria.com">Jason Santa Maria</a>, + <a href="http://www.mezzoblue.com/" title="www.mezzoblue.com">Dave Shea</a>, + <a href="http://www.thebignoob.com/" title="www.thebignoob.com">Ryan Sims</a>, + <a href="http://www.sonspring.com/" title="www.sonspring.com">Nathan Smith</a>, and + <a href="http://www.zeldman.com/" title="www.zeldman.com">Jeffrey Zeldman</a>, + to name a few. Thank you for inspiring <a href="http://www.domain7.com/WhoWeAre/StephenBau.html" title="Stephen Bau, Designer, Domain7">me</a> to give something back.</p> </div> <h3 class="toggler atStart">Contribution</h3> <div class="element atStart"> @@ -421,18 +711,20 @@ </div> <div class="box"> <h2> - <a name="blockquote" id="toggle-blockquote">Blockquote</a> + <a href="#" id="toggle-blockquote">Blockquote</a> </h2> <div class="block" id="blockquote"> <blockquote> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> - <p class="cite"><cite>John Smith</cite></p> + <p class="cite"> + <cite>John Smith</cite> + </p> </blockquote> </div> </div> <div class="box"> <h2> - <a name="tables" id="toggle-tables">Tables</a> + <a href="#" id="toggle-tables">Tables</a> </h2> <div class="block" id="tables"> <table> @@ -465,9 +757,9 @@ <table summary="This table includes examples of as many table elements as possible"> <caption>An example table</caption> <colgroup> - <col class="colA"/> - <col class="colB"/> - <col class="colC"/> + <col class="colA" /> + <col class="colB" /> + <col class="colC" /> </colgroup> <thead> <tr> @@ -523,134 +815,175 @@ </div> <div class="box"> <h2> - <a name="forms" id="toggle-forms">Forms</a> + <a href="#" id="toggle-forms">Forms</a> </h2> <div class="block" id="forms"> <form action=""> <fieldset class="login"> <legend>Login Information</legend> - <p><label>Username: </label><input type="text" name="username" value="" /></p> - <p><label>Password: </label><input type="password" name="password" /></p> - <p><label>Re-type Password: </label><input type="password" name="password2" /></p> + <p> + <label>Username: </label> + <input type="text" name="username" value="" /> + </p> + <p> + <label>Password: </label> + <input type="password" name="password" /> + </p> + <p> + <label>Re-type Password: </label> + <input type="password" name="password2" /> + </p> <input class="confirm button" type="submit" value="Confirm Availability" /> </fieldset> <fieldset> <legend>Personal Information</legend> - <p><label>First Name: </label><input type="text" name="first-name" value="" /></p> - <p><label>Last Name: </label><input type="text" name="last-name" value="" /></p> - <p><label>Address: </label><input type="text" name="address1" value="" /></p> - <p><label>Address 2: </label><input type="text" name="address2" value="" /></p> - <p><label>City: </label><input type="text" name="city" value="" /></p> - <p><label>State/Province: </label> - <select name="State"> - <option value="" >Select State/Province...</option> - <option value="AL">Alabama </option> - <option value="AK">Alaska </option> - <option value="AB">Alberta </option> - <option value="AZ">Arizona </option> - <option value="AR">Arkansas </option> - <option value="BC">British Columbia </option> - <option value="CA">California </option> - <option value="CO">Colorado </option> - <option value="CT">Connecticut </option> - <option value="DE">Delaware </option> - <option value="DC">District of Columbia </option> - <option value="FL">Florida </option> - <option value="GA">Georgia </option> - <option value="HI">Hawaii </option> - <option value="ID">Idaho </option> - <option value="IL">Illinois </option> - <option value="IN">Indiana </option> - <option value="IA">Iowa </option> - <option value="KS">Kansas </option> - <option value="KY">Kentucky </option> - <option value="LA">Louisiana </option> - <option value="ME">Maine </option> - <option value="MB">Manitoba </option> - <option value="MD">Maryland </option> - <option value="MA">Massachusetts </option> - <option value="MI">Michigan </option> - <option value="MN">Minnesota </option> - <option value="MS">Mississippi </option> - <option value="MO">Missouri </option> - <option value="MT">Montana </option> - <option value="NE">Nebraska </option> - <option value="NV">Nevada </option> - <option value="NB">New Brunswick </option> - <option value="NH">New Hampshire </option> - <option value="NJ">New Jersey </option> - <option value="NM">New Mexico </option> - <option value="NY">New York </option> - <option value="NF">Newfoundland </option> - <option value="NC">North Carolina </option> - <option value="ND">North Dakota </option> - <option value="NT">Northwest Territories </option> - <option value="NS">Nova Scotia </option> - <option value="OH">Ohio </option> - <option value="OK">Oklahoma </option> - <option value="ON">Ontario </option> - <option value="OR">Oregon </option> - <option value="PA">Pennsylvania </option> - <option value="PE">Prince Edward Island </option> - <option value="PR">Puerto Rico </option> - <option value="QC">Quebec </option> - <option value="RI">Rhode Island </option> - <option value="SK">Saskatchewan </option> - <option value="SC">South Carolina </option> - <option value="SD">South Dakota </option> - <option value="TN">Tennessee </option> - <option value="TX">Texas </option> - <option value="UT">Utah </option> - <option value="VT">Vermont </option> - <option value="VA">Virginia </option> - <option value="WA">Washington </option> - <option value="WV">West Virginia </option> - <option value="WI">Wisconsin </option> - <option value="WY">Wyoming </option> + <p> + <label>First Name: </label> + <input type="text" name="first-name" value="" /> + </p> + <p> + <label>Last Name: </label> + <input type="text" name="last-name" value="" /> + </p> + <p> + <label>Address: </label> + <input type="text" name="address1" value="" /> + </p> + <p> + <label>Address 2: </label> + <input type="text" name="address2" value="" /> + </p> + <p> + <label>City: </label> + <input type="text" name="city" value="" /> + </p> + <p> + <label>State/Province: </label> + <select name="State"> + <option value="">Select State/Province...</option> + <option value="AL">Alabama </option> + <option value="AK">Alaska </option> + <option value="AB">Alberta </option> + <option value="AZ">Arizona </option> + <option value="AR">Arkansas </option> + <option value="BC">British Columbia </option> + <option value="CA">California </option> + <option value="CO">Colorado </option> + <option value="CT">Connecticut </option> + <option value="DE">Delaware </option> + <option value="DC">District of Columbia </option> + <option value="FL">Florida </option> + <option value="GA">Georgia </option> + <option value="HI">Hawaii </option> + <option value="ID">Idaho </option> + <option value="IL">Illinois </option> + <option value="IN">Indiana </option> + <option value="IA">Iowa </option> + <option value="KS">Kansas </option> + <option value="KY">Kentucky </option> + <option value="LA">Louisiana </option> + <option value="ME">Maine </option> + <option value="MB">Manitoba </option> + <option value="MD">Maryland </option> + <option value="MA">Massachusetts </option> + <option value="MI">Michigan </option> + <option value="MN">Minnesota </option> + <option value="MS">Mississippi </option> + <option value="MO">Missouri </option> + <option value="MT">Montana </option> + <option value="NE">Nebraska </option> + <option value="NV">Nevada </option> + <option value="NB">New Brunswick </option> + <option value="NH">New Hampshire </option> + <option value="NJ">New Jersey </option> + <option value="NM">New Mexico </option> + <option value="NY">New York </option> + <option value="NF">Newfoundland </option> + <option value="NC">North Carolina </option> + <option value="ND">North Dakota </option> + <option value="NT">Northwest Territories </option> + <option value="NS">Nova Scotia </option> + <option value="OH">Ohio </option> + <option value="OK">Oklahoma </option> + <option value="ON">Ontario </option> + <option value="OR">Oregon </option> + <option value="PA">Pennsylvania </option> + <option value="PE">Prince Edward Island </option> + <option value="PR">Puerto Rico </option> + <option value="QC">Quebec </option> + <option value="RI">Rhode Island </option> + <option value="SK">Saskatchewan </option> + <option value="SC">South Carolina </option> + <option value="SD">South Dakota </option> + <option value="TN">Tennessee </option> + <option value="TX">Texas </option> + <option value="UT">Utah </option> + <option value="VT">Vermont </option> + <option value="VA">Virginia </option> + <option value="WA">Washington </option> + <option value="WV">West Virginia </option> + <option value="WI">Wisconsin </option> + <option value="WY">Wyoming </option> <option value="YT">Yukon </option> </select> </p> - <p><label>Country: </label> - <select name="Country"> + <p> + <label>Country: </label> + <select name="Country"> <option value="">Select Country...</option> - <option value="Canada">Canada</option> + <option value="Canada">Canada</option> <option value="United States">United States</option> </select> </p> - <p><label>Zip/Postal Code: </label><input type="text" name="zipcode" value="" /></p> - <p><label>Phone Number: </label><input type="text" name="phone" value="" /></p> - <p><label>Email Address: </label><input type="text" name="email" value="" /></p> + <p> + <label>Zip/Postal Code: </label> + <input type="text" name="zipcode" value="" /> + </p> + <p> + <label>Phone Number: </label> + <input type="text" name="phone" value="" /> + </p> + <p> + <label>Email Address: </label> + <input type="text" name="email" value="" /> + </p> <input type="submit" value="Register" class="register-button" /> </fieldset> </form> </div> </div> </div> - <div class="grid_4"> + <div class="grid_5"> <div class="box"> <h2> - <a name="search" id="toggle-search">Search</a> + <a href="#" id="toggle-search">Search</a> </h2> <div class="block" id="search"> <form method="get" action="" class="search"> <p> - <input class="search text" name="value" type="text"/> - <input class="search button" value="Search" type="submit"/> + <input class="search text" name="value" type="text" /> + <input class="search button" value="Search" type="submit" /> </p> </form> </div> </div> <div class="box"> <h2> - <a name="login-forms" id="toggle-login-forms">Login Forms</a> + <a href="#" id="toggle-login-forms">Login Forms</a> </h2> <div class="block" id="login-forms"> <form action=""> <fieldset class="login"> <legend>Login</legend> <p class="notice">Login to complete your purchase.</p> - <p><label>Username: </label><input type="text" name="username" /></p> - <p><label>Password: </label><input type="password" name="password" /></p> + <p> + <label>Username: </label> + <input type="text" name="username" /> + </p> + <p> + <label>Password: </label> + <input type="password" name="password" /> + </p> <input class="login button" type="submit" value="Login" /> </fieldset> </form> @@ -665,31 +998,41 @@ </div> <div class="box articles"> <h2> - <a name="articles" id="toggle-articles">Articles</a> + <a href="#" id="toggle-articles">Articles</a> </h2> <div class="block" id="articles"> <div class="first article"> - <h3><a name="heading1">Article Heading</a></h3> + <h3> + <a href="#">Article Heading</a> + </h3> <h4>Subheading</h4> - <p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p> - <a name="image1" class="image"><img src="img/photo_60x60.jpg" width="60" height="60" alt="photo"/></a> - <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a name="link1">Visit site.</a></p> + <p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p> + <a href="#" class="image"> + <img src="../img/photo_60x60.jpg" width="60" height="60" alt="photo" /> + </a> + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a href="#">Visit site.</a></p> </div> <div class="article"> - <h3><a name="heading2">Article Heading</a></h3> + <h3> + <a href="#">Article Heading</a> + </h3> <h4>Subheading</h4> - <p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p> - <a name="image2" class="image"><img src="img/photo_60x60.jpg" width="60" height="60" alt="photo"/></a> - <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a name="link2">Visit site.</a></p> + <p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p> + <a href="#" class="image"> + <img src="../img/photo_60x60.jpg" width="60" height="60" alt="photo" /> + </a> + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a href="#">Visit site.</a></p> </div> <div class="article"> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> - <p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p> - <a name="image3" class="image"><img src="img/photo_60x60.jpg" width="60" height="60" alt="photo"/></a> - <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a name="link3">Visit site.</a></p> + <p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p> + <a href="#" class="image"> + <img src="../img/photo_60x60.jpg" width="60" height="60" alt="photo" /> + </a> + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a href="#">Visit site.</a></p> <h5>Heading 5</h5> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> <h6>Heading 6</h6> @@ -699,15 +1042,16 @@ </div> </div> <div class="clear"></div> - <div class="grid_12" id="site_info"> + <div class="grid_16" id="site_info"> <div class="box"> <p>Fluid 960 Grid System, created by <a href="http://www.domain7.com/WhoWeAre/StephenBau.html">Stephen Bau</a>, based on the <a href="http://960.gs/">960 Grid System</a> by <a href="http://sonspring.com/journal/960-grid-system">Nathan Smith</a>. Released under the - <a href="licenses/GPL_license.txt">GPL</a>/ - <a href="licenses/MIT_license.txt">MIT</a> - <a href="README.txt">Licenses</a>.</p> + <a href="../licenses/GPL_license.txt">GPL</a> / <a href="../licenses/MIT_license.txt">MIT</a> <a href="../README.txt">Licenses</a>.</p> </div> </div> <div class="clear"></div> </div> + <script type="text/javascript" src="../js/mootools-1.2.1-core.js"></script> + <script type="text/javascript" src="../js/mootools-1.2-more.js"></script> + <script type="text/javascript" src="../js/mootools-fluid16-autoselect.js"></script> </body> </html> \ No newline at end of file 960/index.html @@ -1,5 +1,5 @@ <!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" xml:lang="en" lang="en"> +<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Fluid 960 Grid System | 16-column Grid</title> @@ -10,33 +10,86 @@ <link rel="stylesheet" type="text/css" href="css/nav.css" media="screen" />   - <script type="text/javascript" src="js/mootools.js"></script> - <script type="text/javascript" src="js/fluid16.js"></script> - <script type="text/javascript" src="js/kwick.js"></script> - <script type="text/javascript" src="js/accordion.js"></script> - <script type="text/javascript" src="js/sectionmenu.js"></script> </head> <body> <div class="container_16"> <div class="grid_16"> <h1 id="branding"> - <a href="./">Fluid 960 Grid System</a> + <a href="">Fluid 960 Grid System</a> </h1> </div> <div class="clear"></div> <div class="grid_16"> <ul class="nav main"> <li> - <a href="960/">Fixed 12-column</a> - </li> - <li> <a href="12/">Fluid 12-column</a> + <ul> + <li> + <a href="12/fluid/mootools/">MooTools</a> + </li> + <li> + <a href="12/fluid/jquery/">jQuery</a> + </li> + <li> + <a href="12/fluid/none/">No Javascript</a> + </li> + </ul> </li> <li> <a href="16/">Fluid 16-column</a> + <ul> + <li> + <a href="16/fluid/mootools/">MooTools</a> + </li> + <li> + <a href="16/fluid/jquery/">jQuery</a> + </li> + <li> + <a href="16/fluid/none/">No Javascript</a> + </li> + </ul> </li> <li> - <a href="http://beta.overture21.com/forum/comments.php?DiscussionID=231">Download Files</a> + <a href="12/fixed/">Fixed 12-column</a> + <ul> + <li> + <a href="12/fixed/mootools/">MooTools</a> + </li> + <li> + <a href="12/fixed/jquery/">jQuery</a> + </li> + <li> + <a href="12/fixed/none/">No Javascript</a> + </li> + </ul> + </li> + <li> + <a href="16/fixed/">Fixed 16-column</a> + <ul> + <li> + <a href="16/fixed/mootools/">MooTools</a> + </li> + <li> + <a href="16/fixed/jquery/">jQuery</a> + </li> + <li> + <a href="16/fixed/none/">No Javascript</a> + </li> + </ul> + </li> + <li> + <a href="http://overture21.com/forum/comments.php?DiscussionID=231">Download / Forum</a> + <ul> + <li> + <a href="http://github.com/bauhouse/fluid960gs/tree/">Download: Github</a> + </li> + <li> + <a href="http://github.com/bauhouse/sym-fluid960gs/tree/">Symphony Ensemble</a> + </li> + <li> + <a href="http://overture21.com/forum/comments.php?DiscussionID=231">Forum Discussion</a> + </li> + </ul> </li> <li class="secondary"> <a href="http://960.gs/" title="960.gs | A CSS grid system developed by Nathan Smith">The 960 Grid System</a> @@ -48,12 +101,11 @@ <h2 id="page-heading">Templates for Rapid Interactive Prototyping</h2> </div> <div class="clear"></div> - <div class="grid_4"> <div class="box"> <h2>Design Process</h2> <div class="block"> - <p>Design is based on the inspiration of past accomplishments. On that foundation, we can build upon those achievements to shape the future. Design is about life — past, present and future — and the learning process that happens between birth and death. It is about community and shared knowledge and experience. It is the passion to build on what we've learned to create something better.</p> + <p>Design is based on the inspiration of past accomplishments. On that foundation, we can build upon those achievements to shape the future. Design is about life — past, present and future — and the learning process that happens between birth and death. It is about community and shared knowledge and experience. It is the passion to build on what we've learned to create something better.</p> </div> </div> </div> @@ -70,20 +122,20 @@ <h2>Inspiration</h2> <div class="block"> <p>I have been inspired by the work of many who have pioneered advances in Web Standards, including - <a href="http://www.31three.com/" title="www.31three.com">Jesse Bennett-Chamberlain</a>, - <a href="http://www.stopdesign.com/" title="www.stopdesign.com">Douglas Bowman</a>, - <a href="http://www.chaoticpattern.com/" title="www.chaoticpattern.com">Allen Chang</a>, - <a href="http://www.stuffandnonsense.co.uk/" title="www.stuffandnonsense.co.uk">Andy Clarke</a>, - <a href="http://www.hicksdesign.co.uk/" title="www.hicksdesign.co.uk">Jon Hicks</a>, - <a href="http://www.shauninman.com/" title="www.shauninman.com">Shaun Inman</a>, - <a href="http://www.cameronmoll.com/" title="www.cameronmoll.com">Cameron Moll</a>, - <a href="http://veerle.duoh.com/" title="veerle.duoh.com">Veerle Pieters</a>, - <a href="http://www.jasonsantamaria.com/" title="www.jasonsantamaria.com">Jason Santa Maria</a>, - <a href="http://www.mezzoblue.com/" title="www.mezzoblue.com">Dave Shea</a>, - <a href="http://www.thebignoob.com/" title="www.thebignoob.com">Ryan Sims</a>, - <a href="http://www.sonspring.com/" title="www.sonspring.com">Nathan Smith</a>, and - <a href="http://www.zeldman.com/" title="www.zeldman.com">Jeffrey Zeldman</a>, - to name a few. Thank you for inspiring <a href="http://www.domain7.com/WhoWeAre/StephenBau.html" title="Stephen Bau, Designer, Domain7">me</a> to give something back.</p> + <a href="http://www.31three.com/" title="www.31three.com">Jesse Bennett-Chamberlain</a>, + <a href="http://www.stopdesign.com/" title="www.stopdesign.com">Douglas Bowman</a>, + <a href="http://www.chaoticpattern.com/" title="www.chaoticpattern.com">Allen Chang</a>, + <a href="http://www.stuffandnonsense.co.uk/" title="www.stuffandnonsense.co.uk">Andy Clarke</a>, + <a href="http://www.hicksdesign.co.uk/" title="www.hicksdesign.co.uk">Jon Hicks</a>, + <a href="http://www.shauninman.com/" title="www.shauninman.com">Shaun Inman</a>, + <a href="http://www.cameronmoll.com/" title="www.cameronmoll.com">Cameron Moll</a>, + <a href="http://veerle.duoh.com/" title="veerle.duoh.com">Veerle Pieters</a>, + <a href="http://www.jasonsantamaria.com/" title="www.jasonsantamaria.com">Jason Santa Maria</a>, + <a href="http://www.mezzoblue.com/" title="www.mezzoblue.com">Dave Shea</a>, + <a href="http://www.thebignoob.com/" title="www.thebignoob.com">Ryan Sims</a>, + <a href="http://www.sonspring.com/" title="www.sonspring.com">Nathan Smith</a>, and + <a href="http://www.zeldman.com/" title="www.zeldman.com">Jeffrey Zeldman</a>, + to name a few. Thank you for inspiring <a href="http://www.domain7.com/WhoWeAre/StephenBau.html" title="Stephen Bau, Designer, Domain7">me</a> to give something back.</p> </div> </div> </div> @@ -91,121 +143,369 @@ <div class="box"> <h2>Contribution</h2> <div class="block"> - <p>The <a href="/fluid960gs/">Fluid 960 Grid System</a> templates have been built upon the work of Nathan Smith and his <a href="http://960.gs/">960 Grid System</a> using effects from the <a href="http://www.mootools.net/">Mootools</a> JavaScript library. The idea for building these templates was inspired by Andy Clarke, author of <a href="http://www.transcendingcss.com/">Transcending CSS</a>, who advocates a content-out approach to rapid interactive prototyping, crediting Jason Santa Maria with the <a href="http://www.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php">grey box method</a>.</p> + <p>The <a href="/fluid960gs/">Fluid 960 Grid System</a> templates have been built upon the work of Nathan Smith and his <a href="http://960.gs/">960 Grid System</a> using effects from the <a href="http://mootools.net/">MooTools</a> and <a href="http://jquery.com/">jQuery</a> JavaScript libraries. + The idea for building these templates was inspired by Andy Clarke, author of <a href="http://www.transcendingcss.com/">Transcending CSS</a>, who advocates a content-out approach to rapid interactive prototyping, crediting Jason Santa Maria with the <a href="http://www.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php">grey box method</a>.</p> </div> </div> </div> <div class="clear"></div> - - <div class="box grid_16" style="padding:0;"><h2 style="margin:0"><a name="16-column" style="background-position:99.3% 50%" id="toggle-grid">16-column Grid</a></h2></div> + <div class="box grid_16" style="padding:0;"> + <h2 style="margin:0"> + <a href="#" style="background-position:99.3% 50%" id="toggle-grid">16-column Grid</a> + </h2> + </div> <div class="clear"></div> - <div id="grid"> - - <div class="grid_1"><div class="box"><p>01</p></div></div> - <div class="grid_1"><div class="box"><p>02</p></div></div> - <div class="grid_1"><div class="box"><p>03</p></div></div> - <div class="grid_1"><div class="box"><p>04</p></div></div> - <div class="grid_1"><div class="box"><p>05</p></div></div> - <div class="grid_1"><div class="box"><p>06</p></div></div> - <div class="grid_1"><div class="box"><p>07</p></div></div> - <div class="grid_1"><div class="box"><p>08</p></div></div> - <div class="grid_1"><div class="box"><p>09</p></div></div> - <div class="grid_1"><div class="box"><p>10</p></div></div> - <div class="grid_1"><div class="box"><p>11</p></div></div> - <div class="grid_1"><div class="box"><p>12</p></div></div> - <div class="grid_1"><div class="box"><p>13</p></div></div> - <div class="grid_1"><div class="box"><p>14</p></div></div> - <div class="grid_1"><div class="box"><p>15</p></div></div> - <div class="grid_1"><div class="box"><p>16</p></div></div> + <div class="grid_1"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>03</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>04</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>05</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>06</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>07</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>08</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>09</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>10</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>11</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>12</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>13</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>14</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>15</p> + </div> + </div> + <div class="grid_1"> + <div class="box"> + <p>16</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_2"><div class="box"><p>01</p></div></div> - <div class="grid_2"><div class="box"><p>02</p></div></div> - <div class="grid_2"><div class="box"><p>03</p></div></div> - <div class="grid_2"><div class="box"><p>04</p></div></div> - <div class="grid_2"><div class="box"><p>05</p></div></div> - <div class="grid_2"><div class="box"><p>06</p></div></div> - <div class="grid_2"><div class="box"><p>07</p></div></div> - <div class="grid_2"><div class="box"><p>08</p></div></div> + <div class="grid_2"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>03</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>04</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>05</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>06</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>07</p> + </div> + </div> + <div class="grid_2"> + <div class="box"> + <p>08</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_3"><div class="box"><p>01</p></div></div> - <div class="grid_3"><div class="box"><p>02</p></div></div> - <div class="grid_3"><div class="box"><p>03</p></div></div> - <div class="grid_3"><div class="box"><p>04</p></div></div> - <div class="grid_4"><div class="box"><p>05</p></div></div> + <div class="grid_3"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_3"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_3"> + <div class="box"> + <p>03</p> + </div> + </div> + <div class="grid_3"> + <div class="box"> + <p>04</p> + </div> + </div> + <div class="grid_4"> + <div class="box"> + <p>05</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_4"><div class="box"><p>01</p></div></div> - <div class="grid_4"><div class="box"><p>02</p></div></div> - <div class="grid_4"><div class="box"><p>03</p></div></div> - <div class="grid_4"><div class="box"><p>04</p></div></div> + <div class="grid_4"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_4"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_4"> + <div class="box"> + <p>03</p> + </div> + </div> + <div class="grid_4"> + <div class="box"> + <p>04</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_5"><div class="box"><p>01</p></div></div> - <div class="grid_5"><div class="box"><p>02</p></div></div> - <div class="grid_6"><div class="box"><p>03</p></div></div> + <div class="grid_5"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_5"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_6"> + <div class="box"> + <p>03</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_6"><div class="box"><p>01</p></div></div> - <div class="grid_5"><div class="box"><p>02</p></div></div> - <div class="grid_5"><div class="box"><p>03</p></div></div> + <div class="grid_6"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_5"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_5"> + <div class="box"> + <p>03</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_7"><div class="box"><p>01</p></div></div> - <div class="grid_5"><div class="box"><p>02</p></div></div> - <div class="grid_4"><div class="box"><p>03</p></div></div> + <div class="grid_7"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_5"> + <div class="box"> + <p>02</p> + </div> + </div> + <div class="grid_4"> + <div class="box"> + <p>03</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_8"><div class="box"><p>01</p></div></div> - <div class="grid_8"><div class="box"><p>02</p></div></div> + <div class="grid_8"> + <div class="box"> + <p>01</p> + </div> + </div> + <div class="grid_8"> + <div class="box"> + <p>02</p> + </div> + </div> <div class="clear"></div> - - <div class="grid_1 suffix_11"><div class="box"><p>01</p></div></div> + <div class="grid_1 suffix_11"> + <div class="box"> + <p>01</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_1 suffix_10"><div class="box"><p>02</p></div></div> + <div class="grid_1 prefix_1 suffix_10"> + <div class="box"> + <p>02</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_2 suffix_9"><div class="box"><p>03</p></div></div> + <div class="grid_1 prefix_2 suffix_9"> + <div class="box"> + <p>03</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_3 suffix_8"><div class="box"><p>04</p></div></div> + <div class="grid_1 prefix_3 suffix_8"> + <div class="box"> + <p>04</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_4 suffix_7"><div class="box"><p>05</p></div></div> + <div class="grid_1 prefix_4 suffix_7"> + <div class="box"> + <p>05</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_5 suffix_6"><div class="box"><p>06</p></div></div> + <div class="grid_1 prefix_5 suffix_6"> + <div class="box"> + <p>06</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_6 suffix_5"><div class="box"><p>07</p></div></div> + <div class="grid_1 prefix_6 suffix_5"> + <div class="box"> + <p>07</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_7 suffix_4"><div class="box"><p>08</p></div></div> + <div class="grid_1 prefix_7 suffix_4"> + <div class="box"> + <p>08</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_8 suffix_3"><div class="box"><p>09</p></div></div> + <div class="grid_1 prefix_8 suffix_3"> + <div class="box"> + <p>09</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_9 suffix_2"><div class="box"><p>10</p></div></div> + <div class="grid_1 prefix_9 suffix_2"> + <div class="box"> + <p>10</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_10 suffix_1"><div class="box"><p>11</p></div></div> + <div class="grid_1 prefix_10 suffix_1"> + <div class="box"> + <p>11</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_11 suffix_1"><div class="box"><p>12</p></div></div> + <div class="grid_1 prefix_11 suffix_1"> + <div class="box"> + <p>12</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_12 suffix_1"><div class="box"><p>13</p></div></div> + <div class="grid_1 prefix_12 suffix_1"> + <div class="box"> + <p>13</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_13 suffix_1"><div class="box"><p>14</p></div></div> + <div class="grid_1 prefix_13 suffix_1"> + <div class="box"> + <p>14</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_14 suffix_1"><div class="box"><p>15</p></div></div> + <div class="grid_1 prefix_14 suffix_1"> + <div class="box"> + <p>15</p> + </div> + </div> <div class="clear"></div> - <div class="grid_1 prefix_15"><div class="box"><p>16</p></div></div> + <div class="grid_1 prefix_15"> + <div class="box"> + <p>16</p> + </div> + </div> <div class="clear"></div> - </div> - <div class="grid_16"> <div class="box" id="kwick-box"> <h2>Mootools Fx.Elements</h2> <div id="kwick"> <ul class="kwicks"> - <li><a class="kwick one" name="one"><span>One</span></a></li> - <li><a class="kwick two" name="two"><span>Two</span></a></li> - <li><a class="kwick three" name="three"><span>Three</span></a></li> - <li><a class="kwick four" name="four"><span>Four</span></a></li> + <li> + <a class="kwick one" href="#"> + <span>One</span> + </a> + </li> + <li> + <a class="kwick two" href="#"> + <span>Two</span> + </a> + </li> + <li> + <a class="kwick three" href="#"> + <span>Three</span> + </a> + </li> + <li> + <a class="kwick four" href="#"> + <span>Four</span> + </a> + </li> </ul> </div> </div> @@ -214,108 +514,106 @@ <div class="grid_4"> <div class="box"> <h2> - <a name="paragraph" id="toggle-paragraphs" class="hidden">Paragraphs</a> + <a href="#" id="toggle-paragraphs">Paragraphs</a> </h2> <div class="block" id="paragraphs"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> - <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="box"> <h2> - <a name="ajax" id="toggle-ajax" class="hidden"> - <img src="img/ajax-loader.gif" id="loading" alt="Loading" /> - Ajax Content - </a> + <a href="#" id="toggle-ajax" class="hidden"><img src="img/ajax-loader.gif" id="loading" alt="Loading" /> + Ajax Content + </a> </h2> <div class="block" id="ajax-content"> - Content loaded dynamically - </div> + Content loaded dynamically + </div> </div> <div class="box menu"> <h2> - <a name="section-menu" id="toggle-section-menu">Section Menu</a> + <a href="#" id="toggle-section-menu">Section Menu</a> </h2> <div class="block" id="section-menu"> <ul class="section menu"> <li> - <a name="menu1" class="menuitem">Menu 1</a> + <a class="menuitem">Menu 1</a> <ul class="submenu"> <li> - <a name="menu1-submenu1">Submenu 1</a> + <a>Submenu 1</a> </li> <li> - <a name="menu1-submenu2">Submenu 2</a> + <a>Submenu 2</a> </li> <li> - <a name="menu1-submenu3" class="active">Submenu 3</a> + <a class="active">Submenu 3</a> </li> <li> - <a name="menu1-submenu4">Submenu 4</a> + <a>Submenu 4</a> </li> <li> - <a name="menu1-submenu5">Submenu 5</a> + <a>Submenu 5</a> </li> </ul> </li> <li> - <a name="menu2" class="menuitem">Menu 2</a> + <a class="menuitem">Menu 2</a> <ul class="submenu"> <li> - <a name="menu2-submenu1">Submenu 1</a> + <a>Submenu 1</a> </li> <li> - <a name="menu2-submenu2">Submenu 2</a> + <a>Submenu 2</a> </li> <li> - <a name="menu2-submenu3">Submenu 3</a> + <a>Submenu 3</a> </li> <li> - <a name="menu2-submenu4">Submenu 4</a> + <a>Submenu 4</a> </li> <li> - <a name="menu2-submenu5">Submenu 5</a> + <a>Submenu 5</a> </li> </ul> </li> <li> - <a name="menu3" class="menuitem">Menu 3</a> + <a class="menuitem">Menu 3</a> <ul class="submenu"> <li> - <a name="menu3-submenu1">Submenu 1</a> + <a>Submenu 1</a> </li> <li> - <a name="menu3-submenu2">Submenu 2</a> + <a>Submenu 2</a> </li> <li> - <a name="menu3-submenu3">Submenu 3</a> + <a>Submenu 3</a> </li> <li> - <a name="menu3-submenu4">Submenu 4</a> + <a>Submenu 4</a> </li> <li> - <a name="menu3-submenu5">Submenu 5</a> + <a>Submenu 5</a> </li> </ul> </li> <li> - <a name="menu4" class="menuitem">Menu 4</a> + <a class="menuitem">Menu 4</a> <ul class="submenu"> <li> - <a name="menu4-submenu1">Submenu 1</a> + <a>Submenu 1</a> </li> <li> - <a name="menu4-submenu2">Submenu 2</a> + <a>Submenu 2</a> </li> <li> - <a name="menu4-submenu3">Submenu 3</a> + <a>Submenu 3</a> </li> <li> - <a name="menu4-submenu4">Submenu 4</a> + <a>Submenu 4</a> </li> <li> - <a name="menu4-submenu5">Submenu 5</a> + <a>Submenu 5</a> </li> </ul> </li> @@ -324,44 +622,44 @@ </div> <div class="box"> <h2> - <a name="list-items" id="toggle-list-items">List Items</a> + <a href="#" id="toggle-list-items">List Items</a> </h2> <div class="block" id="list-items"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. </p> <h5>A menu</h5> <ul class="menu"> <li> - <a name="item1">Item 1</a> + <a href="#">Item 1</a> </li> <li> - <a name="item2">Item 2</a> + <a href="#">Item 2</a> </li> <li> - <a name="item3">Item 3</a> + <a href="#">Item 3</a> </li> </ul> <h5>An unordered list</h5> <ul> <li> - <a name="item1">Item 1</a> + <a href="#">Item 1</a> </li> <li> - <a name="item2">Item 2</a> + <a href="#">Item 2</a> </li> <li> - <a name="item3">Item 3</a> + <a href="#">Item 3</a> </li> </ul> <h5>An ordered list</h5> <ol> <li> - <a name="item1">Item 1</a> + <a href="#">Item 1</a> </li> <li> - <a name="item2">Item 2</a> + <a href="#">Item 2</a> </li> <li> - <a name="item3">Item 3</a> + <a href="#">Item 3</a> </li> </ol> </div> @@ -369,13 +667,15 @@ </div> <div class="grid_7"> <div class="box"> - <h2><a name="accordian" id="toggle-accordian">Accordian</a></h2> - <div class="block" id="accordian-block"> + <h2> + <a href="#" id="toggle-accordion">Accordion</a> + </h2> + <div class="block" id="accordion"> <div id="accordion"> <h3 class="toggler atStart">Design Process</h3> <div class="element atStart"> <h4>The Value of Design</h4> - <p>Design is based on the inspiration of past accomplishments. On that foundation, we can build upon those achievements to shape the future. Design is about life — past, present and future — and the learning process that happens between birth and death. It is about community and shared knowledge and experience. It is the passion to build on what we've learned to create something better.</p> + <p>Design is based on the inspiration of past accomplishments. On that foundation, we can build upon those achievements to shape the future. Design is about life — past, present and future — and the learning process that happens between birth and death. It is about community and shared knowledge and experience. It is the passion to build on what we've learned to create something better.</p> </div> <h3 class="toggler atStart">Design Influences</h3> <div class="element atStart"> @@ -386,20 +686,20 @@ <div class="element atStart"> <h4>Inspired by the Past</h4> <p>I have been inspired by the work of many who have pioneered advances in Web Standards, including - <a href="http://www.31three.com/" title="www.31three.com">Jesse Bennett-Chamberlain</a>, - <a href="http://www.stopdesign.com/" title="www.stopdesign.com">Douglas Bowman</a>, - <a href="http://www.chaoticpattern.com/" title="www.chaoticpattern.com">Allen Chang</a>, - <a href="http://www.stuffandnonsense.co.uk/" title="www.stuffandnonsense.co.uk">Andy Clarke</a>, - <a href="http://www.hicksdesign.co.uk/" title="www.hicksdesign.co.uk">Jon Hicks</a>, - <a href="http://www.shauninman.com/" title="www.shauninman.com">Shaun Inman</a>, - <a href="http://www.cameronmoll.com/" title="www.cameronmoll.com">Cameron Moll</a>, - <a href="http://veerle.duoh.com/" title="veerle.duoh.com">Veerle Pieters</a>, - <a href="http://www.jasonsantamaria.com/" title="www.jasonsantamaria.com">Jason Santa Maria</a>, - <a href="http://www.mezzoblue.com/" title="www.mezzoblue.com">Dave Shea</a>, - <a href="http://www.thebignoob.com/" title="www.thebignoob.com">Ryan Sims</a>, - <a href="http://www.sonspring.com/" title="www.sonspring.com">Nathan Smith</a>, and - <a href="http://www.zeldman.com/" title="www.zeldman.com">Jeffrey Zeldman</a>, - to name a few. Thank you for inspiring <a href="http://www.domain7.com/WhoWeAre/StephenBau.html" title="Stephen Bau, Designer, Domain7">me</a> to give something back.</p> + <a href="http://www.31three.com/" title="www.31three.com">Jesse Bennett-Chamberlain</a>, + <a href="http://www.stopdesign.com/" title="www.stopdesign.com">Douglas Bowman</a>, + <a href="http://www.chaoticpattern.com/" title="www.chaoticpattern.com">Allen Chang</a>, + <a href="http://www.stuffandnonsense.co.uk/" title="www.stuffandnonsense.co.uk">Andy Clarke</a>, + <a href="http://www.hicksdesign.co.uk/" title="www.hicksdesign.co.uk">Jon Hicks</a>, + <a href="http://www.shauninman.com/" title="www.shauninman.com">Shaun Inman</a>, + <a href="http://www.cameronmoll.com/" title="www.cameronmoll.com">Cameron Moll</a>, + <a href="http://veerle.duoh.com/" title="veerle.duoh.com">Veerle Pieters</a>, + <a href="http://www.jasonsantamaria.com/" title="www.jasonsantamaria.com">Jason Santa Maria</a>, + <a href="http://www.mezzoblue.com/" title="www.mezzoblue.com">Dave Shea</a>, + <a href="http://www.thebignoob.com/" title="www.thebignoob.com">Ryan Sims</a>, + <a href="http://www.sonspring.com/" title="www.sonspring.com">Nathan Smith</a>, and + <a href="http://www.zeldman.com/" title="www.zeldman.com">Jeffrey Zeldman</a>, + to name a few. Thank you for inspiring <a href="http://www.domain7.com/WhoWeAre/StephenBau.html" title="Stephen Bau, Designer, Domain7">me</a> to give something back.</p> </div> <h3 class="toggler atStart">Contribution</h3> <div class="element atStart"> @@ -411,18 +711,20 @@ </div> <div class="box"> <h2> - <a name="blockquote" id="toggle-blockquote">Blockquote</a> + <a href="#" id="toggle-blockquote">Blockquote</a> </h2> <div class="block" id="blockquote"> <blockquote> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> - <p class="cite"><cite>John Smith</cite></p> + <p class="cite"> + <cite>John Smith</cite> + </p> </blockquote> </div> </div> <div class="box"> <h2> - <a name="tables" id="toggle-tables">Tables</a> + <a href="#" id="toggle-tables">Tables</a> </h2> <div class="block" id="tables"> <table> @@ -455,9 +757,9 @@ <table summary="This table includes examples of as many table elements as possible"> <caption>An example table</caption> <colgroup> - <col class="colA"/> - <col class="colB"/> - <col class="colC"/> + <col class="colA" /> + <col class="colB" /> + <col class="colC" /> </colgroup> <thead> <tr> @@ -513,103 +815,138 @@ </div> <div class="box"> <h2> - <a name="forms" id="toggle-forms">Forms</a> + <a href="#" id="toggle-forms">Forms</a> </h2> <div class="block" id="forms"> <form action=""> <fieldset class="login"> <legend>Login Information</legend> - <p><label>Username: </label><input type="text" name="username" value="" /></p> - <p><label>Password: </label><input type="password" name="password" /></p> - <p><label>Re-type Password: </label><input type="password" name="password2" /></p> + <p> + <label>Username: </label> + <input type="text" name="username" value="" /> + </p> + <p> + <label>Password: </label> + <input type="password" name="password" /> + </p> + <p> + <label>Re-type Password: </label> + <input type="password" name="password2" /> + </p> <input class="confirm button" type="submit" value="Confirm Availability" /> </fieldset> <fieldset> <legend>Personal Information</legend> - <p><label>First Name: </label><input type="text" name="first-name" value="" /></p> - <p><label>Last Name: </label><input type="text" name="last-name" value="" /></p> - <p><label>Address: </label><input type="text" name="address1" value="" /></p> - <p><label>Address 2: </label><input type="text" name="address2" value="" /></p> - <p><label>City: </label><input type="text" name="city" value="" /></p> - <p><label>State/Province: </label> - <select name="State"> - <option value="" >Select State/Province...</option> - <option value="AL">Alabama </option> - <option value="AK">Alaska </option> - <option value="AB">Alberta </option> - <option value="AZ">Arizona </option> - <option value="AR">Arkansas </option> - <option value="BC">British Columbia </option> - <option value="CA">California </option> - <option value="CO">Colorado </option> - <option value="CT">Connecticut </option> - <option value="DE">Delaware </option> - <option value="DC">District of Columbia </option> - <option value="FL">Florida </option> - <option value="GA">Georgia </option> - <option value="HI">Hawaii </option> - <option value="ID">Idaho </option> - <option value="IL">Illinois </option> - <option value="IN">Indiana </option> - <option value="IA">Iowa </option> - <option value="KS">Kansas </option> - <option value="KY">Kentucky </option> - <option value="LA">Louisiana </option> - <option value="ME">Maine </option> - <option value="MB">Manitoba </option> - <option value="MD">Maryland </option> - <option value="MA">Massachusetts </option> - <option value="MI">Michigan </option> - <option value="MN">Minnesota </option> - <option value="MS">Mississippi </option> - <option value="MO">Missouri </option> - <option value="MT">Montana </option> - <option value="NE">Nebraska </option> - <option value="NV">Nevada </option> - <option value="NB">New Brunswick </option> - <option value="NH">New Hampshire </option> - <option value="NJ">New Jersey </option> - <option value="NM">New Mexico </option> - <option value="NY">New York </option> - <option value="NF">Newfoundland </option> - <option value="NC">North Carolina </option> - <option value="ND">North Dakota </option> - <option value="NT">Northwest Territories </option> - <option value="NS">Nova Scotia </option> - <option value="OH">Ohio </option> - <option value="OK">Oklahoma </option> - <option value="ON">Ontario </option> - <option value="OR">Oregon </option> - <option value="PA">Pennsylvania </option> - <option value="PE">Prince Edward Island </option> - <option value="PR">Puerto Rico </option> - <option value="QC">Quebec </option> - <option value="RI">Rhode Island </option> - <option value="SK">Saskatchewan </option> - <option value="SC">South Carolina </option> - <option value="SD">South Dakota </option> - <option value="TN">Tennessee </option> - <option value="TX">Texas </option> - <option value="UT">Utah </option> - <option value="VT">Vermont </option> - <option value="VA">Virginia </option> - <option value="WA">Washington </option> - <option value="WV">West Virginia </option> - <option value="WI">Wisconsin </option> - <option value="WY">Wyoming </option> + <p> + <label>First Name: </label> + <input type="text" name="first-name" value="" /> + </p> + <p> + <label>Last Name: </label> + <input type="text" name="last-name" value="" /> + </p> + <p> + <label>Address: </label> + <input type="text" name="address1" value="" /> + </p> + <p> + <label>Address 2: </label> + <input type="text" name="address2" value="" /> + </p> + <p> + <label>City: </label> + <input type="text" name="city" value="" /> + </p> + <p> + <label>State/Province: </label> + <select name="State"> + <option value="">Select State/Province...</option> + <option value="AL">Alabama </option> + <option value="AK">Alaska </option> + <option value="AB">Alberta </option> + <option value="AZ">Arizona </option> + <option value="AR">Arkansas </option> + <option value="BC">British Columbia </option> + <option value="CA">California </option> + <option value="CO">Colorado </option> + <option value="CT">Connecticut </option> + <option value="DE">Delaware </option> + <option value="DC">District of Columbia </option> + <option value="FL">Florida </option> + <option value="GA">Georgia </option> + <option value="HI">Hawaii </option> + <option value="ID">Idaho </option> + <option value="IL">Illinois </option> + <option value="IN">Indiana </option> + <option value="IA">Iowa </option> + <option value="KS">Kansas </option> + <option value="KY">Kentucky </option> + <option value="LA">Louisiana </option> + <option value="ME">Maine </option> + <option value="MB">Manitoba </option> + <option value="MD">Maryland </option> + <option value="MA">Massachusetts </option> + <option value="MI">Michigan </option> + <option value="MN">Minnesota </option> + <option value="MS">Mississippi </option> + <option value="MO">Missouri </option> + <option value="MT">Montana </option> + <option value="NE">Nebraska </option> + <option value="NV">Nevada </option> + <option value="NB">New Brunswick </option> + <option value="NH">New Hampshire </option> + <option value="NJ">New Jersey </option> + <option value="NM">New Mexico </option> + <option value="NY">New York </option> + <option value="NF">Newfoundland </option> + <option value="NC">North Carolina </option> + <option value="ND">North Dakota </option> + <option value="NT">Northwest Territories </option> + <option value="NS">Nova Scotia </option> + <option value="OH">Ohio </option> + <option value="OK">Oklahoma </option> + <option value="ON">Ontario </option> + <option value="OR">Oregon </option> + <option value="PA">Pennsylvania </option> + <option value="PE">Prince Edward Island </option> + <option value="PR">Puerto Rico </option> + <option value="QC">Quebec </option> + <option value="RI">Rhode Island </option> + <option value="SK">Saskatchewan </option> + <option value="SC">South Carolina </option> + <option value="SD">South Dakota </option> + <option value="TN">Tennessee </option> + <option value="TX">Texas </option> + <option value="UT">Utah </option> + <option value="VT">Vermont </option> + <option value="VA">Virginia </option> + <option value="WA">Washington </option> + <option value="WV">West Virginia </option> + <option value="WI">Wisconsin </option> + <option value="WY">Wyoming </option> <option value="YT">Yukon </option> </select> </p> - <p><label>Country: </label> - <select name="Country"> + <p> + <label>Country: </label> + <select name="Country"> <option value="">Select Country...</option> - <option value="Canada">Canada</option> + <option value="Canada">Canada</option> <option value="United States">United States</option> </select> </p> - <p><label>Zip/Postal Code: </label><input type="text" name="zipcode" value="" /></p> - <p><label>Phone Number: </label><input type="text" name="phone" value="" /></p> - <p><label>Email Address: </label><input type="text" name="email" value="" /></p> + <p> + <label>Zip/Postal Code: </label> + <input type="text" name="zipcode" value="" /> + </p> + <p> + <label>Phone Number: </label> + <input type="text" name="phone" value="" /> + </p> + <p> + <label>Email Address: </label> + <input type="text" name="email" value="" /> + </p> <input type="submit" value="Register" class="register-button" /> </fieldset> </form> @@ -619,28 +956,34 @@ <div class="grid_5"> <div class="box"> <h2> - <a name="search" id="toggle-search">Search</a> + <a href="#" id="toggle-search">Search</a> </h2> <div class="block" id="search"> <form method="get" action="" class="search"> <p> - <input class="search text" name="value" type="text"/> - <input class="search button" value="Search" type="submit"/> + <input class="search text" name="value" type="text" /> + <input class="search button" value="Search" type="submit" /> </p> </form> </div> </div> <div class="box"> <h2> - <a name="login-forms" id="toggle-login-forms">Login Forms</a> + <a href="#" id="toggle-login-forms">Login Forms</a> </h2> <div class="block" id="login-forms"> <form action=""> <fieldset class="login"> <legend>Login</legend> <p class="notice">Login to complete your purchase.</p> - <p><label>Username: </label><input type="text" name="username" /></p> - <p><label>Password: </label><input type="password" name="password" /></p> + <p> + <label>Username: </label> + <input type="text" name="username" /> + </p> + <p> + <label>Password: </label> + <input type="password" name="password" /> + </p> <input class="login button" type="submit" value="Login" /> </fieldset> </form> @@ -655,31 +998,41 @@ </div> <div class="box articles"> <h2> - <a name="articles" id="toggle-articles">Articles</a> + <a href="#" id="toggle-articles">Articles</a> </h2> <div class="block" id="articles"> <div class="first article"> - <h3><a name="heading1">Article Heading</a></h3> + <h3> + <a href="#">Article Heading</a> + </h3> <h4>Subheading</h4> - <p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p> - <a name="image1" class="image"><img src="img/photo_60x60.jpg" width="60" height="60" alt="photo"/></a> - <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a name="link1">Visit site.</a></p> + <p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p> + <a href="#" class="image"> + <img src="img/photo_60x60.jpg" width="60" height="60" alt="photo" /> + </a> + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a href="#">Visit site.</a></p> </div> <div class="article"> - <h3><a name="heading2">Article Heading</a></h3> + <h3> + <a href="#">Article Heading</a> + </h3> <h4>Subheading</h4> - <p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p> - <a name="image2" class="image"><img src="img/photo_60x60.jpg" width="60" height="60" alt="photo"/></a> - <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a name="link2">Visit site.</a></p> + <p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p> + <a href="#" class="image"> + <img src="img/photo_60x60.jpg" width="60" height="60" alt="photo" /> + </a> + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a href="#">Visit site.</a></p> </div> <div class="article"> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> - <p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p> - <a name="image3" class="image"><img src="img/photo_60x60.jpg" width="60" height="60" alt="photo"/></a> - <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a name="link3">Visit site.</a></p> + <p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p> + <a href="#" class="image"> + <img src="img/photo_60x60.jpg" width="60" height="60" alt="photo" /> + </a> + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a href="#">Visit site.</a></p> <h5>Heading 5</h5> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> <h6>Heading 6</h6> @@ -692,12 +1045,13 @@ <div class="grid_16" id="site_info"> <div class="box"> <p>Fluid 960 Grid System, created by <a href="http://www.domain7.com/WhoWeAre/StephenBau.html">Stephen Bau</a>, based on the <a href="http://960.gs/">960 Grid System</a> by <a href="http://sonspring.com/journal/960-grid-system">Nathan Smith</a>. Released under the - <a href="licenses/GPL_license.txt">GPL</a>/ - <a href="licenses/MIT_license.txt">MIT</a> - <a href="README.txt">Licenses</a>.</p> + <a href="licenses/GPL_license.txt">GPL</a> / <a href="licenses/MIT_license.txt">MIT</a> <a href="README.txt">Licenses</a>.</p> </div> </div> <div class="clear"></div> </div> + <script type="text/javascript" src="js/mootools-1.2.1-core.js"></script> + <script type="text/javascript" src="js/mootools-1.2-more.js"></script> + <script type="text/javascript" src="js/mootools-fluid16-autoselect.js"></script> </body> </html> \ No newline at end of file index.html 9be0d7ab37875f151ae960c40c027c0bb08b5f65 bauhouse bauhouse@gmail.com http://github.com/bauhouse/fluid960gs/commit/cc72d217782b9afe52ec297689635b2d04356e27 cc72d217782b9afe52ec297689635b2d04356e27

2009-03-31T14:45:42-07:00

Add HTML files 74361eaca2c5a9967755e792e6323b78a9134675 bauhouse bauhouse@gmail.com