Skip to content

Instantly share code, notes, and snippets.

@noisemaster

noisemaster/index.html

Created February 14, 2018 04:28
Show Gist options
  • Save noisemaster/2798a2f82d465c9937b0adb043051023 to your computer and use it in GitHub Desktop.
Save noisemaster/2798a2f82d465c9937b0adb043051023 to your computer and use it in GitHub Desktop.
Download ZIP
Flexbox columned interface
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
body {
font-family: 'Roboto';
height: 100vh;
margin: 0;
}
section {
display: flex;
flex-flow: row;
flex: 1 1 auto;
}
header {
flex: 0 1 2em;
}
footer {
flex: 0 1 40px;
}
.modules {
display: flex;
overflow-x: auto;
width: calc(100% - 350px);
}
.chat {
width: 350px;
overflow-y: auto;
}
.con {
display: flex;
flex-flow: column;
height: 100%;
}
.box {
flex-shrink: 0;
background-color: salmon;
padding: 10px;
margin: 10px;
width: 300px;
}
</style>
<script>
window.onload = function () {
document.getElementById("add").onclick = function () {
const elem = document.getElementsByClassName('modules')[0];
console.log(elem);
elem.innerHTML += '<div class="box"><h2>Test</h2></div>'
}
}
</script>
<title>Column test</title>
</head>
<body>
<div class="con">
<header>
<h1>Site</h1>
<button id="add" onclick="addBox"> add box </button>
</header>
<section>
<div class="modules">
<div class="box"><h2>Test</h2></div>
<div class="box"><h2>Test</h2></div>
<div class="box"><h2>Test</h2></div>
</div>
<div class="chat">
<div>
<ul>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
<li>Chat Message</li>
</ul>
</div>
</div>
</section>
<footer>
<small>timeline and other fun</small>
</footer>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment