Sass boilerplate

Building a collection of my common use Sass mixins, functions and snippets. All written with SCSS syntax.

• Installation
• Revision history
• Library
  • resetbase.scss
  • animationtransition.scss
  • collection.scss
  • fontface.scss
  • respondwidth.scss
  • retina.scss
  • vendor.scss

Installation

$ npm install sassboilerplate

Revision history

• 2021-05-18 Another update to Retina media query evaluation method.
• 2017-12-05 Update to Retina media query evaluation method.
• 2017-03-15 Published initial npm package.
• 2015-03-24 Major rewrite supporting Sass 3.4.0 and above only, along with dropping of IE8 support and various implementation changes.
• 2014-10-02 Final release for Sass 3.2.0. Future revisions make strong use of features such as Sass maps and the @error directive. Release has been tagged as final3.2 if anyone is after it.
• 2013-03-31 Initial release.

Library

resetbase.scss

Provides the following:

• box-sizing: border-box applied to all elements.
• CSS "reset" to base page elements.
• font-size reset so 1em = 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;
}

animationtransition.scss

Mixins for CSS3 animation, @keyframes and transition defintions.

Includes -webkit- vendor prefix (Firefox went prefix free since version 16).

collection.scss

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() and zIndex() will return the first value in each Sass map.
• Function sp($key[,$multiplier]) optional $multiplier float parameter allows for adjustment of the requested spacing map value.
• Function zIndex($key[,$shift]) optional $shift integer parameter allows increment/decrement to returned z-index map value.
• Invalid map keys given to any function will throw a fatal Sass error.

fontface.scss

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;
}

respondwidth.scss

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 @media query min-width is deliberately returned 1px greater than the $respondWidthMap map value defined to provide isolation between each breakpoint range.
• Invalid breakpoint map keys given to any of these functions; or a from breakpoint greater than upTo given to respondWidthFromUpTo() will throw a fatal Sass error.
• Function respondWidthGet($key[,$shift]) returns the defined width for a given $key, useful for dependent calculations. An optional $shift integer parameter allows for increment/decrement to map value.

retina.scss

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;
  }
}

vendor.scss

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) $angle syntax for to top, to right, etc.
• transform($value), providing -webkit- and -ms- (required with IE9) prefixes for transform().