Grow your CSS skills. Land your dream job.

CSS-Tricks GitHub Organization

Published by Chris Coyier

There is now an "organization" on GitHub for CSS-Tricks. This is a great feature of GitHub and a perfect fit for us.

Why this is good

  • There is a larger core group of people that can work on any CSS-Tricks related demo.
  • It is easier to find CSS-Tricks demos in one consolidated place on GitHub.
  • Any admin can give new people who have interest in contributing to a particular demo access to do that.

What we could use

  • Let us know if you see a demo that doesn't have a GitHub repo but you think should.
  • Let us know about 404's if you see a link to a repo that has been moved and we forgot to change link.
  • Let us know if you have interest in contributing to any particular demo. Best bet = submit pull request for a change. If it's awesome, we'll just give you direct access.

Special thanks to Mottie for heading this up.

Comments

  1. Permalink to comment#

    Is there any way to “follow” the organization? Or do members have to be aproved?

  2. Jessica
    Permalink to comment#

    Is it possible to follow an organization? I can’t seem to find the magic button that would allow me to do this.

  3. Not that I’d discourage following the organization, but for your own sake, I think it’s probably best just to follow the repos that actually interest you than the whole kit’n’kaboodle.

  4. Sounds cool, I would like to contribute!

  5. Bob Jonson
    Permalink to comment#

    How can I become a member of the organization cause I would like to help contribute?

  6. Diseño de Pagina Web
    Permalink to comment#

    Muy buenooo!!!

  7. Oh!! excellent great contribution!!! :)

  8. Subash Pathak
    Permalink to comment#

    Sorry Chris i didn’t find a place to paste this would you like to add this to your snippets section…

    
    //Modern Css3 Sass Mixin Library
    //Author Subash Pathak
    //License USE AS YOUR WISH
    //Checked In Sass 3.2.1
    //Ie 10 -ms-linear-gradient and -ms-animation -ms-transition blah,blah,blah are not included because they will go away in final version of ie10
    
    
    @mixin _prefix-linear-gradient($pos, $stops...) {
    	background-image: -webkit-linear-gradient($pos,$stops);
    	background-image: -moz-linear-gradient($pos,$stops);
    	background-image: -o-linear-gradient($pos,$stops);
    }
    
    @mixin linear-gradient($pos, $stops...) {
    	$pos: "#{$pos}";
    	@if      ($pos == "to top"          )   { @include _prefix-linear-gradient(bottom, $stops);          }
    	@else if ($pos == "to bottom"       )   { @include _prefix-linear-gradient(top, $stops);             }
    	@else if ($pos == "to left"         )   { @include _prefix-linear-gradient(right, $stops);           }
    	@else if ($pos == "to right"        )   { @include _prefix-linear-gradient(left, $stops);            }
    	@else if ($pos == "to top right"    )   { @include _prefix-linear-gradient(bottom left, $stops);     }
    	@else if ($pos == "to top left"     )   { @include _prefix-linear-gradient(bottom right, $stops);    }
    	@else if ($pos == "to bottom right" )   { @include _prefix-linear-gradient(top left, $stops);        }
    	@else if ($pos == "to bottom left"  )   { @include _prefix-linear-gradient(top right, $stops);       }
    	@else                                   { @include _prefix-linear-gradient(unquote($pos), $stops);   }
    	background-image: linear-gradient(unquote($pos), $stops);
    }
    
    @mixin prefix($prop, $value, $prefixes...) {
    	@each $prefix in $prefixes {
    		-#{$prefix}-#{$prop}: $value;
    	}
    	#{$prop}: $value;
    }
    
    @mixin ie7($prop, $value) {
    	*#{$prop}: $value;
    }
    
    @mixin box-shadow($shadows...) {
    	@include prefix(box-shadow, ($shadows), webkit, moz);
    }
    
    @mixin border-image ($args...) {
    	@include prefix(border-image, ($args), webkit, moz, o);
    }
    
    @mixin transform($args...) {
    	@include prefix(transform, ($args), webkit, moz, ms, o);
    }
    
    @mixin perspective($perspective) {
    	@include prefix(perspective, ($perspective), webkit, moz);
    	@include prefix(transform-style, preserve-3d, webkit, moz);
    }
    
    @mixin transition($args...) {
    	@include prefix(transition, ($args), webkit, moz, o);
    }
    
    @mixin animation($args...) {
    	@include prefix(animation, ($args), webkit, moz, o);
    }
    
    @mixin box-sizing($args...) {
    	@include prefix(box-sizing, ($args), webkit, moz);
    }
    
    @mixin background-clip($args...) {
    	@include prefix(background-clip, ($args), webkit, moz);
    }
    
    @mixin background-size($args...) {
    	@include prefix(background-clip, ($args), webkit, moz);
    }
    
    @mixin user-select($args...) {
    	@include prefix(user-select ($args), webkit, moz, ms, o);
    }
    
    @mixin opacity($alpha) {
    	$ie-opacity: $alpha*100;
    	opacity: $alpha;
    	filter: unquote("alpha(opacity=#{$ie-opacity})");
    }
    
    @mixin size($width, $height) {
    	width: $width;
    	height: $height;
    }
    
    @mixin size-square($size) {
    	@include size($size, $size);
    }
    
    @mixin multiple-columns($count, $gap) {
    	@include prefix(column-count, ($count), webkit, moz, ms, o);
    	@include prefix(column-gap, ($gap), webkit, moz, ms, o);
    }
    
    @mixin appearance($args...) {
    	@include prefix(appearance, ($args), webkit, moz, ms, o);
    }
    
    @mixin keyframes {
    	@-moz-keyframes { @content; }
    	@-o-keyframes { @content; }
    	@-webkit-keyframes { @content; }
    	@keyframes { @content; }
    }
    
    @mixin clearfix {
    	*zoom: 1;
    	&:after {
    		content: "";
    		visibility: hidden;
    		display: block;
    		clear: both;
    	}
    }
    
    @mixin embed-font($family, $url, $svgid:$family, $weight:normal, $style:normal) {
    	@font-face {
    		font-family: $family;
    		src: url('#{$url}.eot');
    		src: url('#{$url}.eot#iefix') format('embedded-opentype'),
    			 url('#{$url}.woff') format('woff'),
    			 url('#{$url}.ttf') format('truetype'),
    			 url('#{$url}.svg##{$svgid}') format('svg');
    		font-weight: $weight;
    		font-style: $style;
    	}
    }
    
    
  9. Bob Jonson
    Permalink to comment#

    Can somebody please invite me not the orginization! I submitted a pull request on the View Source Button a couple of days ago and nobody has looked at it, I would really like to join the orginization.

  10. Oh, so I already knew early from his blog :)

  11. That is really great idea. Want to be member of this organization.

  12. my question is same like bob, but i did;t find any answer above. so admin its little bit hard for you

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".