_vw-starter.scss

//
// VW STARTER KIT
// https://github.com/hemminger8/vw-starter-kit
//

// ----------------------------------------------------------------------------
//
//   Variables
//
//   Set the variables below to match your Photoshop file widths (in pixels) and to specify breakpoints based on browser window size.
//
// ---------------------------------------------------------------------------- 

	// base font size must be in pixels!!!
	$root-font-size-constant: 16px !default;

	// layouts -- the pixel width of the Photoshop file for each layout
	$desktop-layout:	1250px !default;
	$tablet-layout:		640px !default;
	$mobile-layout:		320px !default;

	// min max breakpoints -- the browser window size at which the layout should change
	$desktop-max: 		1250px !default;
	$desktop-min: 		900px !default;
	$tablet-max: 		899px !default;
	$tablet-min: 		601px !default;
	$mobile-max: 		600px !default;

// ----------------------------------------------------------------------------
//
//   strip-units() : convert 14px/14em/etc to (int) 14
//
// ----------------------------------------------------------------------------

@function strip-units($number) {

	@if ($number == null) {

		@return null;

	}

	@return $number / ($number * 0 + 1);
}

// ----------------------------------------------------------------------------
//
//   px2rem() : convert from pixels to rems
//
// ----------------------------------------------------------------------------

@function px2rem($pixels) {

	$pixels                    : strip-units($pixels);
	$unitless-base-font-size   : strip-units($root-font-size-constant);

	@return ($pixels/$unitless-base-font-size)*1rem;
}


// ----------------------------------------------------------------------------
//
//   px2em() : convert from pixels to ems, based on the context (inherited font-size in pixels)
//
// ----------------------------------------------------------------------------

@function px2em($pixels, $context: $root-font-size-constant) {

	$pixels    : strip-units($pixels);
	$context   : strip-units($context);

	@return ($pixels/$context)*1em;
}

// ----------------------------------------------------------------------------
//
//   px2vw() : used to calculate vw font size so as to match Photoshop (or similar) design files.
//
//   Example usage:
//
//		$root-font-size-constant: 16px;
//
//		html {
//			font-size: $root-font-size-constant;
//
//			// set font-size to scale until reach max width of the site
//			@media screen and (max-width: $desktop-max) {
//				font-size: px2vw($root-font-size-constant, $desktop-layout);
//			}
//
//			// font size reset to 16px at the tablet design layout width
//			@media screen and (max-width: $tablet-max) {
//				font-size: px2vw($root-font-size-constant, $tablet-layout);
//			}
//
//			// font size reset to 16px at the mobile design layout width
//			@media screen and (max-width: $mobile-max) {
//				font-size: px2vw($root-font-size-constant, $mobile-layout);
//			}
//		}
//
// ----------------------------------------------------------------------------

@function px2vw($font-size-px, $layout-size-px) {

	$font-size-px     : strip-units($font-size-px);
	$layout-size-px   : strip-units($layout-size-px);

	@return ($font-size-px / $layout-size-px) * 100vw;
}

// ----------------------------------------------------------------------------
//
//	vw-base() - set base font-size values in vws for each breakpoint
//
// ----------------------------------------------------------------------------

@mixin vw-base($body-width-fix: true) {

	@if ($body-width-fix) {
		@media screen {
			width: 100vw;
			margin-left: calc((100% - 100vw) / 2);
			overflow-x: hidden;
		}
	}

	font-size: $root-font-size-constant * ($desktop-max/$desktop-layout);

	// set font-size to scale until reach max width of the site
	@media screen and (max-width: $desktop-max) {
		font-size: px2vw($root-font-size-constant, $desktop-layout);
	}

	// font size reset to 16px at the tablet design layout width
	@media screen and (max-width: $tablet-max) {
		font-size: px2vw($root-font-size-constant, $tablet-layout);
	}

	// font size reset to 16px at the mobile design layout width
	@media screen and (max-width: $mobile-max) {
		font-size: px2vw($root-font-size-constant, $mobile-layout);
	}
	
	// because of possible rounding, we make sure the font-size is correct at the layout sizes
	@media screen and (width: $layout-desktop) and (min-width: $desktop-min) and (max-width: $desktop-max),
	screen and (width: $layout-tablet) and (min-width: $tablet-min) and (max-width: $tablet-max),
	screen and (width: $layout-mobile) and (max-width: $mobile-max) {
		font-size: $root-font-size-constant;
	}
}

// ----------------------------------------------------------------------------
//
//	font-size-breakpoint() - calculate min/max font size breakpoints (for specific components)
//
//	Example usage:
//
//		blockquote {
//			font-size: px2rem(17); // scaling down from a base size of 17px
//
//			// when font-size shrinks to 12px, set the CSS to 12px to stop
//			// further scaling
//			@media (max-width: font-size-breakpoint(12px, $desktop-layout, 17px)) {
//				font-size: 12px;
//			}
//		}
//
// ----------------------------------------------------------------------------

@function font-size-breakpoint($font-size-limit-px, $layout-size-px, $font-size-px: $root-font-size-constant) {

	@return (($font-size-limit-px / $font-size-px) * $layout-size-px);
}