960.gs Bookmarklet

Reference

The bookmarklet below will draw grids on your webpage

javascript:(function(){var%20jqLoader={go:function(){if(!(window.jQuery&&window.jQuery.fn.jquery=='1.3.2')){var%20s=document.createElement('script');s.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js');s.setAttribute('type','text/javascript');document.getElementsByTagName('head')[0].appendChild(s)}this.ok()},ok:function(){if(typeof(window.jQuery)!=='undefined'&&window.jQuery.fn.jquery=='1.3.2'){this.init()}else{setTimeout((function(){jqLoader.ok()}),100)}},init:function(){$.getScript('http://www.badlydrawntoy.com/static/960grid/js/jquery.960grid.bk-1.0.min.js',function(){$('body').addGrid(16)})}};jqLoader.go()})();

Tags:
grid

Tip: Multiple class per element

Below is an example on how to use multiple classes per element. I needed it when I used the 960.gs grid framework.

<style>
.blue {
    color: blue; /*makes the font blue*/
}
.underline{
    text-decoration:underline;
} 
</style>

<div class="grid_12 blue underline">Make me blue and underline using three different classes</div>

The space separates the two classes. KISS

many classes

Resizing <Table> with CSS. Staying within the wrapper

Having issues with keeping the table as the same size of the wrapper or parent? See code below.

<style>
    /*Center the content*/
    #wrapper {
        margin: 0px auto;
        width: 230px;
        height: 100px;
        background: grey; /*this is only to show how the table is within the wrapper*/
    }
    table {
        table-layout:fixed; /*makes the table to be a specific size*/
        width: inherit; /*need to be include to make the table specific size*/
    }
    input {
        width: 100%;/*size of the input box, keeps the table inside the wrapper*/
    }
    th{
       overflow: hidden; /* hides text overflowing the field*/
    }
</style>     

   
<div id="wrapper">
<table border="1">
    <tr>
        <th id="livesearch">Date</th>
        <th id="livesearch2">First_Name</th>
        <th id="livesearch3">Last_Name</th>
    </tr>
    <tr>
        <!--the onfocus and onblur what makes the <th> resize when selected, this is not necessary to make the table a fixed size-->
        <td ><input onfocus="document.getElementById('livesearch').style.width='100px';" onblur="document.getElementById('livesearch').style.width='auto';"class="date" type="text" /></td>
        <td> <input onfocus="document.getElementById('livesearch2').style.width='100px';" onblur="document.getElementById('livesearch2').style.width='auto';" class="type" type="text" /></td>
        <td> <input onfocus="document.getElementById('livesearch3').style.width='100px';" onblur="document.getElementById('livesearch3').style.width='auto';" class="type" type="text" /></td>
    </tr>
</table>
</div>

Notes: Overflow in table, wrap text in table, table width

Frameworks

Don't reinvent the wheel. Below are frameworks that allow you to code without having to start from scratch.

HTML - Boilerplate

PHP - CodeIgniter

CSS - Twitter Bootsrap

CSS structure - 960

Javascript - jQuery

Reset CSS

Reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on

Paste code below in stylesheet and delete the elements you do no need

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

Creating columns in website

This tutorial shows how to create columns in website and prevents the div from wrapping when the browser is minimized






Syntax Source:

<html>
<head>
<style>
#main {
   width: 600px;
}

.col {
   float: left;
   border: 1px solid red;
   padding: 10px;
   margin: 0px 20px 0px 0px;
}
</style>
</head>
<body>

<h1>Columns</h1>
<div id="main">
   <div class="col">
        <h3>Title</h3>
        <p>asdfasdfxiv</p>
        <p>asdfasdfxiv</p>
        <p>asdfasdfxiv</p>
    </div>
   <div class="col">
        <h3>Title</h3>
        <p>asdfasdfxiv</p>
        <p>asdfasdfxiv</p>
        <p>asdfasdfxiv</p>
    </div>    <div class="col">
        <h3>Title</h3>
        <p>asdfasdfxiv</p>
        <p>asdfasdfxiv</p>
        <p>asdfasdfxiv</p>
    </div>
</div>
</body>
</html>