Tanmay Patel tanmaypatel

CSS Layout Debbuger

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

	<nav class="navbar navbar-dark bg-primary">
	<a class="navbar-brand" href="#">MQTT Demo</a>
	</nav>
	<div id="root" class="container-fluid">
	</div>

	var coordinatesData = "412,156, 427,161, 429,163, 444,153, 453,155, 457,159, 452,168, 459,174, 455,178, 460,179, 463,193, 460,203, 441,214, 436,217, 458,238, 469,257, 479,267, 478,269, 479,285, 458,309, 436,310, 414,305, 410,323, 397,334, 379,313, 389,316, 401,320, 399,305, 382,300, 371,290, 367,296, 366,298,338,274, 332,272, 300,239, 316,238, 316,234, 313,230, 328,225, 333,213, 338,196, 333,181, 337,166, 345,145";

	var coordsTokens = coordinatesData.split(/\s,\s/);

	var pathData = "";
	for(var i = 0; i < coordsTokens.length; i+=2)
	{
	if(i<2)
	{
	pathData += "M"

	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Affordable Healthcare</title>
	<link href='http://fonts.googleapis.com/css?family=Roboto:400,900,700,400italic,500' rel='stylesheet' type='text/css'>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<style>

	html, body

	<html>
	<head>
	<title>Select styles with CSS only</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	body {
	background-color: #fff;
	font-family: helvetica, sans-serif;
	margin: 4% 10%
	}

	/*
	* From blogpost @ http://ifandelse.com/its-not-hard-making-your-library-support-amd-and-commonjs/
	*/

	(function (root, factory)
	{
	if(typeof define === "function" && define.amd)
	{
	// Now we're wrapping the factory and assigning the return
	// value to the root (window) and returning it as well to


	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Sticky footer · Twitter Bootstrap</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!-- CSS -->
	<link href="../assets/css/bootstrap.css" rel="stylesheet">

	module.exports = function(grunt)
	{
	require('time-grunt')(grunt);
	require('load-grunt-config')(grunt, {
	config: {
	srcLocation: 'src',
	distLocation: 'dist'
	}
	});