Blog
Quickstart
Documentation
Download
Want to lay out contents of a web page? Don't abuse tables or CSS floats! Describe your layout in JavaScript array and let my functions do the rest.
Let's say you want to make a web page for one of your clients. You have a design already prepared for you by true artist. So it occurs that you need a layout adjusting to width of a browser window, centered, with 50px margins on both sides, with 200px decoration bar on the top, 50px footer on the bottom, left menu bar 300px width. The rest is for content. And if the content is too short you want to stretch layout vertically to fill the window so that footer touches bottom edge of the window and background of left menu bar is repeated all the way down.
As usual you have some great content prepared for you by your client who is eager to see first results. You write simple html:
<html> <head> </head> <body> <div id="topDecoration">picture of nice screwdriver</div> <div id="content">Lorem ipsum, etc.</div> <div id="leftMenu">Home | About</div> <div id="footer">Copyright</div> </body> </html
Then you can add ugly tables to your code, or immerse in ocean of css hacks required to achieve desired result. Or you can spend few days learning some css framework that will enable you to do almost the thing you wanted.
Is the task that you want to perform really so complicated? Shouldn't this be easier?
You can include my library in your page and do something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript" src="BraveLayout.js"></script> <link rel="stylesheet" media="all" type="text/css" href="BraveLayout.css"> </head> <body> <script> BraveLayout.start({ x:'50px,,50px', rows:[ { size:'200px', place:'#topDecoration' }, { cols:[ { size:'50px', place:'#footer' }, '#content' ] }, { size:'50px', place:'#footer' } ] }) </script> <div id="topDecoration">picture of nice screwdriver</div> <div id="content">Lorem ipsum, etc.</div> <div id="leftMenu">Home | About</div> <div id="footer">Copyright</div> <script>BraveLayout.end()</script> <script>BraveLayout.fill()</script> </body> </html>
and it's done!
To save loading time and transfer you can put you layout in separate .js file.
Discussion