VW Starter Kit

The VW Starter Kit quickly sets you up to create dynamically-resizing, responsive websites (using the vw, or viewport width, CSS unit).

Getting Started

• Add the _vw-starter.scss SASS file to your project.
• In _vw-starter.scss, set your breakpoints, layout widths, and base font size in the variables section.

	$base-font-size: 16px;

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

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

Usage

There are a couple different ways you can use VWs in your project.

Option 1: Apply the vw-base mixin to the root element. Then, in your CSS, set your style measurements (font-size, padding, margin, etc.) for all other elements using the px2rem() function.

	html {
		@include vw-base;
	}

	h1 {
		font-size: px2rem(48);
		margin: px2rem(30) 0;
	}

Option 2: To affect individual components only, apply the vw-base mixin to the component container element. Then, use ems and the px2em() function to resize all component elements.

	header {
		@include vw-base;

		h1 {
			font-size: px2em(48);
			margin: px2em(30, 48) 0;
		}

		h2 {
			font-size: px2em(36);
		}
	}

Setting minimum and maximum font sizes

To avoid text that gets too small or expands too large, you can set min and max font sizes using the font-size-breakpoint() function.

Example:

	h2 {
		font-size: px2em(16);

		// when the text scales down to 12px, set a fixed font-size of 12px on desktop
		@media screen and (max-width: font-size-breakpoint(12px, $desktop-layout, 16px)) and (min-width: $desktop-min) {
			font-size: 12px;
		}

		// when the text scales up to 20px, set a fixed font-size of 20px on tablet
		@media screen and (max-width: $tablet-max) and (min-width: font-size-breakpoint(20px, $tablet-layout, 16px)) {
			font-size: 20px;
		}
	}

VW Quirks & Fixes

Body Width Bug Fix

In many browsers, 100vw is not equivalent to 100% on the element--the scroll bars are taken into account for % but not for vws. The relatively easy fix below forces to be 100vw wide and is included, by default, in the vw-base mixin. If 100vw is larger than 100% it applies a negative margin to center the element. The only caveat is that a little bit of your page will be trimmed on the sides.

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

To disable the fix in the vw-base mixin (for e.g., if you're applying vw-base to components, rather than to the element) pass a value of false to the mixin:

	html {
		@include vw-base(false);
	}

####Print Stylesheets

VWs are interpreted as 0px when you print which renders elements invisible. To avoid undesirable styling, keep all vw styles within @media screen blocks.

Style for desktop first, then use @media screen to override your styles for tablet and mobile.

Browser Compatibility

IE9+, Firefox, Chrome, Safari, iOS, Android 4.4+