Ratstail91/example.html

## example.html
<!DOCTYPE html>
<html>
	<head>
		<!-- device settings -->
		<meta charset = "UTF-8" />
		<meta name="Content-Type" content="text/html" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

		<!-- link the structure file -->
		<link rel="stylesheet" href="structure.css" />

		<title>Hello Title</title>
	</head>
	<body>
		<!-- when working in React, the content is usually inserted into the root tag -->
		<div id="root">
			<!-- each component is wrapped within a single .page div -->
			<!-- while the body and root are specified to have a specific size, .page can become larger than that due to its contents -->
			<div class="page">
				<!-- the central panel creates a nice central area, which contains most of the content of the page, although other panels like a navbar can go outside of it -->
				<!-- panels are just logical divisions within the page's structure, you can manually overwrite their flex style attribute for different effects as needed -->
				<div class="central panel">
					<!-- lets create a nice 3x2 flexbox grid using the table structure -->
					<div class="table">
						<div class="row">
							<div class="col">Top Left</div>
							<div class="col">Top Middle</div>
							<div class="col">Top Right</div>
						</div>
						<div class="row">
							<div class="col">Bottom Left</div>
							<div class="col">Bottem Middle</div>
							<div class="col">Bottom Right</div>
						</div>
					</div>

					<!-- lets say, we also want to show the current time at the bottom of the page, but mobile screens are too small too small to show the full sentence -->
					<!-- this will hide the superfluous content unless there's enough space to read it -->
					<p class="text centered"><span class="mobile hide">The time is </span>12:00pm</p>
				</div>
			</div>
		</div>
	</body>
</html>

## structure.css
/* You need the following snippet of HTML in your <head> element for this to work correctly

	<!-- device settings -->
	<meta charset = "UTF-8" />
	<meta name="Content-Type" content="text/html" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

*/

/* global defaults */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body, #root {
	min-width: 100%;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: auto;
}

/* central display */
.central {
	padding: 0 10px;
	margin: 0 20%;
}

@media screen and (max-width: 768px) {
	.central {
		margin: 0;
	}
}

/* components */
.page {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.panel {
	flex: 0 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-bottom: 1em;
}

.centered {
	/* No, you don't need "display: flex" here. */
	justify-content: center;
}

.middle {
	display: flex; /* But you do need it here */
	align-items: center;
}

.text.left {
	text-align: left;
}

.text.centered {
	text-align: center;
}

.text.right {
	text-align: right;
}

/* flexbox layout tables */
.table {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.table .row {
	flex: 1;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

@media screen and (max-width: 480px) {
	.table .row {
		flex-direction: column;
	}
}

@media screen and (max-width: 768px) {
	.table .row.tabletCollapse {
		flex-direction: column;
	}
}

.table .row .col {
	flex: 1 1 1%;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.table .row .col.double {
	flex: 2 1 2%;
}

.table .row .col.half {
	flex: 0.5 1 0.5%;
}

.table .row .col.quarter {
	flex: 0.25 1 0.25%;
}

@media screen and (max-width: 480px) {
	.table .row .col.double {
		flex: 2 1 2.5%;
	}
}

.table.noCollapse .row, .table .row.noCollapse {
	flex-direction: row;
}

/* mobile control */
.mobile.show {
	display: none;
}

.mobile.show.col {
	display: none;
}

@media screen and (max-width: 480px) {
	.mobile.show {
		display: flex;
	}

	.mobile.hide {
		display: none;
	}

	/* hybrid of table and mobile control */
	.mobile.hide.col {
		display: none;
	}

	.mobile.show.col {
		display: flex;
	}

	.mobile.col.half {
		flex: 0.5;
	}
}

.tablet.show {
	display: none;
}

.tablet.show.col {
	display: none;
}

@media screen and (max-width: 768px) {
	.tablet.show {
		display: flex;
	}

	.tablet.hide {
		display: none;
	}

	/* hybrid of table and tablet control */
	.tablet.hide.col {
		display: none;
	}

	.tablet.show.col {
		display: flex;
	}

	.tablet.col.half {
		flex: 0.5;
	}
}
	<!DOCTYPE html>
	<html>
	<head>
	<!-- device settings -->
	<meta charset = "UTF-8" />
	<meta name="Content-Type" content="text/html" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<!-- link the structure file -->
	<link rel="stylesheet" href="structure.css" />

	<title>Hello Title</title>
	</head>
	<body>
	<!-- when working in React, the content is usually inserted into the root tag -->
	<div id="root">
	<!-- each component is wrapped within a single .page div -->
	<!-- while the body and root are specified to have a specific size, .page can become larger than that due to its contents -->
	<div class="page">
	<!-- the central panel creates a nice central area, which contains most of the content of the page, although other panels like a navbar can go outside of it -->
	<!-- panels are just logical divisions within the page's structure, you can manually overwrite their flex style attribute for different effects as needed -->
	<div class="central panel">
	<!-- lets create a nice 3x2 flexbox grid using the table structure -->
	<div class="table">
	<div class="row">
	<div class="col">Top Left</div>
	<div class="col">Top Middle</div>
	<div class="col">Top Right</div>
	</div>
	<div class="row">
	<div class="col">Bottom Left</div>
	<div class="col">Bottem Middle</div>
	<div class="col">Bottom Right</div>
	</div>
	</div>

	<!-- lets say, we also want to show the current time at the bottom of the page, but mobile screens are too small too small to show the full sentence -->
	<!-- this will hide the superfluous content unless there's enough space to read it -->
	<p class="text centered"><span class="mobile hide">The time is </span>12:00pm</p>
	</div>
	</div>
	</div>
	</body>
	</html>
	/* You need the following snippet of HTML in your <head> element for this to work correctly

	<!-- device settings -->
	<meta charset = "UTF-8" />
	<meta name="Content-Type" content="text/html" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	*/

	/* global defaults */
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body, #root {
	min-width: 100%;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: auto;
	}

	/* central display */
	.central {
	padding: 0 10px;
	margin: 0 20%;
	}

	@media screen and (max-width: 768px) {
	.central {
	margin: 0;
	}
	}

	/* components */
	.page {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	}

	.panel {
	flex: 0 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-bottom: 1em;
	}

	.centered {
	/* No, you don't need "display: flex" here. */
	justify-content: center;
	}

	.middle {
	display: flex; /* But you do need it here */
	align-items: center;
	}

	.text.left {
	text-align: left;
	}

	.text.centered {
	text-align: center;
	}

	.text.right {
	text-align: right;
	}

	/* flexbox layout tables */
	.table {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	}

	.table .row {
	flex: 1;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	}

	@media screen and (max-width: 480px) {
	.table .row {
	flex-direction: column;
	}
	}

	@media screen and (max-width: 768px) {
	.table .row.tabletCollapse {
	flex-direction: column;
	}
	}

	.table .row .col {
	flex: 1 1 1%;
	display: flex;
	flex-direction: column;
	min-width: 0;
	}

	.table .row .col.double {
	flex: 2 1 2%;
	}

	.table .row .col.half {
	flex: 0.5 1 0.5%;
	}

	.table .row .col.quarter {
	flex: 0.25 1 0.25%;
	}

	@media screen and (max-width: 480px) {
	.table .row .col.double {
	flex: 2 1 2.5%;
	}
	}

	.table.noCollapse .row, .table .row.noCollapse {
	flex-direction: row;
	}

	/* mobile control */
	.mobile.show {
	display: none;
	}

	.mobile.show.col {
	display: none;
	}

	@media screen and (max-width: 480px) {
	.mobile.show {
	display: flex;
	}

	.mobile.hide {
	display: none;
	}

	/* hybrid of table and mobile control */
	.mobile.hide.col {
	display: none;
	}

	.mobile.show.col {
	display: flex;
	}

	.mobile.col.half {
	flex: 0.5;
	}
	}

	.tablet.show {
	display: none;
	}

	.tablet.show.col {
	display: none;
	}

	@media screen and (max-width: 768px) {
	.tablet.show {
	display: flex;
	}

	.tablet.hide {
	display: none;
	}

	/* hybrid of table and tablet control */
	.tablet.hide.col {
	display: none;
	}

	.tablet.show.col {
	display: flex;
	}

	.tablet.col.half {
	flex: 0.5;
	}
	}