bangpound

# bangpound does not know Ruby.
#
# inspired by http://www.alloycode.com/2009/6/19/fun-with-rmagick
#
# RGBa PNG method described at http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/

module Sass::Script::Functions
  def rgbapng(color)
    require 'rubygems'
    require "RMagick"

mathiasbynens

/*!
 * Dynamically changing favicons with JavaScript
 * Works in all A-grade browsers except Safari and Internet Explorer
 * Demo: http://mathiasbynens.be/demo/dynamic-favicons
 */

// HTML5™, baby! http://mathiasbynens.be/notes/document-head
document.head || (document.head = document.getElementsByTagName('head')[0]);

function changeFavicon(src) {

mathiasbynens

// Original code from http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/

var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
	for (i=0; i<metas.length; i++) {
		if (metas[i].name == "viewport") {
			metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
		}
	}

mathiasbynens

There seems to be a difference between longhand properties (e.g. background-color) and shorthand properties (e.g. background). Some CSS hacks only work for one or the other. I’ve updated my test case to test these separately, and there are some interesting results.

The following hacks target IE8 but not IE9:

• longhandproperty: \0value\0;
• longhandproperty: \0value;

In practice, you might use these like so:

• background-color: \0red\0;

scottjehl

/*
  * Normalized hide address bar for iOS & Android
  * (c) Scott Jehl, scottjehl.com
  * MIT License
*/
(function( win ){
	var doc = win.document;
	
	// If there's a hash, or addEventListener is undefined, stop here
	if( !location.hash && win.addEventListener ){

mathiasbynens

// Ever needed to escape '\n' as '\\n'? This function does that for any character,
// using hex and/or Unicode escape sequences (whichever are shortest).
// Demo: http://mothereff.in/js-escapes
function unicodeEscape(str) {
	return str.replace(/[\s\S]/g, function(character) {
		var escape = character.charCodeAt().toString(16),
		    longhand = escape.length > 2;
		return '\\' + (longhand ? 'u' : 'x') + ('0000' + escape).slice(longhand ? -4 : -2);
	});
}

necolas

NOTE I now use the conventions detailed in the SUIT framework

Template Components

Used to provide structural templates.

Pattern

t-template-name

necolas

SUIT: Smart User Interface Toolkit

Principles:

• Allow for easy and flexible theming of a robust core.
• Core contains primarily structural SCSS.
• Core contains JS libs and common JS plugins.
• Themes contain primarily non-structural SCSS.
• Themes contain custom JS plugins.
• Compiled, concatenated, and minified CSS and JS is stored in each theme.

csswizardry

Bringing BEM to inuit.css

BEM is a methodology for naming and classifying CSS selectors in a way to make them a lot more strict, transparent and informative.

The naming convention follows this pattern:

.block{}
.block__element{}
.block--modifier{}

csswizardry

project.scss
    components/
        global/
            page-head.scss
            pricing-table.scss
            image-gallery.scss
        home/
            quick-search.scss
    inuit.css/

pages/