mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-19 16:54:24 +01:00
Remove the unnecessary global.js file, remove the old baseline grid image, add in hashgrid, update readme to remove finished todos;
This commit is contained in:
Mark Otto
parent
eb81782cdb
commit
677b5554f3
BIN
img/baseline-10px.png
Normal file
BIN
img/baseline-10px.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 152 B |
Binary file not shown.
|
Before Width: | Height: | Size: 127 B |
@ -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>
|
||||
|
||||
75
js/global.js
75
js/global.js
@ -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;
|
||||
});
|
||||
*/
|
||||
});
|
||||
340
js/jquery/hashgrid.js
vendored
Executable file
340
js/jquery/hashgrid.js
vendored
Executable file
@ -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"> </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"> </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
|
||||
});
|
||||
|
||||
});
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
* Add layouts section back in
|
||||
Loading…
x
Reference in New Issue
Block a user