Skip to content

Instantly share code, notes, and snippets.

Avatar

Linus imlinus

  • Sweden
View GitHub Profile
@imlinus
imlinus / font-face.scss
Created Oct 28, 2013
font-face mixin (with IE8 support)
View font-face.scss
// Mixin for custom webfonts with IE8 fallback
@mixin font-face(
$name,
$font-files,
$eot: false,
$weight: normal,
$style: normal
) {
$iefont: unquote("#{$eot}?#iefix");
@imlinus
imlinus / font-smoothing.scss
Last active Dec 26, 2015
Font-smoothing mixin
View font-smoothing.scss
@mixin font-smoothing($val: antialiased) {
@include prefix(font-smoothing, $val);
}
// usage
* {
@include font-smoothing(antialiased);
}
@imlinus
imlinus / ir.scss
Last active Dec 26, 2015
ir (hide-text) mixin/placeholder
View ir.scss
@mixin ir {
border: 0;
font: 0/0 a;
text-shadow: none;
color: transparent;
background-color: transparent;
}
%ir {
@include ir;
View retina.scss
$isRetina: "(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5)";
@mixin retina {
@media #{$isRetina} { @content; }
}
// usage
.logotype {
width: 100px;
@imlinus
imlinus / position.scss
Last active Dec 29, 2015
position mixin
View position.scss
@mixin position(
$position: absolute,
$top: null,
$right: null,
$bottom: null,
$left: null
) {
position: $position;
top: $top;
right: $right;
@imlinus
imlinus / inline-block.scss
Created Nov 22, 2013
inline-block mixin/placeholder
View inline-block.scss
@mixin inl-block {
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
}
%inline-block {
@imlinus
imlinus / user-select.scss
Last active Dec 29, 2015
user-select mixin/placeholder
View user-select.scss
// attributes: none | text | all | element
// Only call for mixin within media querys, otherwise use placeholder!
@mixin user-select($val: none) {
-webkit-touch-callout: $val;
@include prefix(user-select, $val);
}
%user-select-none { @include user-select(none); }
%user-select-text { @include user-select(text); }
@imlinus
imlinus / clearfix.scss
Last active Dec 29, 2015
Clearfix mixin/placeholder
View clearfix.scss
@mixin clearfix {
*zoom: 1;
&:before,
&:after {
content: "";
display: table;
}
&:after { clear: both; }
@imlinus
imlinus / ellipsis.scss
Last active Dec 29, 2015
ellipsis mixin/placeholder
View ellipsis.scss
// Mixin for creating a ellipsis (...) when text is too long.
// Only call the mixin within media querys, otherwise use the placeholder!
@mixin ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
%ellipsis {
@imlinus
imlinus / mediaquery.scss
Last active Dec 29, 2015
media query handler mixin
View mediaquery.scss
// Simple mixin when calling different viewports
// Remember - you can't extend within media-querys
//
// basic usage:
// @include respond(retina) {
// background-image: url('path/to/retina/image.png');
// background-size: 100px 50px;
// }
// Store these in your global.scss
You can’t perform that action at this time.