Skip to content

Instantly share code, notes, and snippets.

@Ratstail91
Last active May 22, 2023 08:13
Show Gist options
  • Save Ratstail91/000e617c438cb479c2c9a68fdfb66739 to your computer and use it in GitHub Desktop.
Save Ratstail91/000e617c438cb479c2c9a68fdfb66739 to your computer and use it in GitHub Desktop.
<!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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment