Property: text-overflow

/* from: http://css3clickchart.com/#text-overflow */
.target {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* or "clip" */
}

Property: box-sizing

/* from: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
/* apply a natural box layout model to all elements, but allowing components to change */
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

Virtual Host Bits

# For localhost on XAMPP, MAMP, and others
# file: httpd-vhosts.conf
# restart apache after making changes

#-------------------------------------------------------    DOMAIN
<VirtualHost *:80>
    ServerName DOMAIN.dev
    ServerAlias www.DOMAIN.dev
    DocumentRoot "/path/to/document/root/DOMAIN/"
    <Directory "/path/to/document/root/DOMAIN/">
        AllowOverride All
        Order Allow,Deny
        Allow from all
        Require all granted
    </Directory>
</VirtualHost>
<VirtualHost *:443>
    ServerName DOMAIN.dev
    ServerAlias www.DOMAIN.dev
    DocumentRoot "/path/to/document/root/DOMAIN/"
    <Directory "/path/to/document/root/DOMAIN/">
        AllowOverride All
        Order Allow,Deny
        Allow from all
        Require all granted
    </Directory>
    SSLEngine on
    SSLCertificateFile "/path/to/ssl/crt/DOMAIN.crt"
    SSLCertificateKeyFile "/path/to/ssl/key/DOMAIN.key"
</VirtualHost>

jQuery: Get/Set Element Width/Height, And Resize

// Get element width/height
var element = $('.class');
var width   = element.width();
var height  = element.height();

// Set element width/height
var element = $('.class');
element.css( 'width',  value + 'px' );
element.css( 'height', value + 'px' );

// On window resize
$(window).resize(function(){
	// do stuff
});

// On element resize
element.resize(function(){
	// do stuff
});

Not sure if this is still valid jQuery.

Text Shadow

/* x-offset, y-offset, blur radius, color */
.text_shadow {
	text-shadow: x_offset y_offset blur_radius color;
}
/* multiple shadows, comma-separated */
.text-shadow {
	text-shadow: shadow1, shadow2, shadow3;
}

/* from http://www.themeshock.com/css-text-shadow/ */
.pressed {
	color: #222;
	text-shadow: 0px 1px 1px #4d4d4d;
}
.embossed {
	color: #066;
	text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.neon {
	color: #fff;
	text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 50px #ff2d95, 0 0 75px #ff2d95;
	letter-spacing: 5px;
}
.fire {
	color: #fff;
	text-shadow: 0px -1px 4px white, 0px -2px 10px yellow, 0px -10px 20px #ff8000, 0px -18px 40px red;
}
.3D {
	color: #fff;
	text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}
.retro {
	color: #990F0A;
	text-shadow: 5px 5px 0px #EEE, 7px 7px 0px #707070;
}
.acid {
	color:#00ff0f;
	text-shadow: 0px 0px 10px #00ff0f, -1px -1px #000;
}
.shadow {
	color:#333;
	text-shadow: -5px 5px 5px rgba(0,0,0, 0.3);
}
.alpha {
	color: rgba(0, 174, 239, 0.2);
	text-shadow: rgba(0, 0, 30, 0.08) 0px 5px 2px;
}
.alpha3D {
	color: transparent;
	text-shadow: rgba(245, 245, 255, 0.35) 0 0px 0px, rgba(0, 0, 30, 0.08) 0px 2px 2px, rgba(0, 0, 30, 0.20) 0px 2px 1px, rgba(0, 0, 30, 0.40) 0px 2px 1px, rgba(0, 0, 0, 0.08) -5px 5px 2px;
}
.anaglyphs {
	color: rgba(0, 168, 255, 0.5);
	text-shadow: 3px 3px 0 rgba(255, 0, 180, 0.5);
}
.blur {
	color: rgba(255, 255, 255, 0.1);
	text-shadow: 0px 0px 15px rgba(255, 255, 255, 0.5), 0px 0px 10px rgba(255, 255, 255, 0.5);
}

Add IE Support for HTML5 Shiv

// Double check the src
function add_ie_html5_shim() {
	echo '<!–[if lt IE 9]>';
	echo '<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>';
	echo '<![endif]–>';
}
if ($GLOBALS['is_IE']) {
	add_action('wp_head', 'add_ie_html5_shim');
}

Hopefully you’re not still supporting IE – unless you’re charging out the wazoo to the customer to do so.

Builder: Add DOM Element Before Container

// Add DOM element to Builder before container output (right after opening body tag)
function add_dom_element() {
	echo '<div class"custom-class></div>';
}
add_action('builder_layout_engine_render_container', 'add_dom_element' );

No longer using Builder. It was good while they kept it up to date. Not so much now.

1 2 3 5