Permalink
Browse files

new toolbar and 960.gs liquid encluded plus content

  • Loading branch information...
1 parent abb369a commit f25e4d7d62a3f82834f169d0500a6e3e7dade31a @blazeeboy committed Aug 30, 2009
View

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,189 @@
+<ul class="nav main">
+ <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 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 class="box menu">
+ <h2>
+ <a href="#" id="toggle-section-menu">Section Menu</a>
+ </h2>
+
+ <div class="block" id="section-menu">
+
+ <ul class="section menu">
+ <li>
+ <a class="menuitem">Menu 1</a>
+ <ul class="submenu">
+ <li>
+ <a>Submenu 1</a>
+ </li>
+ <li>
+
+ <a>Submenu 2</a>
+ </li>
+ <li>
+ <a class="active">Submenu 3</a>
+ </li>
+ <li>
+ <a>Submenu 4</a>
+
+ </li>
+ <li>
+ <a>Submenu 5</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+
+ <a class="menuitem">Menu 4</a>
+ <ul class="submenu">
+ <li>
+ <a>Submenu 1</a>
+ </li>
+ <li>
+ <a>Submenu 2</a>
+
+ </li>
+ <li>
+ <a>Submenu 3</a>
+ </li>
+ <li>
+ <a>Submenu 4</a>
+ </li>
+ <li>
+
+ <a>Submenu 5</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+
+ </div>
+</div>
+
+<div class="box">
+ <h2>
+ <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 href="#">Item 1</a>
+ </li>
+ <li>
+ <a href="#">Item 2</a>
+ </li>
+ <li>
+ <a href="#">Item 3</a>
+
+ </li>
+ </ul>
+ <h5>An unordered list</h5>
+ <ul>
+ <li>
+ <a href="#">Item 1</a>
+ </li>
+ <li>
+
+ <a href="#">Item 2</a>
+ </li>
+ <li>
+ <a href="#">Item 3</a>
+ </li>
+ </ul>
+ <h5>An ordered list</h5>
+
+ <ol>
+ <li>
+ <a href="#">Item 1</a>
+ </li>
+ <li>
+ <a href="#">Item 2</a>
+ </li>
+ <li>
+
+ <a href="#">Item 3</a>
+ </li>
+ </ol>
+ </div>
+</div>
+
+<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 build on what we've learned to create something better.</p>
+ </div>
+
+ <h3 class="toggler atStart">Inspiration</h3>
+ <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
+ ,
+ 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">
+ <h4>Shaping the Future</h4>
+ <p>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>
+
+<blockquote>
+ <p>
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy aliquip ex ea commodo consequat.
+ </p>
+ <p class="cite">
+ <cite>John Smith</cite>
+ </p>
+</blockquote>
+
+<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>
+ <input class="confirm button" type="submit" value="Confirm Availability" />
+ </fieldset>
+</form>
View
@@ -0,0 +1,31 @@
+/*
+ Fluid 960 Grid System - IE Fixes (IE7 and greater)
+ Learn more ~ http://www.designinfluences.com/
+
+ Licensed under GPL and MIT.
+*/
+
+/* =Grid >> Global
+--------------------------------------------------------------------------------*/
+
+.grid_1,
+.grid_2,
+.grid_3,
+.grid_4,
+.grid_5,
+.grid_6,
+.grid_7,
+.grid_8,
+.grid_9,
+.grid_10,
+.grid_11,
+.grid_12,
+.grid_13,
+.grid_14,
+.grid_15,
+.grid_16
+{
+ margin-left: .92%;
+ margin-right: .92%;
+}
+
View
@@ -0,0 +1,31 @@
+/*
+ Fluid 960 Grid System - IE6 Fixes
+ Learn more ~ http://www.designinfluences.com/
+
+ Licensed under GPL and MIT.
+*/
+
+/* =Grid >> Global
+--------------------------------------------------------------------------------*/
+
+.grid_1,
+.grid_2,
+.grid_3,
+.grid_4,
+.grid_5,
+.grid_6,
+.grid_7,
+.grid_8,
+.grid_9,
+.grid_10,
+.grid_11,
+.grid_12,
+.grid_13,
+.grid_14,
+.grid_15,
+.grid_16
+{
+ margin-left: .8%;
+ margin-right: .8%;
+}
+
@@ -0,0 +1,103 @@
+var fluid = {
+Ajax : function(){
+ $("#loading").hide();
+ var content = $("#ajax-content").hide();
+ $("#toggle-ajax").bind("click", function(e) {
+ if ( $(this).is(".hidden") ) {
+ $("#ajax-content").empty();
+
+ $("#loading").show();
+ $("#ajax-content").load("/fluid960gs/data/ajax-response.html", function() {
+ $("#loading").hide();
+ content.slideDown();
+ });
+ }
+ else {
+ content.slideUp();
+ }
+ if ($(this).hasClass('hidden')){
+ $(this).removeClass('hidden').addClass('visible');
+ }
+ else {
+ $(this).removeClass('visible').addClass('hidden');
+ }
+ e.preventDefault();
+ });
+},
+Toggle : function(){
+ var default_hide = {"grid": true };
+ $.each(
+ ["grid", "paragraphs", "blockquote", "list-items", "section-menu", "tables", "forms", "login-forms", "search", "articles", "accordion"],
+ function() {
+ var el = $("#" + (this == 'accordon' ? 'accordion-block' : this) );
+ if (default_hide[this]) {
+ el.hide();
+ $("[id='toggle-"+this+"']").addClass("hidden")
+ }
+ $("[id='toggle-"+this+"']")
+ .bind("click", function(e) {
+ if ($(this).hasClass('hidden')){
+ $(this).removeClass('hidden').addClass('visible');
+ el.slideDown();
+ } else {
+ $(this).removeClass('visible').addClass('hidden');
+ el.slideUp();
+ }
+ e.preventDefault();
+ });
+ }
+ );
+},
+Kwicks : function(){
+ var animating = false;
+ $("#kwick .kwick")
+ .bind("mouseenter", function(e) {
+ if (animating) return false;
+ animating == true;
+ $("#kwick .kwick").not(this).animate({ "width": 125 }, 200);
+ $(this).animate({ "width": 485 }, 200, function() {
+ animating = false;
+ });
+ });
+ $("#kwick").bind("mouseleave", function(e) {
+ $(".kwick", this).animate({ "width": 215 }, 200);
+ });
+},
+SectionMenu : function(){
+ $("#section-menu")
+ .accordion({
+ "header": "a.menuitem"
+ })
+ .bind("accordionchangestart", function(e, data) {
+ data.newHeader.next().andSelf().addClass("current");
+ data.oldHeader.next().andSelf().removeClass("current");
+ })
+ .find("a.menuitem:first").addClass("current")
+ .next().addClass("current");
+},
+Accordion: function(){
+ $("#accordion").accordion({
+ 'header': "h3.atStart"
+ }).bind("accordionchangestart", function(e, data) {
+ data.newHeader.css({
+ "font-weight": "bold",
+ "background": "#fff"
+ });
+
+ data.oldHeader.css({
+ "font-weight": "normal",
+ "background": "#eee"
+ });
+ }).find("h3.atStart:first").css({
+ "font-weight": "bold",
+ "background": "#fff"
+ });
+}
+}
+jQuery(function ($) {
+ if($("#accordion").length){fluid.Accordion();}
+ if($("[id$='ajax']").length){fluid.Ajax();}
+ if($("[id^='toggle']").length){fluid.Toggle();}
+ if($("#kwick .kwick").length){fluid.Kwicks();}
+ if($("#section-menu").length){fluid.SectionMenu();}
+});
Oops, something went wrong.

0 comments on commit f25e4d7

Please sign in to comment.