]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
Remove the unnecessary global.js file, remove the old baseline grid image, add in...
authorMark Otto <markdotto@gmail.com>
Wed, 27 Apr 2011 21:49:56 +0000 (14:49 -0700)
committerMark Otto <markdotto@gmail.com>
Wed, 27 Apr 2011 21:49:56 +0000 (14:49 -0700)
img/baseline-10px.png [new file with mode: 0644]
img/baseline-20px.png [deleted file]
index.html
js/global.js [deleted file]
js/jquery/hashgrid.js [new file with mode: 0755]
less/docs.less
less/scaffolding.less
readme.markdown

diff --git a/img/baseline-10px.png b/img/baseline-10px.png
new file mode 100644 (file)
index 0000000..16095dc
Binary files /dev/null and b/img/baseline-10px.png differ
diff --git a/img/baseline-20px.png b/img/baseline-20px.png
deleted file mode 100644 (file)
index 6894c4c..0000000
Binary files a/img/baseline-20px.png and /dev/null differ
index 9aa2355b0d5f3dd324c8191637703c944ca14fca..654d5cc338e5cb27b41e09739363b025242d8acf 100644 (file)
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>Baseline</title>
+    <title>Twitter Baseline</title>
 
     <!-- // Less.js at the ready! -->
     <link rel="stylesheet/less" type="text/css" media="all" href="less/baseline.less" />
@@ -11,6 +11,7 @@
     <!-- // jQuery! -->
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
     <script type="text/javascript" src="http://tablesorter.com/jquery.tablesorter.min.js"></script>
+    <script type="text/javascript" src="js/jquery/hashgrid.js"></script>
     <script type="text/javascript">
       $(document).ready(function(){
         // Active state in top nav
@@ -36,7 +37,7 @@
 <!--
                <style>
                  body {
-                   background: url(img/baseline-20px.png) repeat 0 0, url(img/grid-940px.png) repeat-y top center;
+                   background: url(img/baseline-10px.png) repeat 0 0, url(img/grid-940px.png) repeat-y top center;
                    background-color: #fff;
                  }
                </style>
diff --git a/js/global.js b/js/global.js
deleted file mode 100644 (file)
index a934a33..0000000
+++ /dev/null
@@ -1,75 +0,0 @@
-$(document).ready(function(){
-  // Get Heights
-  windowHeight = $(window).height();
-  documentHeight = $(document).height();
-  sidebarHeight = windowHeight - 40;
-  containerHeight = windowHeight - 40;
-  
-  // Get Widths
-  windowWidth = $(window).width();
-  containerWidth = windowWidth - 200;
-  
-  if (windowHeight < containerHeight) {
-  
-    // Set Dimensions for default state (before resize)
-    $('div#sidebar').css({
-      height: sidebarHeight
-    });
-    $('div#container').css({
-      width: containerWidth,
-      height: containerHeight
-    });
-    
-  } else {
-  
-    // During resize, set widths
-    $(window).resize(function() {
-      console.log('Window Height: ' + $(window).height() + ', Sidebar Height:' + ($(window).height() - 40));
-  
-         // Get Heights
-         windowHeight = $(window).height();
-         sidebarHeight = windowHeight - 40;
-         containerHeight = windowHeight - 40;
-         
-      // Get Widths
-         windowWidth = $(window).width();
-         containerWidth = windowWidth - 200;
-  
-         // Set Dimensions for default state (before resize)
-         $('div#sidebar').css({
-           height: sidebarHeight
-         });
-         $('div#container').css({
-           width: containerWidth,
-           height: containerHeight
-         });
-    });
-    // console.log('omgz window is less than container so... fuck.');
-    $('div#sidebar').css({
-      height: documentHeight - 40
-    });
-    
-  }
-  
-  
-  
-/*
-  // Toggle Calendars
-  $('div#sidebar ul li a').click(function() {
-    if ($(this).is('#toggleMonthView')) {
-      console.log('toggle month');
-      $(this).addClass('active');
-      $('#toggleListView').removeClass('active');
-      $('table#monthView').show();
-      $('table#listView').hide();
-    } else {
-      console.log('toggle list');
-      $(this).addClass('active');
-      $('#toggleMonthView').removeClass('active');
-      $('table#listView').show();
-      $('table#monthView').hide();
-    }
-    return false;
-  });    
-*/
-});
diff --git a/js/jquery/hashgrid.js b/js/jquery/hashgrid.js
new file mode 100755 (executable)
index 0000000..db7af79
--- /dev/null
@@ -0,0 +1,340 @@
+/**
+ * hashgrid (jQuery version)
+ * http://github.com/dotjay/hashgrid
+ * Version 5, 3 Nov 2010
+ * Written by Jon Gibbins, dotjay.co.uk, accessibility.co.uk
+ * Contibutors:
+ * Sean Coates, seancoates.com
+ * Phil Dokas, jetless.org
+ *
+ * // Using a basic #grid setup
+ * var grid = new hashgrid();
+ *
+ * // Using #grid with a custom id (e.g. #mygrid)
+ * var grid = new hashgrid("mygrid");
+ *
+ * // Using #grid with additional options
+ * var grid = new hashgrid({
+ *     id: 'mygrid',            // id for the grid container
+ *     modifierKey: 'alt',      // optional 'ctrl', 'alt' or 'shift'
+ *     showGridKey: 's',        // key to show the grid
+ *     holdGridKey: 'enter',    // key to hold the grid in place
+ *     foregroundKey: 'f',      // key to toggle foreground/background
+ *     jumpGridsKey: 'd',       // key to cycle through the grid classes
+ *     numberOfGrids: 2,        // number of grid classes used
+ *     classPrefix: 'class',    // prefix for the grid classes
+ *     cookiePrefix: 'mygrid'   // prefix for the cookie name
+ * });
+ */
+if (typeof jQuery == "undefined") {
+       alert("Hashgrid: jQuery not loaded. Make sure it's linked to your pages.");
+}
+
+
+/**
+ * hashgrid overlay
+ */
+var hashgrid = function(set) {
+
+       var options = {
+               id: 'grid',             // id for the grid container
+               modifierKey: null,      // optional 'ctrl', 'alt' or 'shift'
+               showGridKey: 'g',       // key to show the grid
+               holdGridKey: 'h',       // key to hold the grid in place
+               foregroundKey: 'f',     // key to toggle foreground/background
+               jumpGridsKey: 'j',      // key to cycle through the grid classes
+               numberOfGrids: 1,       // number of grid classes used
+               classPrefix: 'grid-',   // prefix for the grid classes
+               cookiePrefix: 'hashgrid'// prefix for the cookie name
+       };
+       var overlayOn = false,
+               sticky = false,
+               overlayZState = 'B',
+               overlayZBackground = -1,
+               overlayZForeground = 9999,
+               classNumber = 1;
+
+       // Apply options
+       if (typeof set == 'object') {
+               var k;
+               for (k in set) options[k] = set[k];
+       }
+       else if (typeof set == 'string') {
+               options.id = set;
+       }
+
+       // Remove any conflicting overlay
+       if ($('#' + options.id).length > 0) {
+               $('#' + options.id).remove();
+       }
+
+       // Create overlay, hidden before adding to DOM
+       var overlayEl = $('<div></div>');
+       overlayEl
+               .attr('id', options.id)
+               .css({
+                       display: 'none',
+                       'pointer-events': 'none'
+               });
+       $("body").prepend(overlayEl);
+       var overlay = $('#' + options.id);
+
+       // Unless a custom z-index is set, ensure the overlay will be behind everything
+       if (overlay.css('z-index') == 'auto') overlay.css('z-index', overlayZBackground);
+
+       // Override the default overlay height with the actual page height
+       var pageHeight = parseFloat($(document).height());
+       overlay.height(pageHeight);
+
+       // Add the first grid line so that we can measure it
+       overlay.append('<div id="' + options.id + '-horiz" class="horiz first-line">');
+
+       // Position off-screen and display to calculate height
+       var top = overlay.css("top");
+       overlay.css({
+               top: "-999px",
+               display: "block"
+       });
+
+       // Calculate the number of grid lines needed
+       var line = $('#' + options.id + '-horiz'),
+               lineHeight = line.outerHeight();
+
+       // Hide and reset top
+       overlay.css({
+               display: "none",
+               top: top
+       });
+
+       // Break on zero line height
+       if (lineHeight <= 0) return true;
+
+       // Add the remaining grid lines
+       var i, numGridLines = Math.floor(pageHeight / lineHeight);
+       for (i = numGridLines - 1; i >= 1; i--) {
+               overlay.append('<div class="horiz"></div>');
+       }
+
+       // vertical grid
+       overlay.append($('<div class="vert-container"></div>'));
+       var overlayVert = overlay.children('.vert-container');
+       var gridWidth = overlay.width();
+       overlayVert.css({width: gridWidth, position: 'absolute', top: 0});
+       overlayVert.append('<div class="vert first-line">&nbsp;</div>');
+
+       // 30 is an arbitrarily large number...
+       // can't calculate the margin width properly
+       for (i = 0; i < 30; i++) {
+               overlayVert.append('<div class="vert">&nbsp;</div>');
+       }
+
+       overlayVert.children()
+               .height(pageHeight)
+               .css({display: 'inline-block'});
+
+       // Check for saved state
+       var overlayCookie = readCookie(options.cookiePrefix + options.id);
+       if (typeof overlayCookie == 'string') {
+               var state = overlayCookie.split(',');
+               state[2] = Number(state[2]);
+               if ((typeof state[2] == 'number') && !isNaN(state[2])) {
+                       classNumber = state[2].toFixed(0);
+                       overlay.addClass(options.classPrefix + classNumber);
+               }
+               if (state[1] == 'F') {
+                       overlayZState = 'F';
+                       overlay.css('z-index', overlayZForeground);
+               }
+               if (state[0] == '1') {
+                       overlayOn = true;
+                       sticky = true;
+                       showOverlay();
+               }
+       }
+       else {
+               overlay.addClass(options.classPrefix + classNumber);
+       }
+
+       // Keyboard controls
+       $(document).bind('keydown', keydownHandler);
+       $(document).bind('keyup', keyupHandler);
+
+       /**
+        * Helpers
+        */
+
+       function getModifier(e) {
+               if (options.modifierKey == null) return true; // Bypass by default
+               var m = true;
+               switch(options.modifierKey) {
+                       case 'ctrl':
+                               m = (e.ctrlKey ? e.ctrlKey : false);
+                               break;
+
+                       case 'alt':
+                               m = (e.altKey ? e.altKey : false);
+                               break;
+
+                       case 'shift':
+                               m = (e.shiftKey ? e.shiftKey : false);
+                               break;
+               }
+               return m;
+       }
+
+       function getKey(e) {
+               var k = false, c = (e.keyCode ? e.keyCode : e.which);
+               // Handle keywords
+               if (c == 13) k = 'enter';
+               // Handle letters
+               else k = String.fromCharCode(c).toLowerCase();
+               return k;
+       }
+
+       function saveState() {
+               createCookie(options.cookiePrefix + options.id, (sticky ? '1' : '0') + ',' + overlayZState + ',' + classNumber, 1);
+       }
+
+       function showOverlay() {
+               overlay.show();
+               overlayVert.css({width: overlay.width()});
+               // hide any vertical blocks that aren't at the top of the viewport
+               overlayVert.children('.vert').each(function () {
+                       $(this).css('display','inline-block');
+                       if ($(this).offset().top > 0) {
+                               $(this).hide();
+                       }
+               });
+       }
+
+       /**
+        * Event handlers
+        */
+
+       function keydownHandler(e) {
+               var source = e.target.tagName.toLowerCase();
+               if ((source == 'input') || (source == 'textarea') || (source == 'select')) return true;
+               var m = getModifier(e);
+               if (!m) return true;
+               var k = getKey(e);
+               if (!k) return true;
+               switch(k) {
+                       case options.showGridKey:
+                               if (!overlayOn) {
+                                       showOverlay();
+                                       overlayOn = true;
+                               }
+                               else if (sticky) {
+                                       overlay.hide();
+                                       overlayOn = false;
+                                       sticky = false;
+                                       saveState();
+                               }
+                               break;
+                       case options.holdGridKey:
+                               if (overlayOn && !sticky) {
+                                       // Turn sticky overlay on
+                                       sticky = true;
+                                       saveState();
+                               }
+                               break;
+                       case options.foregroundKey:
+                               if (overlayOn) {
+                                       // Toggle sticky overlay z-index
+                                       if (overlay.css('z-index') == overlayZForeground) {
+                                               overlay.css('z-index', overlayZBackground);
+                                               overlayZState = 'B';
+                                       }
+                                       else {
+                                               overlay.css('z-index', overlayZForeground);
+                                               overlayZState = 'F';
+                                       }
+                                       saveState();
+                               }
+                               break;
+                       case options.jumpGridsKey:
+                               if (overlayOn && (options.numberOfGrids > 1)) {
+                                       // Cycle through the available grids
+                                       overlay.removeClass(options.classPrefix + classNumber);
+                                       classNumber++;
+                                       if (classNumber > options.numberOfGrids) classNumber = 1;
+                                       overlay.addClass(options.classPrefix + classNumber);
+                                       showOverlay();
+                                       if (/webkit/.test( navigator.userAgent.toLowerCase() )) {
+                                               forceRepaint();
+                                       }
+                                       saveState();
+                               }
+                               break;
+               }
+       }
+
+       function keyupHandler(e) {
+               var m = getModifier(e);
+               if (!m) return true;
+               var k = getKey(e);
+               if (!k) return true;
+               if ((k == options.showGridKey) && !sticky) {
+                       overlay.hide();
+                       overlayOn = false;
+               }
+       }
+
+       /**
+        * Cookie functions
+        *
+        * By Peter-Paul Koch:
+        * http://www.quirksmode.org/js/cookies.html
+        */
+       function createCookie(name,value,days) {
+               if (days) {
+                       var date = new Date();
+                       date.setTime(date.getTime()+(days*24*60*60*1000));
+                       var expires = "; expires="+date.toGMTString();
+               }
+               else var expires = "";
+               document.cookie = name+"="+value+expires+"; path=/";
+       }
+
+       function readCookie(name) {
+               var nameEQ = name + "=";
+               var ca = document.cookie.split(';');
+               for(var i=0;i < ca.length;i++) {
+                       var c = ca[i];
+                       while (c.charAt(0)==' ') c = c.substring(1,c.length);
+                       if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+               }
+               return null;
+       }
+
+       function eraseCookie(name) {
+               createCookie(name,"",-1);
+       }
+
+       /**
+        * Forces a repaint (because WebKit has issues)
+        * http://www.sitepoint.com/forums/showthread.php?p=4538763
+        * http://www.phpied.com/the-new-game-show-will-it-reflow/
+        */
+       function forceRepaint() {
+               var ss = document.styleSheets[0];
+               try {
+                       ss.addRule('.xxxxxx', 'position: relative');
+                       ss.removeRule(ss.rules.length - 1);
+               } catch(e){}
+       }
+
+}
+
+
+/**
+ * You can call hashgrid from your own code, but it's loaded here as
+ * an example for your convenience.
+ */
+$(document).ready(function() {
+
+       var grid = new hashgrid({
+               numberOfGrids: 2
+       });
+
+});
index 165ddb142019d6ec45aae1fa3fdbb3cbcea3bfdb..30b561118c290925a213d987691dfcbeafeb8f44 100644 (file)
@@ -1,3 +1,10 @@
+body {
+  #gradient > .vertical-three-colors(#eee, #fff, 0.15, #fff);
+  background-attachment: fixed;
+  background-position: 0 40px;
+  position: relative;
+}
+
 // Give us some love
 header,
 section,
@@ -77,3 +84,30 @@ aside {
 section {
   margin-bottom: 40px;
 }
+
+// Hashgrid grid
+/**
+ * Grid
+ */
+#grid {
+  width: 980px;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  margin-left: -490px;
+}
+#grid div.vert {
+  width: 39px;
+  border: solid darkturquoise;
+  border-width: 0 1px;
+  margin-right: 19px;
+}
+#grid div.vert.first-line {
+  margin-left: 19px;
+}
+#grid div.horiz {
+  height: 19px;
+  border-bottom: 1px dotted rgba(255,0,0,.25);
+  margin: 0;
+  padding: 0;
+}
index 2191d98b3f3f805b62eb3b60f1cb4f0be5bf1aa8..88bcf714a9f075cd7ba60033022f21ff95efc776 100644 (file)
@@ -7,7 +7,7 @@
 -------------------------------------------------- */
 
 div.row {
-  .clearfix;
+  .clearfix();
   div.span1   { .columns(1); }
   div.span2   { .columns(2); }
   div.span3   { .columns(3); }
@@ -34,8 +34,6 @@ html, body {
   background-color: #fff;
 }
 body {
-  #gradient > .vertical-three-colors(#eee, #fff, 0.25, #fff);
-  background-attachment: fixed;
   margin: 0;
   .sans-serif(normal,14px,20px);
   color: @gray;
index 36b357b31afdee5fffbeddeba3144ffbd98d9778..41966346963824f2ce5497b8275c3a15c2044ac9 100644 (file)
@@ -1,13 +1,4 @@
 TODOS
 
-* Write "Using Twitter BP" section
-** Two ways to use: LESS.js or compiled
-** Not meant to be 100% bulletproof, but is 90% bulletproof (stats?)
-** Advanced framework for fast prototyping, internal app development, bootstraping new websites
-** Can be easily modified to provide more legacy support
-
-* Add grid examples back in
 * Cross browser checks? Show this anywhere?
-* Add layouts section back in
-
-* Point JS libraries to public library links instead of within the repo
\ No newline at end of file
+* Add layouts section back in
\ No newline at end of file