Skip to content

Instantly share code, notes, and snippets.

@ntreadway
Created November 18, 2013 20:01
Show Gist options
  • Save ntreadway/7534375 to your computer and use it in GitHub Desktop.
Save ntreadway/7534375 to your computer and use it in GitHub Desktop.
Sass mixins for mobile first development
// Mobile
@mixin kill-mobile-zoom {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: none;
}
@mixin kill-tap-highlight {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
// Misc
@mixin background-size ($width:auto, $height:auto) {
-webkit-background-size: $width $height;
-moz-background-size: $width $height;
-o-background-size: $width $height;
background-size: $width $height;
}
// Font sizing.
@mixin small {
/* 13px / 18px */
font-size: #{($font-size*0.8125) / $rem}rem;
line-height: ($line*0.75) / ($font-size*0.8125) * 1rem;
}
@mixin normal {
/* 16px / 24px */
font-size: #{$font-size / $rem}rem;
line-height: #{$line / $rem}rem; /* 24 */
}
@mixin medium {
/* 18 / 20px */
font-size: #{18 / $rem}rem;
line-height: ($line*1.5) / 18 * 1rem;
}
@mixin large {
/* 26 / 36px */
font-size: #{26 / $rem}rem;
line-height: ($line*1.5) / 18 * 1rem;
}
@mixin huge {
/* 42px / 48px */
font-size: #{42 / $rem}rem;
line-height: ($line*2) / 18 * 1rem;
}
@mixin massive {
/* 68px / 72px */
font-size: #{68 / $rem}rem;
line-height: ($line*3) / 68 * 1rem;
}
@mixin gigantic {
/* 110px / 120px */
font-size: #{110 / $rem}rem;
line-height: ($line*5) / 110 * 1rem;
}
// Device targeting
@mixin high-res {
/* Retina display and other high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 2) {
@content;
}
}
/* Medium screens */
@mixin small-landscape {
@media only screen and (max-width: 767px) and (orientation: landscape) {
@content;
}
}
@mixin medium-screen {
@media only screen and (min-width: 768px) and (max-width: 1111px) {
@content
}
}
@mixin iphone5-landscape {
@media only screen and (min-width: 560px) and (max-device-width: 1136px) and (orientation:landscape) {
@content;
}
}
@mixin ipad-landscape {
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape){
@content;
}
}
@mixin ipad-portrait {
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
@content;
}
}
@mixin show-it {
height: auto;
visibility: visible;
@include opacity(1);
}
@mixin hide-it {
height: 0;
padding: 0;
width: 0 !important;
position: absolute;
-webkit-transform: translate3d(-9999rem,0,0);
-moz-transform: translate3d(-9999rem,0,0);
transform: translate3d(-9999rem,0,0);
@include opacity(0);
}
// Castrum grid
@mixin respond($size, $type:min-width) {
@media only screen and ($type: $size) {
@content;
}
}
@mixin grid-sm {
@for $i from 1 through $total-sm-cols {
.c-sm-#{$i} {
width: colWidth($colNum:$i, $totalCols:$total-sm-cols);
}
}
}
@mixin grid-md {
@for $i from 1 through $total-md-cols {
.c-md-#{$i} {
width: colWidth($colNum:$i, $totalCols:$total-md-cols);
}
}
}
@mixin grid-lg {
@for $i from 1 through $total-lg-cols {
.c-lg-#{$i} {
width: colWidth($colNum:$i, $totalCols:$total-lg-cols);
}
}
}
// Functions
@function calc-rem($target-px, $base: $font-size) {
@return ($target-px / $base) * 1rem;
}
@function colWidth($colNum, $totalCols) {
@return percentage(($colNum / $totalCols));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment