A basic set of SCSS globals and a typography file, a starting point.
When using this a base font size needs to be set. This is usually done on the html element. More info
html {
font-size: 62.5%;
}
@mixin font-size($sizeValue: 1.6, $line: $sizeValue * 1.5) {
font-size: ($sizeValue * 1) + px;
line-height: ($line * 1) + px;
font-size: ($sizeValue / 10) + rem;
line-height: ($line / 10) + rem;
}
@include font-size(18);
These mediaqueries are written mobile first. If you dont want to do mobile first change the min to max. More info
@mixin respond-to($media) {
@if $media == x-small {
@media only screen and (max-width: 27.5em) { @content; }
}
@if $media == small {
@media only screen and (min-width: 43.75em) { @content; }
}
@else if $media == medium {
@media only screen and (min-width: 53.125em) { @content; }
}
@else if $media == large {
@media only screen and (min-width: 64.375em) { @content; }
}
}
section {
width: 100%;
@include repond-to(small){
width: 75%;
}
}
Mediaqueries for high pixel ratios. Create a double resolution background image, scale with background size. More info
@mixin image-2x($image, $width, $height) {
@media (min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
background-image: url($image);
background-size: $width $height;
}
}
@include image-2x('image@2x.png', 25px, 25px);
Adds psudeo elements around the element to clear the float. More info
@mixin clearfloat {
&:before, &:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
&:after {
clear: both;
}
}
@include clearfloat;
There are many ways to do image replacement, this works for me. This can be used as an placeholder since it is static. More info
%hide-text {
color: transparent;
font: 0/0 a;
text-shadow: none;
}
@extend %hide-text;