daniele capo

Concept

Text-only interfaces are strangely attractive to me (maybe it’s just a sort of perversion), but I started to see ‘everywhere’ signs of the resurrection of simple text-only interfaces and interaction. That’s why I finally decided that the process of designing the basic structure of a website layout could be done drawing with ascii characters in a txt file.

This make sense because it forces us to draw the
first sketches in a grid. And grids seem to live a similar second life.

I was thinking at something like this:

+--------+ +-----------------+
|        | |                 |
|        | |                 |
|        | |                 |
|        | |                 |
|        | |                 |
|        | |                 |
+--------+ +-----------------+

The program had to be able to parse a text file like that and output a xhtml file and the relative style sheet (acceptable).

Then it was necessary to define a ’syntax’ for drawing with text. I needed some elements to define where the layout starts and where it closes; I also needed a syntax for boxes and for special boxes that can contain boxes.

I decided to create two kind of container: Rows, where contained boxes are floated, and Column where boxes are stacked and not floated.

In that way it seems to me that I can describe the usual situation in the design of a css layout

I also decided to implement my own solution to the equal height multicolumn layout problem with a new kind of box: MultiCol.

How it works

So what you need is (provided you have installed python) start opening your favorite text editor and type:

/x:15-y:18---------------------------------/
+1-----------------------------------------+
|                                          |
|                                          |
+------------------------------------------+

=2-----------------------------------------=
+3---------+ +4--------------+ +5----------+
|          | |               | |           |
|          | |               | |           |
+----------+ +---------------+ +-----------+
/------------------------------------------/

The first line define the grids units (you can set different units for x and y, as in my example) and the overall width of the layout in terms of units (how much chars are in the first line). The last line close the layout

Inside you can place your boxes. There are boxes for defining a multicolumn arrangement, absolute positioning etc.

If you like the idea you can download the file here, or you can download it at sourceforge.