Skip to content

Instantly share code, notes, and snippets.

@efleming969

efleming969/score-sheet.html

Created December 10, 2015 17:20
Show Gist options
  • Save efleming969/b195f283017e0f4bd3ec to your computer and use it in GitHub Desktop.
Save efleming969/b195f283017e0f4bd3ec to your computer and use it in GitHub Desktop.
Download ZIP
Basic Bowling Scoresheet
Raw
score-sheet.html
<!doctype html>
<head>
<style>
.ScoreSheet {
display: flex;
}
.ScoreSheet-Frame {
display: inline-block;
flex-grow: 1;
border-left: 1px solid #a0a0a0;
text-align: center;
}
.ScoreSheet-Frame--current {
background-color: #e0e0e0;
}
.ScoreSheet-Frame:last-child {
display: inline-block;
flex-grow: 1;
border-right: 1px solid #a0a0a0;
}
.ScoreSheet-Frame:last-child .ScoreSheet-Roll:first-child {
border-right: 1px solid #a0a0a0;
}
.ScoreSheet-Rolls {
display: flex;
}
.ScoreSheet-Roll {
flex-grow: 1;
border-bottom: 1px solid #a0a0a0;
padding: 0px;
}
.ScoreSheet-Roll:last-child {
border-left: 1px solid #a0a0a0;
}
.ScoreSheet-Title {
background-color: #000;
color: #fff;
border-top: 1px solid #a0a0a0;
border-bottom: 1px solid #a0a0a0;
padding: 5px 0px;
}
.ScoreSheet-Roll--current {
background-color: #800;
border-top: #800;
color: #fff;
}
.ScoreSheet-Score {
border-bottom: 1px solid #a0a0a0;
padding: 0px 0px;
}
</style>
</head>
<body>
<div class="ScoreSheet">
<div class="ScoreSheet-Frame">
<div class="ScoreSheet-Title">1</div>
<div class="ScoreSheet-Rolls"><span class="ScoreSheet-Roll">1</span><span class="ScoreSheet-Roll">1</span>
</div>
<div class="ScoreSheet-Score">1</div>
</div>
<div class="ScoreSheet-Frame">
<div class="ScoreSheet-Title">2</div>
<div class="ScoreSheet-Rolls"><span class="ScoreSheet-Roll">1</span><span class="ScoreSheet-Roll">1</span>
</div>
<div class="ScoreSheet-Score">1</div>
</div>
<div class="ScoreSheet-Frame">
<div class="ScoreSheet-Title">3</div>
<div class="ScoreSheet-Rolls"><span class="ScoreSheet-Roll">1</span><span class="ScoreSheet-Roll">1</span>
</div>
<div class="ScoreSheet-Score">1</div>
</div>
<div class="ScoreSheet-Frame ScoreSheet-Frame--current">
<div class="ScoreSheet-Title">4</div>
<div class="ScoreSheet-Rolls"><span class="ScoreSheet-Roll ScoreSheet-Roll--current">1</span><span class="ScoreSheet-Roll">1</span>
</div>
<div class="ScoreSheet-Score">1</div>
</div>
<div class="ScoreSheet-Frame">
<div class="ScoreSheet-Title">5</div>
<div class="ScoreSheet-Rolls"><span class="ScoreSheet-Roll">1</span><span class="ScoreSheet-Roll">1</span>
</div>
<div class="ScoreSheet-Score">1</div>
</div>
<div class="ScoreSheet-Frame">
<div class="ScoreSheet-Title">6</div>
<div class="ScoreSheet-Rolls"><span class="ScoreSheet-Roll">1</span><span class="ScoreSheet-Roll">1</span>
</div>
<div class="ScoreSheet-Score">1</div>
</div>
<div class="ScoreSheet-Frame">
<div class="ScoreSheet-Title">7</div>
<div class="ScoreSheet-Rolls"><span class="ScoreSheet-Roll">1</span><span class="ScoreSheet-Roll">1</span>
</div>
<div class="ScoreSheet-Score">1</div>
</div>
<div class="ScoreSheet-Frame">
<div class="ScoreSheet-Title">8</div>
<div class="ScoreSheet-Rolls"><span class="ScoreSheet-Roll">1</span><span class="ScoreSheet-Roll">1</span>
</div>
<div class="ScoreSheet-Score">1</div>
</div>
<div class="ScoreSheet-Frame">
<div class="ScoreSheet-Title">9</div>
<div class="ScoreSheet-Rolls"><span class="ScoreSheet-Roll">1</span><span class="ScoreSheet-Roll">1</span>
</div>
<div class="ScoreSheet-Score">1</div>
</div>
<div class="ScoreSheet-Frame">
<div class="ScoreSheet-Title">10</div>
<div class="ScoreSheet-Rolls"><span class="ScoreSheet-Roll">1</span><span class="ScoreSheet-Roll">1</span>
<span
class="ScoreSheet-Roll">1</span>
</div>
<div class="ScoreSheet-Score">1</div>
</div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment