Skip to content

Instantly share code, notes, and snippets.

/index.html

Created August 31, 2016 13:36
Show Gist options
  • Save anonymous/4726ddada65a182e7aa5bc6cb73d8b58 to your computer and use it in GitHub Desktop.
Save anonymous/4726ddada65a182e7aa5bc6cb73d8b58 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/xixisi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.tab-container {
padding: 15px;
}
.tab-container .dots-container {
position: absolute;
width: 129px;
height: 179px;
padding: 15px;
z-index: 10;
}
.tab-container .dots-container .dot-container {
position: absolute;
width: 129px;
height: 179px;
}
.tab-container .dots-container .dot {
position: absolute;
/* top: 37.5%;
left: 20%; */
font-size: 10px;
color: white;
text-align: center;
border-radius: 50%;
width: 15px;
height: 15px;
background: red;
position: relative;
transform: translate(-50%, -50%);
}
.tab-container .dots-container .dot--fret-1-of-3 {
top: 25%;
}
.tab-container .dots-container .dot--string-2-of-3 {
left: 50%;
}
.tab-container .dots-container .dot--fret-1-of-4 {
top: 16.66667%;
}
.tab-container .dots-container .dot--string-2-of-4 {
left: 33.33333%;
}
.tab-container .dots-container .dot--fret-1-of-5 {
top: 12.5%;
}
.tab-container .dots-container .dot--string-2-of-5 {
left: 25%;
}
.tab-container .dots-container .dot--fret-1-of-6 {
top: 10%;
}
.tab-container .dots-container .dot--string-2-of-6 {
left: 20%;
}
.tab-container .dots-container .dot--fret-2-of-3 {
top: 75%;
}
.tab-container .dots-container .dot--string-3-of-3 {
left: 100%;
}
.tab-container .dots-container .dot--fret-2-of-4 {
top: 50.0%;
}
.tab-container .dots-container .dot--string-3-of-4 {
left: 66.66667%;
}
.tab-container .dots-container .dot--fret-2-of-5 {
top: 37.5%;
}
.tab-container .dots-container .dot--string-3-of-5 {
left: 50%;
}
.tab-container .dots-container .dot--fret-2-of-6 {
top: 30%;
}
.tab-container .dots-container .dot--string-3-of-6 {
left: 40%;
}
.tab-container .dots-container .dot--fret-3-of-4 {
top: 83.33333%;
}
.tab-container .dots-container .dot--string-4-of-4 {
left: 100%;
}
.tab-container .dots-container .dot--fret-3-of-5 {
top: 62.5%;
}
.tab-container .dots-container .dot--string-4-of-5 {
left: 75%;
}
.tab-container .dots-container .dot--fret-3-of-6 {
top: 50%;
}
.tab-container .dots-container .dot--string-4-of-6 {
left: 60%;
}
.tab-container .dots-container .dot--fret-4-of-5 {
top: 87.5%;
}
.tab-container .dots-container .dot--string-5-of-5 {
left: 100%;
}
.tab-container .dots-container .dot--fret-4-of-6 {
top: 70%;
}
.tab-container .dots-container .dot--string-5-of-6 {
left: 80%;
}
.tab-container .dots-container .dot--fret-5-of-6 {
top: 90%;
}
.tab-container .dots-container .dot--string-6-of-6 {
left: 100%;
}
.tab-container .table-container {
padding: 15px;
}
.tab-container .table-container .table {
width: 125px;
height: 175px;
border: 2px solid black;
border-radius: 10px;
}
.tab-container .table-container .table .lines-container {
position: absolute;
width: 125px;
height: 175px;
}
.tab-container .table-container .table .lines-container .line {
border: solid black;
border-width: 2px 2px 0 0;
}
.tab-container .table-container .table .lines-container .line.no-visible {
opacity: 0;
border-width: 0;
}
.tab-container .table-container .table .lines-container .vertical-lines {
float: left;
display: flex;
height: 100%;
width: 100%;
justify-content: space-between;
flex-direction: row;
align-items: strech;
}
.tab-container .table-container .table .lines-container .horizontal-lines {
float: right;
display: flex;
height: 100%;
width: 100%;
justify-content: space-between;
flex-direction: column;
align-items: strech;
}
</style>
</head>
<body>
<div class="tab-container">
<div class="dots-container">
<!--div class="dot dot--fret-2-of-5 dot--string-1-of-6"></div-->
<div class="dot-container">
<div class="dot dot--fret-3-of-5 dot--string-1-of-6">1</div>
</div>
<div class="dot-container">
<div class="dot dot--fret-2-of-5 dot--string-2-of-6">2</div>
</div>
<div class="dot-container">
<div class="dot dot--fret-3-of-5 dot--string-5-of-6">3</div>
</div>
<div class="dot-container">
<div class="dot dot--fret-3-of-5 dot--string-6-of-6">4</div>
</div>
</div>
<div class="table-container">
<div class="table">
<div class="lines-container">
<div class="vertical-lines">
<div class="vertical-line line no-visible"></div>
<div class="vertical-line line"></div>
<div class="vertical-line line"></div>
<div class="vertical-line line"></div>
<div class="vertical-line line"></div>
<div class="vertical-line line no-visible"></div>
</div>
</div>
<div class="lines-container">
<div class="horizontal-lines">
<div class="horizontal-line line no-visible"></div>
<div class="horizontal-line line"></div>
<div class="horizontal-line line"></div>
<div class="horizontal-line line"></div>
<div class="horizontal-line line no-visible"></div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-container">
<div class="dots-container">
<!--div class="dot dot--fret-2-of-5 dot--string-1-of-6"></div-->
<div class="dot-container">
<div class="dot dot--fret-2-of-5 dot--string-3-of-6">1</div>
</div>
<div class="dot-container">
<div class="dot dot--fret-2-of-5 dot--string-4-of-6">2</div>
</div>
<div class="dot-container">
<div class="dot dot--fret-2-of-5 dot--string-5-of-6">3</div>
</div>
</div>
<div class="table-container">
<div class="table">
<div class="lines-container">
<div class="vertical-lines">
<div class="vertical-line line no-visible"></div>
<div class="vertical-line line"></div>
<div class="vertical-line line"></div>
<div class="vertical-line line"></div>
<div class="vertical-line line"></div>
<div class="vertical-line line no-visible"></div>
</div>
</div>
<div class="lines-container">
<div class="horizontal-lines">
<div class="horizontal-line line no-visible"></div>
<div class="horizontal-line line"></div>
<div class="horizontal-line line"></div>
<div class="horizontal-line line"></div>
<div class="horizontal-line line no-visible"></div>
</div>
</div>
</div>
</div>
</div>
<p>banjo dude!!!</p>
<div class="tab-container">
<div class="dots-container">
<!--div class="dot dot--fret-2-of-5 dot--string-1-of-6"></div-->
<div class="dot-container">
<div class="dot dot--fret-2-of-5 dot--string-3-of-5">1</div>
</div>
<div class="dot-container">
<div class="dot dot--fret-2-of-5 dot--string-4-of-5">2</div>
</div>
<div class="dot-container">
<div class="dot dot--fret-2-of-5 dot--string-5-of-5">3</div>
</div>
</div>
<div class="table-container">
<div class="table">
<div class="lines-container">
<div class="vertical-lines">
<div class="vertical-line line no-visible"></div>
<div class="vertical-line line"></div>
<div class="vertical-line line"></div>
<div class="vertical-line line"></div>
<div class="vertical-line line no-visible"></div>
</div>
</div>
<div class="lines-container">
<div class="horizontal-lines">
<div class="horizontal-line line no-visible"></div>
<div class="horizontal-line line"></div>
<div class="horizontal-line line"></div>
<div class="horizontal-line line"></div>
<div class="horizontal-line line no-visible"></div>
</div>
</div>
</div>
</div>
</div>
<p>n fuckin ukelele ya!</p>
<div class="tab-container">
<div class="dots-container">
<!--div class="dot dot--fret-2-of-5 dot--string-1-of-6"></div-->
<div class="dot-container">
<div class="dot dot--fret-2-of-5 dot--string-2-of-4">1</div>
</div>
<div class="dot-container">
<div class="dot dot--fret-2-of-5 dot--string-3-of-4">2</div>
</div>
<div class="dot-container">
<div class="dot dot--fret-2-of-5 dot--string-4-of-4">3</div>
</div>
</div>
<div class="table-container">
<div class="table">
<div class="lines-container">
<div class="vertical-lines">
<div class="vertical-line line no-visible"></div>
<div class="vertical-line line"></div>
<div class="vertical-line line"></div>
<div class="vertical-line line no-visible"></div>
</div>
</div>
<div class="lines-container">
<div class="horizontal-lines">
<div class="horizontal-line line no-visible"></div>
<div class="horizontal-line line"></div>
<div class="horizontal-line line"></div>
<div class="horizontal-line line"></div>
<div class="horizontal-line line no-visible"></div>
</div>
</div>
</div>
</div>
</div>
<script id="jsbin-source-css" type="text/css">$chord-width: 125px;
$chord-height: 175px;
$line-width: 2px;
$chord-dot-width: 15px;
$chord-dot-height: 15px;
$chord-container-padding: 15px;
@mixin create-dot-positions ($fretClass: '.fret', $stringClass: '.string', $positions: 6) {
$positions: $positions - 1;
@for $i from 1 through $positions {
@for $y from $i through $positions {
//we dont want to generate 1-of-1
@if ($i+$y) != 2 {
#{$fretClass}-#{$i}-of-#{$y + 1} {
top: ($i / $y) * 100% - (0.5/$y) * 100%;
}
#{$stringClass}-#{$i + 1}-of-#{$y + 1} {
left: ($i / $y) * 100%;
}
}
}
}
}
.tab-container{
padding: $chord-container-padding;
.dots-container{
position: absolute;
width: $chord-width + ($line-width * 2);
height: $chord-height + ($line-width * 2);
padding: $chord-container-padding;
z-index: 10;
.dot-container{
position: absolute;
width: $chord-width + ($line-width * 2);
height: $chord-height + ($line-width * 2);
}
.dot{
position: absolute;
/* top: 37.5%;
left: 20%; */
font-size: 10px;
color: white;
text-align: center;
border-radius: 50%;
width: $chord-dot-width;
height: $chord-dot-height;
background: red;
position: relative;
transform: translate(-50%, -50%);
@include create-dot-positions('&--fret', '&--string', 6);
}
}
.table-container{
padding: $chord-container-padding;
.table{
width: $chord-width;
height: $chord-height;
border: $line-width solid black;
border-radius: 10px;
.lines-container{
position: absolute;
width: $chord-width;
height: $chord-height;
.line{
border: solid black;
border-width: $line-width $line-width 0 0;
&.no-visible{
opacity: 0;
border-width: 0;
}
}
.vertical-lines{
float:left;
display: flex;
height: 100%;
width: 100%;
//position: absolute;
justify-content: space-between;
flex-direction: row;
align-items: strech;
.vertical-line{
}
}
.horizontal-lines{
float:right;
display: flex;
height: 100%;
width: 100%;
//position: absolute;
justify-content: space-between;
flex-direction: column;
align-items: strech;
.horizontal-line{
}
}
}
}
}
}
</script>
</body>
</html>
Raw
jsbin.xixisi.css
.tab-container {
padding: 15px;
}
.tab-container .dots-container {
position: absolute;
width: 129px;
height: 179px;
padding: 15px;
z-index: 10;
}
.tab-container .dots-container .dot-container {
position: absolute;
width: 129px;
height: 179px;
}
.tab-container .dots-container .dot {
position: absolute;
/* top: 37.5%;
left: 20%; */
font-size: 10px;
color: white;
text-align: center;
border-radius: 50%;
width: 15px;
height: 15px;
background: red;
position: relative;
transform: translate(-50%, -50%);
}
.tab-container .dots-container .dot--fret-1-of-3 {
top: 25%;
}
.tab-container .dots-container .dot--string-2-of-3 {
left: 50%;
}
.tab-container .dots-container .dot--fret-1-of-4 {
top: 16.66667%;
}
.tab-container .dots-container .dot--string-2-of-4 {
left: 33.33333%;
}
.tab-container .dots-container .dot--fret-1-of-5 {
top: 12.5%;
}
.tab-container .dots-container .dot--string-2-of-5 {
left: 25%;
}
.tab-container .dots-container .dot--fret-1-of-6 {
top: 10%;
}
.tab-container .dots-container .dot--string-2-of-6 {
left: 20%;
}
.tab-container .dots-container .dot--fret-2-of-3 {
top: 75%;
}
.tab-container .dots-container .dot--string-3-of-3 {
left: 100%;
}
.tab-container .dots-container .dot--fret-2-of-4 {
top: 50.0%;
}
.tab-container .dots-container .dot--string-3-of-4 {
left: 66.66667%;
}
.tab-container .dots-container .dot--fret-2-of-5 {
top: 37.5%;
}
.tab-container .dots-container .dot--string-3-of-5 {
left: 50%;
}
.tab-container .dots-container .dot--fret-2-of-6 {
top: 30%;
}
.tab-container .dots-container .dot--string-3-of-6 {
left: 40%;
}
.tab-container .dots-container .dot--fret-3-of-4 {
top: 83.33333%;
}
.tab-container .dots-container .dot--string-4-of-4 {
left: 100%;
}
.tab-container .dots-container .dot--fret-3-of-5 {
top: 62.5%;
}
.tab-container .dots-container .dot--string-4-of-5 {
left: 75%;
}
.tab-container .dots-container .dot--fret-3-of-6 {
top: 50%;
}
.tab-container .dots-container .dot--string-4-of-6 {
left: 60%;
}
.tab-container .dots-container .dot--fret-4-of-5 {
top: 87.5%;
}
.tab-container .dots-container .dot--string-5-of-5 {
left: 100%;
}
.tab-container .dots-container .dot--fret-4-of-6 {
top: 70%;
}
.tab-container .dots-container .dot--string-5-of-6 {
left: 80%;
}
.tab-container .dots-container .dot--fret-5-of-6 {
top: 90%;
}
.tab-container .dots-container .dot--string-6-of-6 {
left: 100%;
}
.tab-container .table-container {
padding: 15px;
}
.tab-container .table-container .table {
width: 125px;
height: 175px;
border: 2px solid black;
border-radius: 10px;
}
.tab-container .table-container .table .lines-container {
position: absolute;
width: 125px;
height: 175px;
}
.tab-container .table-container .table .lines-container .line {
border: solid black;
border-width: 2px 2px 0 0;
}
.tab-container .table-container .table .lines-container .line.no-visible {
opacity: 0;
border-width: 0;
}
.tab-container .table-container .table .lines-container .vertical-lines {
float: left;
display: flex;
height: 100%;
width: 100%;
justify-content: space-between;
flex-direction: row;
align-items: strech;
}
.tab-container .table-container .table .lines-container .horizontal-lines {
float: right;
display: flex;
height: 100%;
width: 100%;
justify-content: space-between;
flex-direction: column;
align-items: strech;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment