SCSS Toolbox

_basics.scss

// +-------------------------------------------------------------------+
// |  Basics - stuff needed for every project
// +-------------------------------------------------------------------+
// FYI: should be run through "autoprefixer"
// FYI: "normalize" is loaded separately

// include padding & borders in the size of elements
*,
*:before,
*:after {
  box-sizing: border-box;
}

// +-------------------------------------------------------------------+
// |  Minimal clearfix
// |  For modern browsers:
// |  1. The space content is one way to avoid an Opera bug
// |     when the contenteditable attribute is included anywhere
// |     else in the document. Otherwise it causes space to
// |     appear at the top and bottom of elements that are
// |     clearfixed.
// | 
// |  2. The use of `table` rather than `block` is only necessary
// |     if using `:before` to contain the top-margins of child
// |     elements.
// +-------------------------------------------------------------------+
.cf:before,
.cf:after {
  content: ' ';    // 1
  display: table;  // 2
}

.cf:after {
  clear: both;
}

// For IE 6/7 only
// Include this rule to trigger hasLayout and contain floats.
.cf {
  *zoom: 1;
}

// +-------------------------------------------------------------------+
// |  Some basic styles
// +-------------------------------------------------------------------+
// almost always wanted for web apps
html,
body {
  height: 100%;
  width: 100%;
}

strong {
  font-weight: bold;
}

_toolbox.scss

// +-------------------------------------------------------------------+
// |  Custom Mixins
// +-------------------------------------------------------------------+
// Dependencies: 'bourbon'

// +-------------------------------------------------------------------+
// |  font-smoothing - controvertial option, use responsibly!
// | 
// |  Values: on (default), off
// |
// |  References:
// |    1. http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
// +-------------------------------------------------------------------+
@mixin font-smoothing($value: on) {
  @if $value == on {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  @else {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
  }
}

// +-------------------------------------------------------------------+
// |  dotdotdot - Replaces ending of text with "..." when it
// |              no longer fits in the container element.
// |
// |  Usage:
// |
// |    .text__container {
// |      @extend %dotdotdot;
// |    }
// +-------------------------------------------------------------------+
%dotdotdot {
  max-width: 100%;          // Disallow expansion beyond parent container
  overflow: hidden;         // Must be different from 'visible'
  text-overflow: ellipsis;  // This is where the magic happens
  white-space: nowrap;      // Allow one line of text only
}

// +-------------------------------------------------------------------+
// |  hyphens - Enables hyphenation for text.
// |
// |  Values: auto, manual (default)
// |
// |  Usage:
// |
// |    .text-container {
// |      @include hyphens(auto);
// |    }
// +-------------------------------------------------------------------+
@mixin hyphens($value: 'manual') {
  @each $prefix in -webkit-, -moz-, -o-, '' {
    #{$prefix}hyphens: $value;
  }
  -webkit-hyphenate-character: '\2010';
  -webkit-hyphenate-limit-after: 1;
  -webkit-hyphenate-limit-before: 3;
}

// +-------------------------------------------------------------------+
// |  Media queries shortcut. Customize the breakpoints to
// |  suit your project.
// |
// |  Usage:
// |
// |    .sidebar {
// |      float: left;
// |      width: 300px;
// |      @include respond-to(handhelds) { float: none; }
// |      @include respond-to(wide-handhelds) { float: none; }
// |      @include respond-to(tablets) { width: 240px; }
// |    }
// +-------------------------------------------------------------------+
// Defining breakpoints
$medium: 620px !default;
$wide: 800px !default;
$huge: 1600px !default;

@mixin respond-to($media-query) {
  @if $media-query == small {
    @media only screen and (max-width:$medium - 1) { @content; }
  }

  @if $media-query == medium {
    @media only screen and (min-width:$medium) { @content; }
  }

  @if $media-query == medium-only {
    @media only screen and (min-width:$medium) and (max-width: $wide - 1) { @content; }
  }

  @if $media-query == wide {
    @media only screen and (min-width:$wide) { @content; }
  }

  @if $media-query == huge {
    @media only screen and (min-width:$huge) { @content; }
  }
}

// Just some helpers...
@mixin small-only { @include media-query(small) { @content }; }
@mixin medium { @include media-query(medium) { @content }; }
@mixin medium-only { @include media-query(medium-only) { @content }; }
@mixin wide { @include media-query(wide) { @content }; }
@mixin huge { @include media-query(huge) { @content }; }

// +-------------------------------------------------------------------+
// |  CSS3 Grayscale filter
// | 
// |  Values: 0-100%
// +-------------------------------------------------------------------+
@mixin grayscale($value: 100%) {
  @each $prefix in -webkit-, -moz-, -o-, '' {
    #{$prefix}filter: grayscale($value);
  }
}

// +-------------------------------------------------------------------+
// |  ios-scrolling: Enable smooth scrolling on iOS devices
// +-------------------------------------------------------------------+
%ios-scrolling {
  overflow-y: scroll;                   // Has to be scroll, not auto
  -webkit-overflow-scrolling: touch;
}

// +-------------------------------------------------------------------+
// |  The cover everything block
// |  - might also work as base class to extend
// +-------------------------------------------------------------------+
%coverer {
  @extend %fill-up;
  left: 0;
  position: absolute;
  top: 0;
}

// +-------------------------------------------------------------------+
// |  Center content without knowing absolute size or how big
// |  the container is.
// +-------------------------------------------------------------------+
%centerer {
  left: 50%;
  position: absolute;
  top: 50%;
  @include transform(translate(-50%, -50%));
}

%word-wrap {
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

@function black($opacity: .8) {
  @return rgba(#000, $opacity)
}

@function white($opacity: .8) {
  @return rgba(#fff, $opacity)
}