Global

Every Foundation project needs to include these global styles in order to work properly. These include things like basic formatting and global utility classes.

SCSS

//
// Foundation Variables
//

$experimental: true !default;

// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with brower-based text zoom or user-set defaults.

// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
// If you want your base font-size to be different and not have it affect the grid breakpoints,
// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
$base-font-size: 100% !default;

// $base-line-height is 24px while $base-font-size is 16px
$base-line-height: 150% !default;

// This is the default html and body font-size for the base rem value.
$rem-base: 16px !default;

//
// Global Foundation Mixins
//

// @mixins
//
// We use this to control border radius.
// $radius - Default: $global-radius || 4px
@mixin radius($radius:$global-radius) {
  @if $radius {
    @if $experimental {
      -webkit-border-radius: $radius;
    }
    border-radius: $radius;
  }
}

// @mixins
//
// We use this to create equal side border radius on elements.
// $side - Options: left, right, top, bottom
@mixin side-radius($side, $radius:$global-radius) {
  @if $side == left {
    @if $experimental {
      -moz-border-radius-bottomleft: $radius;
      -moz-border-radius-topleft: $radius;
      -webkit-border-bottom-left-radius: $radius;
      -webkit-border-top-left-radius: $radius;
    }
    border-bottom-left-radius: $radius;
    border-top-left-radius: $radius;
  }
  @else if $side == right {
    @if $experimental {
      -moz-border-radius-topright: $radius;
      -moz-border-radius-bottomright: $radius;
      -webkit-border-top-right-radius: $radius;
      -webkit-border-bottom-right-radius: $radius;
    }
    border-top-right-radius: $radius;
    border-bottom-right-radius: $radius;
  }
  @else if $side == top {
    @if $experimental {
      -moz-border-radius-topright: $radius;
      -moz-border-radius-topleft: $radius;
      -webkit-border-top-right-radius: $radius;
      -webkit-border-top-left-radius: $radius;
    }
    border-top-right-radius: $radius;
    border-top-left-radius: $radius;
  }
  @else if $side == bottom {
    @if $experimental {
      -moz-border-radius-bottomright: $radius;
      -moz-border-radius-bottomleft: $radius;
      -webkit-border-bottom-right-radius: $radius;
      -webkit-border-bottom-left-radius: $radius;
    }
    border-bottom-right-radius: $radius;
    border-bottom-left-radius: $radius;
  }
}

// @mixins
//
// We can control whether or not we have inset shadows edges.
// $active - Default: true, Options: false
@mixin inset-shadow($active:true) {
  @if $experimental {
    -webkit-box-shadow: $shiny-edge-size $shiny-edge-color inset;
  }
  box-shadow: $shiny-edge-size $shiny-edge-color inset;

  @if $active { &:active {
    @if $experimental {
      -webkit-box-shadow: $shiny-edge-size $shiny-edge-active-color inset;
    }
    box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } }
}

// @mixins
//
// We use this to add transitions to elements
// $property - Default: all, Options: http://www.w3.org/TR/css3-transitions/#animatable-properties
// $speed - Default: 300ms
// $ease - Default:ease-out, Options: http://css-tricks.com/almanac/properties/t/transition-timing-function/
@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
  @if $experimental {
    -webkit-transition: $property $speed $ease;
    -moz-transition: $property $speed $ease;
  }
  transition: $property $speed $ease;
}

// @mixins
//
// We use this to add box-sizing across browser prefixes
@mixin box-sizing($type:border-box) {
  @if $experimental {
    -moz-box-sizing: $type;
    -webkit-box-sizing: $type;
  }
  box-sizing: $type;
}

// @mixins
//
// We use this to create equilateral triangles
// $triangle-size - Used to set border-size. No default, set a px or em size.
// $triangle-color - Used to set border-color which makes up triangle. No default
// $triangle-direction - Used to determine which direction triangle points. Options: top, bottom, left, right
@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: inset $triangle-size;
  @if ($triangle-direction == top) {
    border-color: $triangle-color transparent transparent transparent;
    border-top-style: solid;
  }
  @if ($triangle-direction == bottom) {
    border-color: transparent transparent $triangle-color transparent;
    border-bottom-style: solid;
  }
  @if ($triangle-direction == left) {
    border-color: transparent transparent transparent $triangle-color;
    border-left-style: solid;
  }
  @if ($triangle-direction == right) {
    border-color: transparent $triangle-color transparent transparent;
    border-right-style: solid;
  }
}

// We use this to do clear floats
@mixin clearfix {
  *zoom:1;
  &:before, &:after { content: " "; display: table; }
  &:after { clear: both; }
}

// @mixins
//
// We use this to add a glowing effect to block elements
// $selector - Used for selector state. Default: focus, Options: hover, active, visited
// $fade-time - Default: 300ms
// $glowing-effect-color - Default: fade-out($primary-color, .25)
@mixin block-glowing-effect($selector:focus, $fade-time:300ms, $glowing-effect-color:fade-out($primary-color, .25)) {
  @if $experimental {
    -webkit-transition: -webkit-box-shadow $fade-time, border-color $fade-time ease-in-out;
    -moz-transition: -moz-box-shadow $fade-time, border-color $fade-time ease-in-out;
  }
  transition: box-shadow $fade-time, border-color $fade-time ease-in-out;

  &:#{$selector} {
    @if $experimental {
      -webkit-box-shadow: 0 0 5px $glowing-effect-color;
      -moz-box-shadow: 0 0 5px $glowing-effect-color;
    }
    box-shadow: 0 0 5px $glowing-effect-color;
    border-color: $glowing-effect-color;
  }
}

// We use these to control various global styles
$body-bg: #fff !default;
$body-font-color: #222 !default;
$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
$body-font-weight: normal !default;
$body-font-style: normal !default;

// We use this to control font-smoothing
$font-smoothing: antialiased !default;

// We use these to control text direction settings
$text-direction: ltr !default;

// NOTE: No need to change this conditional statement, $text-direction variable controls it all.
$default-float: left !default;
$opposite-direction: right !default;
@if $text-direction == ltr {
  $default-float: left;
  $opposite-direction: right;
} @else {
  $default-float: right;
  $opposite-direction: left;
}

// We use these as default colors throughout
$primary-color: #008CBA !default;
$secondary-color: #e7e7e7 !default;
$alert-color: #f04124 !default;
$success-color: #43AC6A !default;

// We use these to make sure border radius matches unless we want it different.
$global-radius: 3px !default;
$global-rounded: 1000px !default;

// We use these to control inset shadow shiny edges and depressions.
$shiny-edge-size: 0 1px 0 !default;
$shiny-edge-color: rgba(#fff, .5) !default;
$shiny-edge-active-color: rgba(#000, .2) !default;

// We use this to control whether or not CSS classes come through in the gem files.
$include-html-classes: true !default;
$include-print-styles: true !default;
$include-html-global-classes: $include-html-classes !default;


// Media Query Ranges
// $small-range: (rem-calc(0), rem-calc(640));
// $medium-range: (rem-calc(641), rem-calc(1024));
// $large-range: (rem-calc(1025), rem-calc(1440));
// $xlarge-range: (rem-calc(1441), rem-calc(1920));
// $xxlarge-range: (rem-calc(1921));

$small-range: (0em, 40em);
$medium-range: (40.063em, 64em);
$large-range: (64.063em, 90em);
$xlarge-range: (90.063em, 120em);
$xxlarge-range: (120.063em);


$screen: "only screen" !default;

$landscape: "#{$screen} and (orientation: landscape)" !default;
$portrait: "#{$screen} and (orientation: portrait)" !default;

$small-up: $screen !default;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default;

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;

// Legacy
$small: $medium-up;
$medium: $medium-up;
$large: $large-up;


//We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
$cursor-crosshair-value: crosshair !default;
$cursor-default-value: default !default;
$cursor-pointer-value: pointer !default;
$cursor-help-value: help !default;
$cursor-text-value: text !default;


@include exports("global") {
  @import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");

  // Used to provide media query values for javascript components.
  // Forward slash placed around everything to convince PhantomJS to read the value.
  meta.foundation-mq-small {
    font-family: "/" + unquote($small-only) + "/";
    width: lower-bound($small-range);
  }

  meta.foundation-mq-medium {
    font-family: "/" + unquote($medium-only) + "/";
    width: lower-bound($medium-range);
  }

  meta.foundation-mq-large {
    font-family: "/" + unquote($large-up) + "/";
    width: lower-bound($large-range);
  }

  meta.foundation-mq-xlarge {
    font-family: "/" + unquote($xlarge-up) + "/";
    width: lower-bound($xlarge-range);
  }

  meta.foundation-mq-xxlarge {
    font-family: "/" + unquote($xxlarge-up) + "/";
    width: lower-bound($xxlarge-range);
  }

  @if $include-html-global-classes {

    // Set box-sizing globally to handle padding and border widths
    *,
    *:before,
    *:after {
      @include box-sizing(border-box);
    }

    html,
    body { font-size: $base-font-size; }

    // Default body styles
    body {
      background: $body-bg;
      color: $body-font-color;
      padding: 0;
      margin: 0;
      font-family: $body-font-family;
      font-weight: $body-font-weight;
      font-style: $body-font-style;
      line-height: 1; // Set to $base-line-height to take on browser default of 150%
      position: relative;
      cursor: $cursor-default-value;
    }

  a:hover { cursor: $cursor-pointer-value; }

    // Grid Defaults to get images and embeds to work properly
    img,
    object,
    embed { max-width: 100%; height: auto; }

    object,
    embed { height: 100%; }
    img { -ms-interpolation-mode: bicubic; }

    #map_canvas,
    .map_canvas {
      img,
      embed,
      object { max-width: none !important;
      }
    }

    // Miscellaneous useful HTML classes
    .left   { float: left !important; }
    .right  { float: right !important; }
    .clearfix     { @include clearfix; }
    .text-left    { text-align: left !important; }
    .text-right   { text-align: right !important; }
    .text-center  { text-align: center !important; }
    .text-justify { text-align: justify !important; }
    .hide         { display: none; }

    // Font smoothing
    // Antialiased font smoothing works best for light text on a dark background.
    // Apply to single elements instead of globally to body.
    // Note this only applies to webkit-based desktop browsers on the Mac.
    .antialiased { -webkit-font-smoothing: antialiased; }

    // Get rid of gap under images by making them display: inline-block; by default
    img {
      display: inline-block;
      vertical-align: middle;
    }

    //
    // Global resets for forms
    //

    // Make sure textarea takes on height automatically
    textarea { height: auto; min-height: 50px; }

    // Make select elements 100% width by default
    select { width: 100%; }
  }
}