Padrão de tela em CSS

Lendo Interfaces de design de Jenifer Tidwell, que é um livro sobre padrões de design para design de IU, aprendi um nome para interfaces como MS Paint e semelhantes: The Canvas Pattern.

O que eu queria fazer é criar uma tela de tela inteira, com “barras de ferramentas” encaixadas à esquerda e à direita.

HTML:

<div class="canvas-pattern">
    <div class="canvas-pattern-left"></div>
    <div class="canvas-pattern-canvas"></div>
    <div class="canvas-pattern-right"></div>
</div>

CSS:

/* canvas-pattern */
/** full screen */
.canvas-pattern-canvas{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -10;
    background-color: lightblue;
}

/*** centered within fullscreen */
.canvas-pattern-canvas > div {
    width: 300px;
    position: fixed;
    top: 50%;
    left: 50%;
}

/** docking ... */
.canvas-pattern{
    position: relative;
}

/*** ... right */
.canvas-pattern-right{
    position: absolute;
    top: 0;
    right: 0;
}

/*** ... left */
.canvas-pattern-left{
    position: absolute;
    top: 0;
    left: 0;
}

Aproveitar!