Settings

The settings file have different variables with their default value to be used and customized. Uncomment a variable you want to use and change it's value.

Variables

$include-html-classes: true; // Include basic html rules.
$include-xl-html-grid-classes: false; // Want to include extra large media queries and classes ?

$base-font-size: 100%; // Set base font size
$base-line-height: 1.5; // Set base line height

$total-columns: 12; // Set column count

// Font Families
$font-family-sans-serif: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
$font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
$font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;

// Set default color, font-family, weight and style
$body-font-color: #222;
$body-font-family: $font-family-sans-serif;
$body-font-weight: normal;
$body-font-style: normal;

// RTL Support
$text-direction: ltr;
$default-float: left;
$opposite-direction: right;

$column-gutter: rem-calc(30); // Set gutter size

// Set breakpoints
$small-breakpoint:  em-calc(640);
$medium-breakpoint: em-calc(1024);
$large-breakpoint:  em-calc(1440);
$xlarge-breakpoint: em-calc(1920);

// Set breakpoint ranges
$small-range:   (0, $small-breakpoint);
$medium-range:  ($small-breakpoint  + em-calc(1), $medium-breakpoint);
$large-range:   ($medium-breakpoint + em-calc(1), $large-breakpoint);
$xlarge-range:  ($large-breakpoint  + em-calc(1), $xlarge-breakpoint);
$xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999));

$screen: "only screen";

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

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

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

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

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

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

$retina: (
  "#{$screen} and (-webkit-min-device-pixel-ratio: 2)",
  "#{$screen} and (min--moz-device-pixel-ratio: 2)",
  "#{$screen} and (-o-min-device-pixel-ratio: 2/1)",
  "#{$screen} and (min-device-pixel-ratio: 2)",
  "#{$screen} and (min-resolution: 192dpi)",
  "#{$screen} and (min-resolution: 2dppx)"
);