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
View top.md

The top property in CSS goes hand in hand with positioning. By default, elements are static positioned in which the top property has no effect whatsoever. But when the positioning of an element is relative, absolute, or fixed, the top value plays a big role.

div {
  top: value (px, em, %, pt, etc) || auto || inherit;   /* can be negative */
}

The value for top is any of the valid lengths of CSS.

"The Nudge" (Relative Position)

View ip.json
{
"continent":"North America",
"address_format":"{{recipient}}\n{{street}}\n{{city}} {{region_short}} {{postalcode}}\n{{country}}",
"alpha2":"CA",
"alpha3":"CAN",
"country_code":"1",
"international_prefix":"011",
"ioc":"CAN",
"gec":"CA",
"name":"Canada",
View embed.js
const App = () => {
useCodePenEmbed();
return (
<PrefillEmbed
className="codepen"
penTitle="My sweet demo"
embedHeight="400"
themeId="31205"
editable
description="Renders a barebones React component"
View tags.php
<?php
class CTF_Register_Taxonomies {
/**
* Initialize the class
*/
public function __construct() {
add_action('init', array( $this, 'tags_support_all') );
add_action('pre_get_posts', array( $this, 'tags_support_query') );
View keybase.md

Keybase proof

I hereby claim:

  • I am chriscoyier on github.
  • I am chriscoyier (https://keybase.io/chriscoyier) on keybase.
  • I have a public key ASAOqGFRMkYF7J1yITeO3M2VMTRRoozedjmZoEz-UBGVTwo

To claim this, I am signing this object:

View highlighting.css
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #777;
}
.token.punctuation,
.token.tag,
.token.attr-name {
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?
// https://github.com/sindresorhus/gulp-changed
View broken.css
.asdf,
.asdf2 {
opacity: 1;
animation: pi-fadein 0.5s ease 3s forwards; }
.my-module {
opacity: 1;
opacity: 1;
opacity: 1;
opacity: opacity: 1; }
View gist:daf08a8b18a55ac4ce2af0d78dcff5c6
{
"remove-empty-rulesets": true,
"always-semicolon": true,
"color-case": "lower",
"block-indent": " ",
"color-shorthand": true,
"element-case": "lower",
"eof-newline": true,
"leading-zero": true,
"quotes": "double",
You can’t perform that action at this time.