Skip to content

Instantly share code, notes, and snippets.


Chris Coyier chriscoyier

View GitHub Profile
tbmiller / line-on-sides.scss
Last active Aug 29, 2015
Sass - Line On SIdes Headers
View line-on-sides.scss
Sass - Line On Side Headers
Reference Link:
Implementation Example: <h1 class="fancy"><span>Title</span></h1>
View Center Align
@mixin center-align($dir: false) {
$map: (
top: ( Y ),
left: ( X )
@if map_get($map, $dir) != null {
#{$dir}: 50%;
transform: #{"translate#{map_get($map,$dir)}(-50%)"};
} @else {
bfillmer / toolbox.less
Created Jun 16, 2014
Generic LESS Mixins
View toolbox.less
// Liked what Chris Coyier showed off in this blog post:
// Decided to make LESS versions really quickly.
.coverer() {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
neoswf / gist:02d66dadbfef56f0254c
Last active Aug 29, 2015
How to catch an error event for an SVG image
View gist:02d66dadbfef56f0254c
Image is a 87px height & 200px width long.
I'm calling an image from DB, but if it fails to load, im listening to the Error event, and than call an image from DB.
Big thing here is this guy: `onerror="this.href.baseVal='pathTo_placeholder_fallback_image'"`
This guy enables you to overright the SVG image source, with the fallbacl one.
JohnRiv / super-css-super-challenge.html
Created Jul 27, 2011
Super CSS Super Challenge Answer
View super-css-super-challenge.html
<!DOCTYPE html>
A solution for the design at
Using no "active" class (but the middle is always "active" in the display).
I think that's how Chris Coyier presented it, but I may have missed the "active" class
<style type="text/css">
body {
chriseppstein / 0_usage.scss
Created Feb 29, 2012
This is code that runs using Sass 3.2 prerelease and something like this will be in compass soon.
View 0_usage.scss
@include keyframes(appear-and-roundify) {
0% { opacity: 0; @include border-radius(2px); }
100% { opacity: 1; @include border-radius(10px); }
jcroft / layout.sass
Created Mar 1, 2012
How easy responsive design can be with Sass
View layout.sass
// Default (smallest screens)
background-color: #ccc
// Respond to other screen widths
lessallan / friendshiptest
Created Mar 24, 2012
@AllanBranch's Friendship Test
View friendshiptest
Each line below is worth a different point amount.
3 points = We've had a short phone call.
7 points = We've met in person, briefly.
12 points = We've met in person and shared a meal or had over an hour long discussion.
12 points = You've asked me about my family or wished me happy birthday, in person, phone or email.
100 points = We've shared a hotel room.
1 points = We've talked via a social network.
2 points = We've exchanged a few emails.
100 points = I've farted in front of you.
simonsmith / lesscss-centre
Created Apr 13, 2012
Centre elements on both axis - LESSified version of
View lesscss-centre
.center-container {
text-align: center;
&:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
KuraFire / rgbaa.scss
Created Sep 13, 2012
More dynamic, oldIE-compatible SCSS function for rgba
View rgbaa.scss
@function rgbaa($args...) {
// rgbaa(#FFF, .5)
@if length($args) == 2 {
$hex: nth($args, 1);
$alpha: nth($args, 2);
@if $oldIE == 1 {
@return rgb(red($hex), green($hex), blue($hex));
} @else {
@return rgba(red($hex), green($hex), blue($hex), $alpha);
You can’t perform that action at this time.