// IE Detection (for alternative since icon font is being blocked) if((navigator.appVersion.indexOf(‘MSIE’)!== -1)||(navigator.appVersion.indexOf(‘Windows’)!== -1)){ rm.isIE = true; $(‘html’).addClass(‘ie’); }

The best way I found to size inline SVG graphics: Trim artboard to artwork bounds in Illustrator (Object > Artboards > Fit to Artwork Bounds) Save as SVG and then open it in a text editor Leave the viewBox dimensions exactly as they are Calculate the % difference between width and height in the viewBox values […]

JS Bin on jsbin.com Resources CSS Arrow Please

You can calculate properties in CSS with calc()… height: calc(100vh – 313px); vh and vw are the new CSS3 viewport units.

Chrome extension is just some HTML, CSS and JavaScript that allows you to add some functionality to Chrome through some of the JavaScript APIs Chrome exposes. An extension is basically just a web page that is hosted within Chrome and can access some additional APIs Browser Action extension is a basic Chrome extension manifest.json … […]

<style> .myColumns { column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; column-width: 250px; /* MINIMUM WIDTH */ -webkit-column-width: 250px; -moz-column-width: 250px; /* …or use COLUMNS shorthand… */ columns: 4 250px; -webkit-columns: 4 250px; -moz-columns: 4 250px; column-gap: 4em; /* Default is 1em */ -webkit-column-gap: 4em; -moz-column-gap: 4em; column-rule: 1px dotted #ddd; -webkit-column-rule: 1px dotted #ddd; -moz-column-rule: 1px […]

dp (Density Independent Pixels): is a measure of screen size dpi (Dots per Inch): is a measure of screen density iOS non-Retina to Retina display transition (163ppi to 326ppi) Size buckets are phone (smaller than 600dp) and tablet (larger than or equal 600dp) Density buckets for Android are LDPI, MDPI, HDPI, XHDPI, XXHDPI, and XXXHDPI ldpi: Resources for low-density […]

See the Pen Super Simple requestAnimationFrame Thing by Taylor Johnson (@webninjataylor) on CodePen.

Fiddle Resources API

<div class=”animateable”></div> /******** SCALE ********/ .animateable { … animation: inout 2s; -webkit-animation: inout 2s; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; } @keyframes inout { 0% { transform: scale(0, 0); } 50% { transform: scale(2, 2); } 100% { transform: scale(1, 1); } } @-webkit-keyframes inout { /* Safari & Chrome */ 0% { -webkit-transform: scale(0, 0); } […]

<div id=”bigvid”> <video id=”big-video-vid_html5_api” class=”vjs-tech” preload=”auto” data-setup=”{}” webkit-playsinline=”” autoplay=”autoplay” src=”http://barrelny.com/recap/2012/wp-content/themes/barrel-portfolio/im/office_small.mp4″ loop></video> </div> #bigvid { position: absolute; background-color: #000; height: 100%; width: 100%; }

Animating with CSS can be as simple as using transform and/or transition on elements and setting the final animation state via a pseudo-class like :hover… … #text { … top:200px; … opacity: 0; -webkit-transition: all 2s linear; -moz-transition: all 2s linear; } #photo { opacity: 0.25; -webkit-transform: scale(1.5) translate3D(0, 0, 0); -webkit-transition: all 5s linear; […]

<iframe src=”http://jsfiddle.net/USERNAME/FIDDLE/embedded/result,resources,html,css,js” width=”100%” height=”300″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

Add this to functions.php for JS and CSS.  Check out the WordPress Codex for available parameters and info on using the ‘$’ namespace for jQuery. <?php function wnt_styles(){ // STYLES wp_register_style(‘bootstrapcss’, get_template_directory_uri() . ‘/css/bootstrap.css’, array(), ‘20140529’, ‘all’ ); wp_enqueue_style(‘bootstrapcss’); } add_action(‘wp_enqueue_scripts’, ‘wnt_styles’); wp_enqueue_script(‘jquery’); // This is all that’s needed for jQuery since WordPress already has […]

Add this for smooth, elastic scrolling on mobile… #s4-workspace { -webkit-overflow-scrolling: touch; }

Web developers have their panties all up in a twist over this issue.  Here is the boiled-down comparison… Responsive: The distilled definition of a responsive web design is that it will fluidly change and respond to fit any screen or device size. Coined several years ago by Ethan Marcotte and first introduced in his A List Apart article, […]

The standard is to use this CSS… .hidden { height: 1px; left: -10000px; overflow: hidden; position: absolute; top: auto; width: 1px; }