Conor McAfee conormcafee

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

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<form id="myform">
	<h1>Please enter data</h1>
	<input id="salary" type="number" placeholder="Salary" />

	/* bling.js */

	window.$ = document.querySelectorAll.bind(document);

	Node.prototype.on = window.on = function (name, fn) {
	this.addEventListener(name, fn);
	};

	NodeList.prototype.__proto__ = Array.prototype;

	Block is a house that is nice and square,
	Element is a room with its walls all bare,
	Modifier is the wallpaper, hang with care!

	.house
	.house__room
	.house__room—-paisley

	/**
	* VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units
	*
	* To overcome this, create media queries that target the width, height, and orientation of iOS devices.
	* It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing
	* the height of element `.foo` —which is a full width and height cover image.
	*
	* iOS Resolution Quick Reference: http://www.iosres.com/
	*/

	/*

	Minimal Facebook Messenger
	==========================

	1. Make a Fluid (http://fluidapp.com/) instance of https://facebook.com/messages/
	1. a. (You need to buy the paid version of Fluid to modify UserStyles)
	2. Apply the below CSS as a Userstyles stylesheet
	3. Like magic, you can now message without all the cruft of Full Facebook

	var gulp = require('gulp'),
	sass = require('gulp-ruby-sass'),
	autoprefixer = require('gulp-autoprefixer'),
	minifycss = require('gulp-minify-css'),
	jshint = require('gulp-jshint'),
	uglify = require('gulp-uglify'),
	rename = require('gulp-rename'),
	clean = require('gulp-clean'),
	concat = require('gulp-concat'),
	notify = require('gulp-notify'),