Ratstail91 · May 22, 2023 08:13
diff --git a/example.html b/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>
diff --git a/structure.css b/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;
	}
	}