mhairston

/* ==== Media Queries ==== */

/* From HTML: */

<!-- All common styles -->
<link rel="stylesheet" href="common.css" type="text/css" media="screen" /> 
<!-- Devices between 480-1024px -->
<link rel="stylesheet" href="styles_max_1024.css" type="text/css" media="only screen and (min-width:481px) and (max-width:1024px)" />
<!-- Devices below 480px -->
<link rel="stylesheet" href="styles_max_480.css" type="text/css" media="only screen and (max-width:480px)" />

mhairston

/* Device-specific styles:

If it’s important to deliver a very specific design to a very specific device (ie: a web application built specifically for the iPad), you can use Media queries to deliver styles to exact resolutions:
*/

<!-- iPad specific styles -->
<link rel="stylesheet" href="iPad.css" type="text/css" media="only screen and (max-device-width:1024px) and (min-device-width:768px)" />

Orientation-specific styles:

mhairston

<div class="media">
    <a href="http" class="img">
        <img src="---" alt="--" />
    </a>
    <div class="bd">
        body text
    </div>
    <div class="imgExt">
        <img src="---" alt=""" />
    </div>

mhairston

<div class="mod"> 
    <b class="top"><b class="tl"></b><b class="tr"></b></b>
    <div class="inner">
        <div class="hd">
            <h3>Header</h3>
        </div>    
        <div class="bd">
            <p>Lorem ipsum.</p>
        </div>
        <div class="ft">

mhairston

/* 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,

mhairston

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red } 

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

mhairston

// Enable enter key for activating items (equivalent of click)
// * Not needed if target is <a> or <input> or <button>
// * $(el).trigger() should trigger whatever event type the main event handler is responding to.

".nb_inlineAct keyup": function(el,ev) {
    ev.stopImmediatePropagation();
    if (el.tagName && el.tagName.indexOf('a button input') == -1) {                     
        if(ev.keyCode == 13) { // enter key
            $(el).trigger('activate');
        }

mhairston

/* Scott Kellum improved img replacement technique (via Zeldman) */

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

mhairston

// from http://www.marceloduende.com/blog/?p=25

function addCrossBrowseEventListener(myElement, myEvent, myFunction) {  
    if(myElement.addEventListener){  
        myElement.addEventListener(myEvent, myFunction, false);  
        return true;  
    } else {  
        myElement.attachEvent('on'+myEvent, myFunction);  
        return true;  
} 

mhairston

/* 
  absorb:
  Apply to last grid span to absorb all remaining horizontal space.
  borrowed from OOCSS: https://github.com/stubbornella/oocss
  Somewhat experimental in this context.
*/

.row-fluid [class*="span"].absorb {
  margin: 0;
  display: table-cell;