Skip to content

Instantly share code, notes, and snippets.

View chriscoyier's full-sized avatar

Chris Coyier chriscoyier

10.8k followers · 247 following
View GitHub Profile
@travismillerweb
travismillerweb / line-on-sides.scss
Last active August 29, 2015 13:57
Sass - Line On SIdes Headers
/*
Sass - Line On Side Headers
Reference Link: http://css-tricks.com/line-on-sides-headers/
Implementation Example: <h1 class="fancy"><span>Title</span></h1>
*/
@jacobdubail
jacobdubail / Center Align
Created June 12, 2014 20:53
@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
bfillmer / toolbox.less
Created June 16, 2014 15:45
Generic LESS Mixins
// Liked what Chris Coyier showed off in this blog post:
// http://codepen.io/chriscoyier/blog/some-mini-sass-mixins-i-like
// Decided to make LESS versions really quickly.
.coverer() {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
@neoswf
neoswf / gist:02d66dadbfef56f0254c
Last active August 29, 2015 14:06
How to catch an error event for an SVG image
<!--
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.href.baseVal`
This guy enables you to overright the SVG image source, with the fallbacl one.
-->
@JohnRiv
JohnRiv / super-css-super-challenge.html
Created July 27, 2011 21:53
Super CSS Super Challenge Answer
<!DOCTYPE html>
<html>
<head>
<!--
A solution for the design at http://jsbin.com/super-css-super-challenge
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
chriseppstein / 0_usage.scss
Created February 29, 2012 19:29
This is code that runs using Sass 3.2 prerelease and something like this will be in compass soon.
@include keyframes(appear-and-roundify) {
0% { opacity: 0; @include border-radius(2px); }
100% { opacity: 1; @include border-radius(10px); }
}
@jcroft
jcroft / layout.sass
Created March 1, 2012 04:51
How easy responsive design can be with Sass
#content-wrapper
+container
#about
// Default (smallest screens)
+column(100%)
background-color: #ccc
// Respond to other screen widths
@lessallan
lessallan / friendshiptest
Created March 24, 2012 00:28
@AllanBranch's Friendship Test
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
simonsmith / lesscss-centre
Created April 13, 2012 13:45
Centre elements on both axis - LESSified version of http://goo.gl/UN80L
.center-container {
text-align: center;
&:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
@KuraFire
KuraFire / rgbaa.scss
Created September 13, 2012 21:18
More dynamic, oldIE-compatible SCSS function for rgba
@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);