Skip to content

Instantly share code, notes, and snippets.

@ryanki1

ryanki1/dabblet.css

Created January 4, 2014 16:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ryanki1/8257211 to your computer and use it in GitHub Desktop.
Save ryanki1/8257211 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
#grid { display: grid;
/* Two columns: the first sized to content, the second receives the remaining space, */
/* but is never smaller than the minimum size of the board or the game controls, which */
/* occupy this column. */
grid-columns: auto minmax(min-content, 1fr);
/* Three rows: the first and last sized to content, the middle row receives the remaining */
/* space, but is never smaller than the minimum height of the board or stats areas. */
grid-rows: auto minmax(min-content, 1fr) auto
}
/* Each part of the game is positioned between grid lines by referencing the starting grid line and */
/* then specifying, if more than one, the number of rows or columns spanned to determine the ending */
/* grid line, which establishes bounds for the part. */
#title { grid-column: 1; grid-row: 1 }
#score { grid-column: 1; grid-row: 3 }
#stats { grid-column: 1; grid-row: 2; grid-row-align: start }
#board { grid-column: 2; grid-row: 1; grid-row-span: 2 }
#controls { grid-column: 2; grid-row: 2; grid-column-align: center }
Raw
dabblet.html
<body>
<div id="grid">
<div id="title">Game Title</div>
<div id="score">Score</div>
<div id="stats">Stats</div>
<div id="board">Board</div>
<div id="controls">Controls</div>
</div><!-- content to be placed inside <body>…</body> -->
</body>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"60","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment