mikedugan

// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console

mikedugan

Libraries

• jQuery - The de-facto library for the modern age. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
• Backbone - Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
• AngularJS - Conventions based MVC framework for HTML5 apps.
• Underscore - Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.
• lawnchair - Key/value store adapter for indexdb, localStorage

mikedugan

Libraries

• 960 Grid System - An effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
• Compass - Open source CSS Authoring Framework.
• Bootstrap - Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
• Font Awesome - The iconic font designed for Bootstrap.
• Zurb Foundation - Framework for writing responsive web sites.
• SASS - CSS extension language which allows variables, mixins and rules nesting.
• Skeleton - Boilerplate for responsive, mobile-friendly development.

Guides

mikedugan

/*use this to select browsers and attributes in various browsers*/

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

/* IE6 and below */
* html #uno  { color: red }
 
/* IE7 */
*:first-child+html #dos { color: red } 
 

mikedugan

[class*='btn-'] {
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
        color: #fff;
        display: inline-block;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        padding: 8px 16px;

mikedugan

#divID {
    width: 400px; /* here you put the width that you need */
    height: 200px; /* here you put the height that you need */
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-200px; /* this number always to be the width divided two in negative */
    margin-top:-100px; /* this number always to be the height divided two in negative */
 }    

mikedugan

.menu {
        list-style: none;
        float: left;
        position: relative;
}

.menu li {
        float: left;
        margin-right: 10px;
        position: relative;

mikedugan

/* full screen centered background image. Change the image name and directory to suit */

body {
        background:url(../images/sunset.jpg) 50% 0 no-repeat fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

mikedugan

/* gradients and support for various browsers */

/* Gradient for Chrome / Safari */
background: -webkit-gradient(linear, center top, center bottom, from(#fbfdfd), to(#dde1e3));
/* Gradient for Firefox */
background: -moz-linear-gradient(center top, #fbfdfd, #dde1e3);
/* IE10 Gradient */
background: -ms-linear-gradient(#fbfdfd, #dde1e3);
/* O Gradient */
background: -o-linear-gradient(#fbfdfd, #dde1e3);

mikedugan

/*CSS min and max-width fix for IE6. this is just sample sizes. replace the min and max to your needs and replace the
* 742 and 1202 with the min & max values + 2, respectively. */

#content {
        height: 75px;
        background-color: #000;
        color: #fff;
        width: expression(document.body.clientWidth < 742? "740px" : document.body.clientWidth > 1202? "1200px" : "auto");
        min-width: 740px;
        max-width: 1200px;