Flexbox Responsive Off-Canvas Layout

dabblet.css

/* Flexbox Responsive Off-Canvas Layout */
body, html { width: 100%; height: 100%; padding: 0; margin: 0; }

#wrapper { display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical;
	height: 100%; width: 100%;
}
#fbox { display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; 
	width: 100%; height: 90%;
	padding: 0; margin: 0;
}

#left { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1;
	background-color: darkorange;
	padding: 1em; margin: 0;
}
#main { -webkit-box-flex: 2; -moz-box-flex: 2; box-flex: 2;
	background-color: lightgreen;
	padding: 1em; margin: 0;
}
#right { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1;
	background-color: lightblue;
	padding: 1em; margin: 0;
}
#footer { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1;
	background-color: gray;
	height: 10%; width: 100%;
	padding: 0em; margin: 0;
}

/** 1 PANEL **/ #right, #left { display: none; }
/** 2 PANELS (-R) **/ @media (min-width: 41em) { #left { display: box; } }
/** 3 PANELS **/ @media (min-width: 61em) { #right, #left { display: box; } }

dabblet.html

<div id="wrapper">
	<div id="fbox">
		<div id="left">
			
		</div>
		<div id="main">
			
		</div>
		<div id="right">
			
		</div>
	</div>
	<div id="footer">
		
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"150","seethrough":"1","prefixfree":"1","page":"result"}