Skip to content

Instantly share code, notes, and snippets.

Avatar

Linus imlinus

  • Sweden
View GitHub Profile
View Router.js
var subPages = {
'index': {
'name': 'Whazzzzup',
'content': 'Welcome to MyTurrn',
},
'about': {
'name': 'Who are we?',
'content': 'We got founded back in 2014',
},
'contact': {
View _all-prefix.scss
// mixin for prefixin'
// usage: @include prefix(attribute, argument);
@mixin prefix($attribute, $argument) {
-webkit-#{$attribute}: #{$argument};
-moz-#{$attribute}: #{$argument};
-ms-#{$attribute}: #{$argument};
-o-#{$attribute}: #{$argument};
#{$attribute}: #{$argument};
}
@imlinus
imlinus / _animate.scss
Last active Dec 29, 2015
animate/keyframes/transition helper mixins
View _animate.scss
// Mixin for keyframes
// basic usage:
// @include keyframes(name) {
// 0% { background: yellow; }
// 100% { background: blue; }
// }
@mixin keyframes($name) {
@-webkit-keyframes $name { @content; }
@-moz-keyframes $name { @content; }
@imlinus
imlinus / _arrow.scss
Last active Dec 29, 2015
arrow mixin
View _arrow.scss
// Mixin for creating arrows, basic usage @include arrow(top-left, #000, 15px);
// available directions: top, right, bottom, left, top-left, top-right, bottom-left, bottom-right
@mixin arrow(
$direction,
$color,
$size
) {
height: 0;
width: 0;
@imlinus
imlinus / _vertical-center.scss
Last active Dec 29, 2015
vertical centering mixins
View _vertical-center.scss
// Mixin for vertical and horizontal centerin
// Requires a declared height + position: relative on parent
// usage:
// .box {
// height: 50%;
// @include vertical-center-1;
// }
@mixin vertical-center-1 {
@include position(absolute, 0, 0, 0, 0);
@imlinus
imlinus / _alpha.scss
Last active Dec 29, 2015
Alpha mixin
View _alpha.scss
@mixin alpha($val: 0) {
$ie-alpha: $val * 100;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$ie-alpha})";
filter: alpha(opacity=#{$ie-alpha});
@include prefix(opacity, $val);
}
%alpha-0 { @include alpha(0); }
%alpha-50 { @include alpha(0.5); }
@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
@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 / 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 / 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); }
You can’t perform that action at this time.