John Hartley johnbhartley

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

⇐ back to the gist-blog at jrw.fi

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Georgetown Domains</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

+<?php
+//Insert ads after second paragraph of single post content.
+add_filter( 'the_content', 'prefix_insert_post_ads' );
+function prefix_insert_post_ads( $content ) {
+	$ad_code = '<div>Ads code goes here</div>';
+	if ( is_single() && ! is_admin() ) {
+		return prefix_insert_after_paragraph( $ad_code, 2, $content );
+	}
+return $content;
+}

	<form id="contact-form" action="//formspree.io/[email protected]" method="post">
	<input type="text" name="Name" placeholder="Name" required>
	<input type="email" name="Email" placeholder="Email" required>
	<textarea name="Message" cols="30" rows="6" placeholder="Message" required></textarea>
	<!-- CONFIG -->
	<input class="is-hidden" type="text" name="_gotcha">
	<input type="hidden" name="_subject" value="Subject">
	<input type="hidden" name="_cc" value="[email protected]">
	<!-- /CONFIG -->
	<input class="submit" type="submit" value="Send">

	// Restify Server CheatSheet.
	// More about the API: http://mcavage.me/node-restify/#server-api
	// Install restify with npm install restify


	// 1.1. Creating a Server.
	// http://mcavage.me/node-restify/#Creating-a-Server


	var restify = require('restify');

	<IfModule mod_deflate.c>
	# compress text, html, javascript, css, xml:
	AddOutputFilterByType DEFLATE text/plain
	AddOutputFilterByType DEFLATE text/html
	AddOutputFilterByType DEFLATE text/xml
	AddOutputFilterByType DEFLATE text/css
	AddOutputFilterByType DEFLATE application/xml
	AddOutputFilterByType DEFLATE application/xhtml+xml
	AddOutputFilterByType DEFLATE application/rss+xml
	AddOutputFilterByType DEFLATE application/javascript

	/**
	* navigation.js
	*
	* Handles toggling the navigation menu for small screens and enabling tab support for dropdown menus.
	*/
	( function() {
	var container, button, menu, links;

	container = document.getElementById( 'site-navigation' );
	if ( ! container )

	// Retrieve Customer by Email (or other method)
	$customer = Mage::getModel('customer/customer')
	->setWebsiteId(Mage::app()->getStore()->getWebsiteId())
	->loadByEmail($email);

	// Set as Logged In and Clear Session
	Mage::getSingleton('customer/session')->setCustomerAsLoggedIn($customer)
	->renewSession();

	// Redirect or do something here :)

	describe('Test example.com', function(){
	before(function(done) {
	client.init().url('http://example.com', done);
	});

	describe('Check homepage', function(){
	it('should see the correct title', function(done) {
	client.getTitle(function(err, title){
	expect(title).to.have.string('Example Domain');
	done();