Skip to content

Instantly share code, notes, and snippets.

View dieppon's full-sized avatar

Victor Dieppa Garriga dieppon

1 follower · 3 following
View GitHub Profile
@dieppon
dieppon / ie-height.scss
Created April 10, 2014 14:43
Cross-browsing min/max heights
@mixin min-height($value){
height: auto !important;
height: $value;
min-height: $value;
}
@mixin max-height($value){
height: auto !important;
height: $value;
max-height: $value;
@dieppon
dieppon / font-smoothing-mixin.scss
Created April 10, 2014 11:32
James Wilson's (https://gist.github.com/jameswilson) mixing for the 'font-smoothing' CSS rule
@mixin font-smoothing($value: antialiased) {
@if $value == antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@else {
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
}
@dieppon
dieppon / non-dependable-SVG-fallback-background-mixin.scss
Last active August 29, 2015 13:56
@mixin svg-graphic($imgfilename, $imgtype, $imgwidth, $imgheight) {
background-image: url('../img/' + $imgfilename + '.' + $imgtype);
background-image: url('../img/' + $imgfilename + '.svg'), none;
background-size: $imgwidth $imgheight;
}
@dieppon
dieppon / vertical-grid-compass-mixin.scss
Last active August 29, 2015 13:56
Debug the vertical rhythm in your site by adding a grid overlay. It's been design to be use with compass and it uses Basehold.it(http://basehold.it/), the quick, painless, javascript-free baseline overlay.
@mixin vertical-grid($color:null, $alpha:null, $base-line-height:$base-line-height){
// Remove unit
$base-line-height: $base-line-height / ($base-line-height * 0 + 1);
//Extract chanels
$get-red: red($color);
$get-green: green($color);
$get-blue: blue($color);
@dieppon
dieppon / scss-placeholder.scss
Last active August 29, 2015 13:56
Style HTML5 placeholders with this mixin.
// Placeholder
@mixin placeholder {
&:-moz-placeholder { @content; }
&::-moz-placeholder { @content; }
&:-ms-input-placeholder{ @content; }
&::-webkit-input-placeholder { @content; }
}
@dieppon
dieppon / RGBA-IE-backgroound.scss
Created February 27, 2014 10:30
Create cross-browsing alpha transparent backgrounds.
// RGBa background
@mixin background-rgba($color, $alpha) {
$rgba: rgba($color, $alpha);
$ie-hex-str: ie-hex-str($rgba);
// Fallback for web browsers that doesn't support RGBa
background-color: $color;
// Reset background to transparent only in IE 6-8 using the backslash 9 hack http://webdood.com/?p=57
background-color: transparent\9;
// RGBa with $alpha opacity
background-color: $rgba;