Blog
Quickstart
Documentation
Download
HTML is horrible. It's not suitable for anything more visually complicated than a short school essay. It can't deal without overextending itself with anything more complicated like newspaper, book, presentation, webpage, webapplication.
Yet all these things are often implemented using html. How? People just adapted existing elements to overcome html shortcomings in area of laying out elements. Existing elements like tables, and transparent images (who remembers spacing elements using 1px transparent gif-s?) or more recently element groups (div-s) and text frames embedded inside paragraphs (float-s). None of theese elements was ever intended to serve the purpose people are using it for. So until recently we had pages cluttered with nested tables with true content really hard to find inside. And now we have pages cluttered with divs and css files cluttered with cryptic styles.
Tables had their advantages. Large subset of their functionality was pretty consistent across different browsers. But they cluttered html and were not intended for layout. So they are now officially despised because now it's possible to do pages without them.
Why abuse tables if you can abuse floats? At least you can keep your html reasonably clean and feel good about adhering to the standards. Problem is that standards do not cover some things you usually want to do with your page. So you have to code around some things that are standard but completely unexpected (like .clearfix). To code around this standard features you have to do tricky things, and tricky things may be defined in standards, but not correctly implemented in all browsers. So you just have to try what works and what does not, and read a lot about invented css hacks. And you need all this to make html for every, even very simple project your graphic designer has created.
For css layout to work you need a modern browser.
Modern browsers have good javscript. Why not define layout in javascript object in some sensible way, construct layout according to this definition and put the contents of page inside this layout?
So if you want to layout some part of your document you have to put something like this before this part:
<script>BraveLayout.start(layoutDefienition)</script>
and something like this after it:
<script>BraveLayout.end()</script>
layoutDefinition is object containing definition of layout, and above code constructs it and hides the part you want to lay out until it's fully loaded and ready to be placed inside generated layout.
Also you must call BraveLayout.fill() when document load:
<script>$(document).ready(function() { BraveLayout.fill(); })</script>
to fill all layouts genrated on your page.
You have to include js library, css style in html head, and if you want to specify doctype (if you want page that validates) it must be doctype that puts browser in quirks mode. So you will need something like this at the beginning of your html file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="BraveLayout-jquery.js"></script>
And that's pretty much it.
How layout definition could look like?
var layoutDefinition = { x:',300px,', y:',,10px', rows:[ { size:'10%', place:'#header', cls:'blue' }, { cols:[ { size:'20%', place:'#menu', cls:'red' }, { place:'#content', cls:'yellow' } ] }, { size:'5%', place:'#footer', cls:'gray' } ] }
Defines horizontal positioning, alignment and sizing of layout box inside its container. You can use any CSS units for specifying width, and any CSS units, except percents for specifying margins (margins_defined_as_percentage).
If you specify width as auto element will be sized to it's contents, but it won't be narrower than 1px. Specifying width as auto is actually same as specifying it as 1px.
Defines vertical positioning, alignment and sizing of layout box inside its container. You can use any CSS units for specifying height, and any CSS units, except percents for specifying margins (margins_defined_as_percentage).
same as for x:
Box is split for as many containers as there is boxes in the array. If a box has rows, then it cannot have columns and vice versa.
When box is split into containers (rows or cols) size of each container can by defined by field size inside definition of the box placed inside container. You can use any CSS units for specifying size.
Css class that will be set for this layout box. You can use it to give container background or to give some style to thing that will be put inside.
Indication what element from html file will be placed inside box.
Instead defining box like this:
{ place:'#content' }
you can use following shorthand:
'#content'
If you have some repeating element inside your html like:
<div id="#menu"> <a href="">first</a> <a href="">second</a> <a href="">third</a> </div>
And you have box defined like this:
cols:[ { place:'#menu a' } ]
then it will be repeated for each a tag inside div#menu.
If there is no element matching selector given in place field then this box will not be displayed. You can use this functionality for optional elements of layout, that should appear only on some pages using given layout.
If you have complex repeating element inside your html like:
<div id='products'> <div class='product'> <span class='name'>Camera</span> <span class='price'>100.00</span> <a href="">buy</a> </div> <div class='product'> <span class='name'>Book</span> <span class='price'>10.00</span> <a href="">buy</a> </div> </div>
And you have box defined like this:
rows:[ { place:'#products .product', size:'80px', cols:[ { size:'80px', place:'.price' }, '.name', { size:'40px', place:'a' } ] } ]
Then the box with “place:'#products .product'” will be repeated for each html element matching this selector, and '.price', '.name' and 'a' elements will be taken only from descendants of appropriate '#products .product' element.
Go to FAQ page and ask some.
Discussion