Skip to content

Instantly share code, notes, and snippets.

@opsb

opsb/index.html

Last active December 8, 2016 11:09
Show Gist options
  • Save opsb/e19a43b7abe8afc2ffabf8240c95e290 to your computer and use it in GitHub Desktop.
Save opsb/e19a43b7abe8afc2ffabf8240c95e290 to your computer and use it in GitHub Desktop.
Download ZIP
Flexbox spike
Raw
index.html
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ns-autogrow/1.1.6/jquery.ns-autogrow.min.js"></script>
<script>
$(document).ready(function() {
$('.new-message textarea').autogrow({vertical: true, horizontal: false});
});
</script>
<style>
#container {
display: flex;
flex-direction: row;
}
.column {
flex-box: column;
}
.feeds-nav-panel {
flex-shrink: 3;
width: 250px;
background-color: #efefff;
}
.conversations-list-panel {
flex-shrink: 2;
width: 450px;
background-color: #efffef;
}
.conversation-panel {
flex-shrink: 1;
flex-grow: 1;
background-color: #ffefef;
}
</style>
</head>
<body>
<div id="container">
<div class="feeds-nav-panel column">
<div class="feeds-nav-panel__header">
<h4>Feeds</h4>
</div>
<div class="feeds-nav-panel__list">
<ul>
<script>for(var i = 0; i < 100; i++) { document.write("<li>Feed " + i + "</li>"); }</script>
</ul>
</div>
</div>
<div class="conversations-list-panel column">
<script>for(var i = 0; i < 100; i++) { document.write("<li>Conversation " + i + "</li>"); }</script>
</div>
<div class="conversation-panel column">
<div class="messages">
<ul>
<script>for(var i = 0; i < 100; i++) { document.write("<li>Message " + i + "</li>"); }</script>
</ul>
</div>
<div class="new-message">
<textarea></textarea>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment