Skip to content

Instantly share code, notes, and snippets.

/index.html

Created May 26, 2016 19:36
Show Gist options
  • Save anonymous/9a507d8f1fff38251bfe3dc34aca3fe2 to your computer and use it in GitHub Desktop.
Save anonymous/9a507d8f1fff38251bfe3dc34aca3fe2 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/wogewazazu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/lodash/lodash/3.0.1/lodash.min.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.container {
background-color: #ddd;
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 15px;
}
.container-fluid {
background-color: #ddd;
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 15px;
}
.row-text{
margin-top: 15px;
margin-left: 15px;
}
[class*="col-"] {
background-color: #eee;
background-color: rgba(86,61,124,.15);
text-align: center;
}
.col-text {
background-color: #cccc;
}
</style>
</head>
<body>
<div class="container">
<div class="container-text"></div>
<div class="row">
<div class="row-text"></div>
<div class="col-xs-12 column">
<div class='col-text'></div>
</div>
</div>
<div class="row">
<div class="row-text"></div>
<div class="col-xs-6 column">
<div class='col-text'></div>
</div>
<div class="col-xs-6 column">
<div class='col-text'></div>
</div>
</div>
<div class="row">
<div class="row-text"></div>
<div class="col-xs-4 column">
<div class='col-text'></div>
</div>
<div class="col-xs-4 column">
<div class='col-text'></div>
</div>
<div class="col-xs-4 column">
<div class='col-text'></div>
</div>
</div>
<div class="row">
<div class="row-text"></div>
<div class="col-xs-3 column">
<div class='col-text'></div>
</div>
<div class="col-xs-3 column">
<div class='col-text'></div>
</div>
<div class="col-xs-3 column">
<div class='col-text'></div>
</div>
<div class="col-xs-3 column">
<div class='col-text'></div>
</div>
</div>
<div class="row">
<div class="row-text"></div>
<div class="col-xs-2 column">
<div class='col-text'></div>
</div>
<div class="col-xs-2 column">
<div class='col-text'></div>
</div>
<div class="col-xs-2 column">
<div class='col-text'></div>
</div>
<div class="col-xs-2 column">
<div class='col-text'></div>
</div>
<div class="col-xs-2 column">
<div class='col-text'></div>
</div>
<div class="col-xs-2 column">
<div class='col-text'></div>
</div>
</div>
<div class="row">
<div class="row-text"></div>
<div class="col-xs-1 column">
<div class='col-text'></div>
</div>
<div class="col-xs-1 column">
<div class='col-text'></div>
</div>
<div class="col-xs-1 column">
<div class='col-text'></div>
</div>
<div class="col-xs-1 column">
<div class='col-text'></div>
</div>
<div class="col-xs-1 column">
<div class='col-text'></div>
</div>
<div class="col-xs-1 column">
<div class='col-text'></div>
</div>
<div class="col-xs-1 column">
<div class='col-text'></div>
</div>
<div class="col-xs-1 column">
<div class='col-text'></div>
</div>
<div class="col-xs-1 column">
<div class='col-text'></div>
</div>
<div class="col-xs-1 column">
<div class='col-text'></div>
</div>
<div class="col-xs-1 column">
<div class='col-text'></div>
</div>
<div class="col-xs-1 column">
<div class='col-text'></div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="container-fluid-text"></div>
<div class="row">
<div class="row-text"></div>
<div class="col-xs-12 column">
<div class='col-text'></div>
</div>
</div>
<div class="row">
<div class="row-text"></div>
<div class="col-xs-6 column">
<div class='col-text'></div>
</div>
<div class="col-xs-6 column">
<div class='col-text'></div>
</div>
</div>
<div class="row">
<div class="row-text"></div>
<div class="col-xs-4 column">
<div class='col-text'></div>
</div>
<div class="col-xs-4 column">
<div class='col-text'></div>
</div>
<div class="col-xs-4 column">
<div class='col-text'></div>
</div>
</div>
<div class="row">
<div class="row-text"></div>
<div class="col-xs-3 column">
<div class='col-text'></div>
</div>
<div class="col-xs-3 column">
<div class='col-text'></div>
</div>
<div class="col-xs-3 column">
<div class='col-text'></div>
</div>
<div class="col-xs-3 column">
<div class='col-text'></div>
</div>
</div>
<div class="row">
<div class="row-text"></div>
<div class="col-xs-2 column">
<div class='col-text'></div>
</div>
<div class="col-xs-2 column">
<div class='col-text'></div>
</div>
<div class="col-xs-2 column">
<div class='col-text'></div>
</div>
<div class="col-xs-2 column">
<div class='col-text'></div>
</div>
<div class="col-xs-2 column">
<div class='col-text'></div>
</div>
<div class="col-xs-2 column">
<div class='col-text'></div>
</div>
</div>
<div class="row">
<div class="row-text"></div>
<div class="col-xs-1 column">
<div class='col-text'></div>
</div>
<div class="col-xs-1 column">
<div class='col-text'></div>
</div>
<div class="col-xs-1 column">
<div class='col-text'></div>
</div>
<div class="col-xs-1 column">
<div class='col-text'></div>
</div>
<div class="col-xs-1 column">
<div class='col-text'></div>
</div>
<div class="col-xs-1 column">
<div class='col-text'></div>
</div>
<div class="col-xs-1 column">
<div class='col-text'></div>
</div>
<div class="col-xs-1 column">
<div class='col-text'></div>
</div>
<div class="col-xs-1 column">
<div class='col-text'></div>
</div>
<div class="col-xs-1 column">
<div class='col-text'></div>
</div>
<div class="col-xs-1 column">
<div class='col-text'></div>
</div>
<div class="col-xs-1 column">
<div class='col-text'></div>
</div>
</div>
</div>
<script id="jsbin-javascript">
// Container elements
const container = document.getElementsByClassName('container')[0];
const containerFluid = document.getElementsByClassName('container-fluid')[0];
const containerText = document.getElementsByClassName('container-text')[0];
const containerFluidText = document.getElementsByClassName('container-fluid-text')[0];
// Row elements
const rowText = document.getElementsByClassName('row-text');
// Column elements
const cols = document.getElementsByClassName('column');
// Set container text
containerText.innerText = `Width of container is ${container.offsetWidth}px`;
containerFluidText.innerText = `Width of container-fluid is ${containerFluid.offsetWidth}px`;
// Set row text
_.each(rowText, (row, index) => row.innerText = `Row ${index + 1}`);
// Set column text
_.each(cols, col => {
const className = col.classList[0]
_.each(col.childNodes, child => {
child.innerText = `${className}\n${child.offsetWidth}px`
})
})
</script>
<script id="jsbin-source-css" type="text/css">.container {
background-color: #ddd;
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 15px;
}
.container-fluid {
background-color: #ddd;
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 15px;
}
.row-text{
margin-top: 15px;
margin-left: 15px;
}
[class*="col-"] {
background-color: #eee;
background-color: rgba(86,61,124,.15);
text-align: center;
}
.col-text {
background-color: #cccc;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">// Container elements
const container = document.getElementsByClassName('container')[0];
const containerFluid = document.getElementsByClassName('container-fluid')[0];
const containerText = document.getElementsByClassName('container-text')[0];
const containerFluidText = document.getElementsByClassName('container-fluid-text')[0];
// Row elements
const rowText = document.getElementsByClassName('row-text');
// Column elements
const cols = document.getElementsByClassName('column');
// Set container text
containerText.innerText = `Width of container is ${container.offsetWidth}px`;
containerFluidText.innerText = `Width of container-fluid is ${containerFluid.offsetWidth}px`;
// Set row text
_.each(rowText, (row, index) => row.innerText = `Row ${index + 1}`);
// Set column text
_.each(cols, col => {
const className = col.classList[0]
_.each(col.childNodes, child => {
child.innerText = `${className}\n${child.offsetWidth}px`
})
})</script></body>
</html>
Raw
jsbin.wogewazazu.css
.container {
background-color: #ddd;
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 15px;
}
.container-fluid {
background-color: #ddd;
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 15px;
}
.row-text{
margin-top: 15px;
margin-left: 15px;
}
[class*="col-"] {
background-color: #eee;
background-color: rgba(86,61,124,.15);
text-align: center;
}
.col-text {
background-color: #cccc;
}
Raw
jsbin.wogewazazu.js
// Container elements
const container = document.getElementsByClassName('container')[0];
const containerFluid = document.getElementsByClassName('container-fluid')[0];
const containerText = document.getElementsByClassName('container-text')[0];
const containerFluidText = document.getElementsByClassName('container-fluid-text')[0];
// Row elements
const rowText = document.getElementsByClassName('row-text');
// Column elements
const cols = document.getElementsByClassName('column');
// Set container text
containerText.innerText = `Width of container is ${container.offsetWidth}px`;
containerFluidText.innerText = `Width of container-fluid is ${containerFluid.offsetWidth}px`;
// Set row text
_.each(rowText, (row, index) => row.innerText = `Row ${index + 1}`);
// Set column text
_.each(cols, col => {
const className = col.classList[0]
_.each(col.childNodes, child => {
child.innerText = `${className}\n${child.offsetWidth}px`
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment