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
@jina
jina / ie-output.scss
Last active Aug 29, 2015
Super Simple IE Mixins to Separate Output, in response to Brad Frost's question: https://twitter.com/brad_frost/status/433768787758690304
View ie-output.scss
// ---------------------
// _page.scss
// Regular Page Styles
.page {
margin: 0 auto;
width: 75%;
}
// IE Page Styles
@tbmiller
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: http://css-tricks.com/line-on-sides-headers/
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
bfillmer / toolbox.less
Created Jun 16, 2014
Generic LESS Mixins
View toolbox.less
// 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 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.href.baseVal`
This guy enables you to overright the SVG image source, with the fallbacl one.
-->
@JohnRiv
JohnRiv / super-css-super-challenge.html
Created Jul 27, 2011
Super CSS Super Challenge Answer
View super-css-super-challenge.html
<!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 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
jcroft / layout.sass
Created Mar 1, 2012
How easy responsive design can be with Sass
View layout.sass
#content-wrapper
+container
#about
// Default (smallest screens)
+column(100%)
background-color: #ccc
// Respond to other screen widths
@lessallan
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
simonsmith / lesscss-centre
Created Apr 13, 2012
Centre elements on both axis - LESSified version of http://goo.gl/UN80L
View lesscss-centre
.center-container {
text-align: center;
&:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
You can’t perform that action at this time.