[ Home | About | Reset ]
CSS box model generator
v0.06 beta 2014-09-20
Here you can generate HTML and CSS code for a chosen web page layout according to the box model. This is handy when you quickly need a web page design structure and if you, like me, do not use fancy web page editors. On the tech side of things, please note that the output is not responsive. Also, of course the dashed lines only are there to visualize the layout; you'll have to set the border to zero later on (outline is not used).

The dashboard is on top of the output, so just maximize your browser window if you do not see everything.
Messages
Welcome! Syntax for each line is: Vertical% Horizontal%:Name. Replace % value with asterisk (*) or name with dash (-) for auto assignment.
-----------

[20, [[264, 'a0001'], [255, 'a0002'], [255, 'a0003']]]
[89, [[305, 'a0004'], [304, 'a0005'], [76, 'a0006'], [76, 'a0007']]]
[89, [[622, 'a0008'], [165, 'a0009']]]
[84, [[191, 'a0010'], [190, 'a0011'], [190, 'a0012'], [190, 'a0013']]]
[84, [[394, 'a0014'], [393, 'a0015']]]
[19, [[800, 'a0016']]]
Examples
One Chess Simple Complex Wide 1234
Input
Internal values (pixels)
Width
Height   
Layout shortcode (%)



a0001
a0004
a0008
a0009
a0010
a0014
a0015
a0016
Direct link for this layout - with dashboard
Direct link for this layout - without dashboard
Download this layout as text file with HTML and CSS code.