Skip to content

Instantly share code, notes, and snippets.

Chris Coyier chriscoyier

Block or report user

Report or block chriscoyier

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
chriscoyier / index.html
Created Sep 23, 2015
Difference Between Inline SVG reference and External reference
View index.html
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
.icon {
width: 100px;
height: 100px;
chriscoyier / dabblet.css
Created Dec 21, 2011
Click open/close Dropdown in pure CSS
View dabblet.css
/* Click open/close Dropdown in pure CSS */
/* Disclaimer: Not the most semantic
thing in the universe. */
/* Forked from original idea */
.tabs {
position: relative;
View mq.css
@media only screen and (min-width: 320px) {
/* Small screen, non-retina */
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
chriscoyier / instrument.js
Last active May 3, 2019
The JS Instrumenting we do at CodePen
View instrument.js
var esprima = require('esprima');
function instrument(code) {
var LOOP_CHECK = 'if (window.CP.shouldStopExecution(%d)){break;}';
var LOOP_EXIT = "\nwindow.CP.exitedLoop(%d);\n";
var loopId = 1;
var patches = [];
esprima.parse(code, {
View dabblet.css
/* F.A.Q */
div { position: relative; }
input[type=checkbox] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
chriscoyier / dabblet.css
Created Jan 9, 2012
Loading dot dot dot
View dabblet.css
Loading dot dot dot
body {
padding: 100px;
font-size: 62.5%;
.loading {
View gist:945619
Template Name: Comment Graph
<!DOCTYPE html>
<meta charset=utf-8>
View gulpfile.js
// Should I be ES6+ing this file? Does it matter? Seems like it would feel nicer but running Babel over this file feels like ouroboros.
// I'm using Gulp 3.x. I couldn't for the life of me get Gulp 4.x going, I think because my Gulp CLI was at too high (??) of a version and no amount of uninstalling and reinstalling would bring it back down.
var gulp = require("gulp");
// I thought I needed this until I found out about gulp.series. Can I refactor anything here?
var runSequence = require("run-sequence");
// Would this be a speed boost for anything? As in, only looking at files that have changed instead of all files?

Keybase proof

I hereby claim:

  • I am chriscoyier on github.
  • I am chriscoyier ( on keybase.
  • I have a public key ASAOqGFRMkYF7J1yITeO3M2VMTRRoozedjmZoEz-UBGVTwo

To claim this, I am signing this object:

View dabblet.css
Ratings Stars
(with as little code as possible)
.rating {
unicode-bidi: bidi-override;
direction: rtl;
text-align: center;
.rating > span {
You can’t perform that action at this time.