Skip to content

Instantly share code, notes, and snippets.

View jasonkmccoy's full-sized avatar

Jason McCoy jasonkmccoy

View GitHub Profile

alias sublime='open -a "Sublime Text"'

alias st='open -a "Sublime Text"'

alias subl='open -a "Sublime Text"'

alias server="python -m SimpleHTTPServer"

alias sandbox="cd /Users/jason/Desktop/sandbox"

@jasonkmccoy
jasonkmccoy / sass-line-height.sass
Created March 14, 2015 22:46
Line-height mixin
=line-height($heightValue: 12)
line-height: $heightValue + px
//fallback for old browsers
line-height: 0.125 * $heightValue + rem
@jasonkmccoy
jasonkmccoy / sass-input-placeholder-text.sass
Created March 14, 2015 22:42
Input placeholder text mixin
/* Placeholder Mixin
*==========================================================================
=placeholder-color($color)
&.placeholder
color: $color
&:-moz-placeholder
color: $color
&::-webkit-input-placeholder
color: $color
@jasonkmccoy
jasonkmccoy / sass-comments.sass
Created March 14, 2015 22:03
sass-comments: 4 levels of comments (from most important to least important)
// *************************************
//
// First Level
// -> Description
//
// *************************************
// -------------------------------------
// Second Level
// -------------------------------------
@jasonkmccoy
jasonkmccoy / sass-breakpoint.sass
Created March 14, 2015 21:49
breakpoint mixin
=break-point($point)
@if $point == desktop
@media only screen and (max-width: 50em)
@content
@else if $point == mobile
@media only screen and (max-width: 20em)
@content
// Usage
div
@jasonkmccoy
jasonkmccoy / sass-ghost-button.sass
Created March 14, 2015 21:44
Ghost button mixin
=ghost-button($font, $font-size, $font-color, $border-size, $border-color, $padding, $transition-speed, $hover-color)
display: inline-block
text-decoration: none
text-transform: uppercase
font-family: $font
font-size: $font-size
color: $font-color
border: $border-size solid $border-color
padding: $padding
-webkit-transition: color $transition-speed, background $transition-speed
@jasonkmccoy
jasonkmccoy / sass-flex-direction.scss
Created March 14, 2015 21:36
flex-direction mixin
@mixin flex-direction($direction) {
@if $direction == column {
-webkit-flex-direction:vertical;
-moz-flex-direction:vertical;
-ms-flex-direction:column;
-webkit-flex-direction:column;
flex-direction:column;
} @else {
-webkit-flex-direction:horizontal;
-moz-flex-direction:horizontal;
@jasonkmccoy
jasonkmccoy / sass-flex-order.scss
Created March 14, 2015 21:31
flex order mixin
@mixin flex-order($order){
-webkit-box-ordinal-group: $order; // old
-moz-box-ordinal-group: $order; // old
-ms-flex-order: $order; // ie
-webkit-order: $order; // new
order: $order; // new
}
// Usage
div {
@mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex: $values;
-ms-flex: $values;
-webkit-flex: $values;
flex: $values;
}
// Usage
div {
=flexbox
display: -webkit-box
display: -moz-box
display: -ms-flexbox
display: -webkit-flex
display: flex
// Usage
div
+flexbox