Cacher is the code snippet organizer for pro developers

/**
 * CONTENTS:
 *
 * 1. Settings
 *
 * 2. Tools
 *
 * 3. Generic
 *
 * 4. ELements
 *
 * 5. Objects
 *
 * 6. Components
 *
 * 7. Utilites
 */



/*
** 1. SETTINGS – used with preprocessors and contain font, colors definitions, etc.
*/

$global-font-size:    16px !default;
$global-line-height:  24px !default;

$global-radius: 3px !default;
$global-transition: all 300ms ease-in-out !default;

// Spacing values are determined based on your project’s global line height (i.e your baseline grid).
$global-spacing-unit: round($global-line-height) !default;

// How many times larger/smaller than the default should our spacing unit variants be?
$global-spacing-unit-factor-tiny:   0.25 !default;
$global-spacing-unit-factor-small:  0.5  !default;
$global-spacing-unit-factor-large:  2    !default;
$global-spacing-unit-factor-huge:   4    !default;


/*
** 2. TOOLS – globally used mixins and functions. It’s important not to output any CSS in the first 2 layers.
*/

///* ========================================================================
//   #HIDDEN-VISUALLY
//   ======================================================================== */

// Mixin to quickly apply accessible hiding to elements.
@mixin hidden-visually() {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

///* ========================================================================
//   #CLEARFIX
//   ======================================================================== */

// Mixin to drop micro clearfix into a selector. Further reading:
// http://www.cssmojo.com/the-very-latest-clearfix-reloaded/
//
// .usage {
//   @include clearfix();
// }
@mixin clearfix() {

  &:after {
    content: "" !important;
    display: block !important;
    clear: both !important;
  }

}


/*
** 3. GENERIC – reset and/or normalize styles, box-sizing definition, etc. This is the first layer which generates actual CSS.
*/

/* ==========================================================================
   #BOX-SIZING
   ========================================================================== */

/**
 * More sensible default box-sizing:
 * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
 */

html {
  box-sizing: border-box;
}

* {

  &,
  &:before,
  &:after {
    box-sizing: inherit;
  }

}


/*
** 4. ELEMENTS – styling for bare HTML elements (like H1, A, etc.). These come with default styling from the browser so we can redefine them here.
*/

/* ==========================================================================
   #PAGE
   ========================================================================== */

/**
 * Simple page-level setup.
 *
 * 1. Set the default `font-size` and `line-height` for the entire project,
 *    sourced from our default variables. The `font-size` is calculated to exist
 *    in ems, the `line-height` is calculated to exist unitlessly.
 * 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
 *    navigating between pages that do/do not have enough content to produce
 *    scrollbars naturally.
 * 3. Ensure the page always fills at least the entire height of the viewport.
 */

html {
  font-size: ($global-font-size / 16px) * 1em; /* [1] */
  line-height: $global-line-height / $global-font-size; /* [1] */
  overflow-y: scroll; /* [2] */
  min-height: 100%; /* [3] */
}


/*
** 5. OBJECTS – class-based selectors which define undecorated design patterns, for example media object known from OOCSS
*/

/* ==========================================================================
   #BOX
   ========================================================================== */

/**
 * The box object simply boxes off content. Extend with cosmetic styles in the
 * Components layer.
 *
 * 1. So we can apply the `.o-box` class to naturally-inline elements.
 */

.o-box {
  @include clearfix();
  display: block; /* [1] */
  padding: $global-spacing-unit;

  > :last-child {
    margin-bottom: 0;
  }

}


/*
** 6. COMPONENTS – specific UI components. This is where majority of our work takes place and our UI components are often composed of Objects and Components
*/

/* ==========================================================================
   #BUTTONS
   ========================================================================== */

/**
 * 1. Allow us to style box model properties.
 * 2. Line different sized buttons up a little nicer.
 * 3. Make buttons inherit font styles (often necessary when styling `input`s as
 *    buttons).
 * 4. Reset/normalize some styles.
 * 5. Force all button-styled elements to appear clickable.
 */

.c-btn {
  display: inline-block; /* [1] */
  vertical-align: middle; /* [2] */
  font: inherit; /* [3] */
  text-align: center; /* [4] */
  margin: 0; /* [4] */
  cursor: pointer; /* [5] */
  padding: $global-spacing-unit-small $global-spacing-unit;
  transition: $global-transition;
  border-radius: $global-radius;
}


/*
** 7. UTILITIES – utilities and helper classes with ability to override anything which goes before in the triangle, eg. hide helper class
*/

/* ==========================================================================
   #HIDE
   ========================================================================== */

/**
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.u-hidden-visually {
  @include hidden-visually();
}


/**
 * Hide visually and from screen readers.
 */

.u-hidden {
  display: none !important;
}