An experimental interface that could be useful to teach children how to write. Each of the three sections correspond to a distinct phase of the writing process:
- Collecting ideas
- Defining an outline
- Write the actual text
window.main = () -> | |
html, body { | |
margin: 0; | |
padding: 0; | |
width: 100%; | |
height: 100%; | |
background: whitesmoke; | |
font-family: sans-serif; | |
} | |
.section { | |
display: inline-block; | |
box-sizing: border-box; | |
margin: 6px; | |
padding: 24px; | |
vertical-align: top; | |
} | |
#ideas, #outline { | |
width: 180px; | |
list-style-type: none; | |
} | |
#ideas li, #outline li { | |
border: 1px solid gray; | |
background: lightgrey; | |
} | |
#ideas li:not(:last-child), #outline li:not(:last-child) { | |
margin-bottom: 4px; | |
} | |
#text { | |
width: 550px; | |
background: white; | |
border: 1px solid gray; | |
min-height: 800px; | |
box-shadow: 0px 0px 4px gray; | |
} |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Learn to Write</title> | |
<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> | |
<link type="text/css" href="index.css" rel="stylesheet"/> | |
<script src="index.js"></script> | |
</head> | |
<body onload="main()"> | |
<ul class="section" id="ideas"> | |
<li>Idea 1</li> | |
<li>Idea 2</li> | |
</ul> | |
<ol class="section" id="outline"> | |
<li>Introduction</li> | |
<li>Main content</li> | |
<li>Conclusions</li> | |
</ol> | |
<div class="section" id="text">Actual text.</div> | |
</body> | |
</html> |
(function() { | |
window.main = function() {}; | |
}).call(this); |
html, body | |
margin: 0 | |
padding: 0 | |
width: 100% | |
height: 100% | |
background: whitesmoke | |
font-family: sans-serif | |
.section | |
display: inline-block | |
box-sizing: border-box | |
margin: 6px | |
padding: 24px | |
vertical-align: top | |
#ideas, #outline | |
width: 180px | |
list-style-type: none | |
li | |
border: 1px solid gray | |
padding: 4px | |
background: lightgray | |
li:not(:last-child) | |
margin-bottom: 4px | |
#text | |
width: 550px | |
background: white | |
border: 1px solid gray | |
min-height: 800px | |
box-shadow: 0px 0px 4px gray | |