xiaody/dabblet.css

## dabblet.css
/**
 * The first commented line is your dabblet’s title
 */

.keypad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  width: 192px;
  height: 192px;
  font-size: 64px;
  font-family: monospace;
  color: white;
  background: linear-gradient(15deg, #f06, #f64);
}

.keypad span {
  flex: 40%;
  height: 50%;
  margin: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .1);
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class=keypad>
  <span>&plus;</span>
  <span>&minus;</span>
  <span>&times;</span>
  <span>&divide;</span>
</div>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* The first commented line is your dabblet’s title
	*/

	.keypad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	align-content: center;
	width: 192px;
	height: 192px;
	font-size: 64px;
	font-family: monospace;
	color: white;
	background: linear-gradient(15deg, #f06, #f64);
	}

	.keypad span {
	flex: 40%;
	height: 50%;
	margin: 1px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .1);
	}
	<!-- content to be placed inside <body>…</body> -->
	<div class=keypad>
	<span>+</span>
	<span>−</span>
	<span>×</span>
	<span>÷</span>
	</div>