Building a collection of my common use Sass mixins, functions and snippets. All written with SCSS syntax.
$ npm install sassboilerplate2021-05-18Another update to Retina media query evaluation method.2017-12-05Update to Retina media query evaluation method.2017-03-15Published initial npm package.2015-03-24Major rewrite supporting Sass 3.4.0 and above only, along with dropping of IE8 support and various implementation changes.2014-10-02Final release for Sass 3.2.0. Future revisions make strong use of features such as Sass maps and the@errordirective. Release has been tagged as final3.2 if anyone is after it.2013-03-31Initial release.
Provides the following:
box-sizing: border-boxapplied to all elements.- CSS "reset" to base page elements.
font-sizereset so1em = 10px.- The obligatory clearfix.
- Element hide/off canvas.
- Text overflow with ellipsis helper.
- Responsive image helper (images to their maximum width or container, preserving aspect ratio/height).
- Removal of the tap highlight color from Webkit based browsers on touch enabled devices, proves to be rather annoying at times (applies to iOS/Mobile Safari in particular).
Designed for use with all modern browsers and IE8+. The default background, color and font-family can be overridden via Sass variables:
$resetBase_baseBackground: #000;
$resetBase_baseColor: #fff;
$resetBase_baseFontFamily: Arial,'Helvetica Neue',Helvetica,sans-serif;
@import 'resetbase';...which would generate:
body,button,input,select,td,textarea,th {
color: #fff;
font-family: Arial,'Helvetica Neue',Helvetica,sans-serif;
}
body {
background: #000;
font-size: 62.5%;
line-height: 1;
}The clearFix, hide, textOverflowEllipsis, responsiveImage and tapHighlightRemove definitions are implemented as Sass placeholders and used with the @extend directive, rather than littering HTML markup with things like class="clearfix" / class="hide":
.myclasswithclearfix {
@extend %clearFix;
border: 1px solid #000;
color: #f00;
}
.mybutton {
@extend %tapHighlightRemove;
color: #f00;
display: inline-block;
font-weight: bold;
height: 20px;
}Mixins for CSS3 animation, @keyframes and transition defintions.
Includes -webkit- vendor prefix (Firefox went prefix free since version 16).
A series of @functions for fetching what I consider collection values, defined within Sass map data types.
Currently for colors, font sizes, spacing (margin/padding/etc.) and z-indexes:
@import 'collection';
$colorMap: (
blue: #1d90e0,
grey: #898b8d,
orange: #da4300
);
$fontSizeMap: (
base: 1.2em,
title: 1.3em
);
$spacingMap: (
base: 20px,
double: 40px
);
$zIndexMap: (
base: 1,
modal: 200,
ceiling: 1000
);
.firstclass {
color: color(blue);
font-size: fontSize();
margin-left: sp();
z-index: zIndex(ceiling);
}
.secondclass {
color: color(orange);
font-size: fontSize(title);
margin-left: sp(double);
z-index: zIndex();
}
.zindexadjust {
z-index: zIndex(modal,-5);
}...generating:
.firstclass {
color: #1d90e0;
font-size: 1.2em;
margin-left: 20px;
z-index: 1000;
}
.secondclass {
color: #da4300;
font-size: 1.3em;
margin-left: 40px;
z-index: 1;
}
.zindexadjust {
z-index: 195;
}Note:
- Omitting map key argument from
fontSize(),sp()andzIndex()will return the first value in each Sass map. - Function
sp($key[,$multiplier])optional$multiplierfloat parameter allows for adjustment of the requested spacing map value. - Function
zIndex($key[,$shift])optional$shiftinteger parameter allows increment/decrement to returnedz-indexmap value. - Invalid map keys given to any function will throw a fatal Sass error.
Cross browser compatible @font-face embedding of webfont files:
eot(Internet Explorer)svg(iOS legacy)ttf(Safari, Android, iOS) and;woff(Standards)
Implemented @font-face definition credit to Chris Coyier.
The fontFace() function accepts optional font-style and font-weight arguments - both which default to normal:
@import 'fontface';
@include fontFace('MyFont','font/myfont');...generating:
@font-face {
font-family: "MyFont";
src: url("font/myfont.eot");
src: url("font/myfont.eot?#iefix") format("embedded-opentype"),
url("font/myfont.woff") format("woff"),
url("font/myfont.ttf") format("truetype"),
url("font/myfont.svg#MyFont") format("svg");
font-style: normal;
font-weight: normal;
}Media query mixins to assist with responsive width page layouts.
Breakpoints are defined in a $respondWidthMap map variable. As an example, how I typically implement using common device breakpoints:
@import 'respondwidth';
// respond breakpoint
// 997px - Infin (960px suggested frame/row width)
// 769px - 996px (732px suggested frame/row width)
// 481px - 768px (444px suggested frame/row width)
// 0px - 480px (300px suggested frame/row width)
$respondWidthMap: (
centi: 996px,
micro: 768px,
nano: 480px
);
.pageframe {
margin: 0 auto;
width: respondWidthGet(centi,-36px);
@include respondWidthFrom(centi) {
padding: 0 50px;
}
@include respondWidthFromUpTo(micro,centi) {
width: respondWidthGet(micro,-36px);
}
@include respondWidthFromUpTo(nano,micro) {
width: respondWidthGet(nano,-36px);
}
@include respondWidthUpTo(nano) {
width: 300px;
}
}...generating:
.pageframe {
margin: 0 auto;
width: 960px;
}
@media screen and (min-width: 997px) {
.pageframe {
padding: 0 50px;
}
}
@media screen and (min-width: 769px) and (max-width: 996px) {
.pageframe {
width: 732px;
}
}
@media screen and (min-width: 481px) and (max-width: 768px) {
.pageframe {
width: 444px;
}
}
@media screen and (max-width: 480px) {
.pageframe {
width: 300px;
}
}Note:
- The generated
@mediaquerymin-widthis deliberately returned 1px greater than the$respondWidthMapmap value defined to provide isolation between each breakpoint range. - Invalid breakpoint map keys given to any of these functions; or a
frombreakpoint greater thanupTogiven torespondWidthFromUpTo()will throw a fatal Sass error. - Function
respondWidthGet($key[,$shift])returns the defined width for a given$key, useful for dependent calculations. An optional$shiftinteger parameter allows for increment/decrement to map value.
Allows for creation of styles (typically images) which are targeted to "retina" high pixel density displays.
Implemented @media query credit to Chris Coyier.
An example using retinaImage():
@import 'retina';
$logoWidth: 200px;
.companylogo {
background: url(companylogo.png) no-repeat 0 0;
height: 200px;
width: $logoWidth;
@include retinaImage('companylogo2x.png',$logoWidth);
}...generating:
.companylogo {
background: url(companylogo.png) no-repeat 0 0;
height: 200px;
width: 200px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi) {
.companylogo {
background-image: url(companylogo2x.png);
background-size: 200px;
}
}Note:
- Width argument passed to
retinaImage()is optional, defaulting to 100% (background-size: 100%) if not defined. - A
100%width is usually suitable if the image is to span the full background width of the element, allowing the browser to determine a scaled height keeping the aspect ratio. - Providing a specific width is (typically) only needed for CSS spriting tasks.
Also included is retinaOnly() for arbitrary CSS style blocks:
@import 'retina';
.shinybutton {
font-weight: bold;
height: 200px;
width: 100px;
@include retinaOnly() {
// reward for retina is a red border
border: 1px solid #f00;
}
}Mixins for several CSS properties that (still) require vendor prefixes:
backface-visibility($value), providing-webkit-vendor prefix.linear-gradient($angle,$stops), providing-webkit-vendor prefix with alternative (reversed)$anglesyntax forto top,to right, etc.transform($value), providing-webkit-and-ms-(required with IE9) prefixes fortransform().