Layout

From FHTML

1 What's the same as html?

• Before getting into what aspects of layout are the same as html, let's first say what's different. Html's wrap layout strategy is not optimal for application layout.

• So FluidHtml takes the position that you are probably creating an application. To that end, we provide as much functionality as we can to help you! But FluidHtml doesn't support wrap layout (except in text of course) as it would probably just get in your way.

• FluidHtml supports the new CSS3 display:box model via the box-orient and box-align properties.

1.1 box-orient (horizontal/vertical)

The box-orient property (vertical/horizontal/none) determines how children of an element will be rendered (horizontal is default). In this example the blue boxes will be alined vertically within the red box.

1.2 box-align

• In an element where box-orient is 'vertical', all children will be layed out vertically. But how will they be placed horizontally? The box-align property answers this question.

1.3 padding and margins

• All html padding and margin properties are supported.
• In this example, secret *drawingLayer.showPaddingAndMargins:true; property displays margins and borders of elements. Red lines are padding, blue lines are margins.

2 What's extra?

2.1 box-orient (none)

• Accepting 'none' as an argument for box-orient allows FluidHtml to be very flexible regarding layout.

• Where html wants to continually wrap elements, sometimes what developers want is to simply align an element to a point on the screen, according to a coordinate rule, function or whatever.

• The many aspects of layout with FluidHtml that make it flexible and powerful are fundamentally enabled by box-orient:none.

In this example we set box-orient:none on the main fhtml div. It's children can then be placed anywhere. In this case we place a vertical box at bottom right and a circle at center left.

2.2 x and y

• Html makes it difficult to simply set x and y (left and top). float doesn't really get it done; box-align doesn't really get it done. And in a standard html wrap coordinate system, it's a big pain.

• In FluidHtml, it's easy. Set box-orient of your parent element to 'none' and you can set x and y (or left and top - they're interchangeable) to your heart's content.

2.3 Using simple umbers

• You don't need to say 'px' all the time!

2.4 Offsets

• FluidHtml allows you to, essentially, set margins in the same declaration that you're setting a coordinate.
• Here we use x to set the horizontal alignment of an element in a vertical box to right|-20. It will be aligned to the right with a 20px margin.
• This example will launch in a new window so you can resize it easily.

2.5 Less nesting of boxes

• In html, people have gotten used to nesting elements inside one another to achieve a layout goal. With FluidHtml, it's often possible to create elements at the same level using percentage-based rules and offsets.

• Here we create top, left, middle and right css styles and then put four elements (no nesting) on the page that use them.

• This example will launch in a new window so you can resize it easily.

2.6 Aligning elements to other elements

• You can 'slave' a coordinate of one element to another. The syntax is as follows:

masterElement|edge|offset;

• The 'masterElement' can be acquired by a simple id or by executing a script. In the following example, y:master|bottom|20; sets the elements y property to align to the bottom edge of master with an offset of 20.
• In the following example we only animate the master element. The slave follows.
• Use this syntax to keep an element aligned to the edge of another element no matter what changes occur in the first element, even while animating.
• There is a bug when animating reference-based coordinates as in the example below (x and y values aren't refreshing). We know about it and are working on it.

2.7 Aligning elements using javascript in CSS

• FluidHtml allows you to use javascript (within CSS) to assign coordinates.
• This is immensely useful - enjoy.
• In the following example, the red div will always be 1/2 the width of its parent as the parent resizes. Of course, you can use any mathematical equation to set any value - this is just a simple example.
• This demo will launch in a separate window to make it easy for you to test resizing.

2.8 XYRB coordinates

• Most coordinate systems use x, y, width and height. But sometimes it's useful to think of an element in terms of its 'edges' rather than its size. So FluidHtml allows you to define an element's coordinates in terms of x, y, right and bottom.
• right is interchangeable with r; bottom is interchangeable with b.

2.9 Animation and 'auto'

• Like html, FluidHtml supports 'auto' as a value for width and height. However, FluidHtml elements that use auto will automatically expand and shrink to accommodate their children no matter how those children animate.
• So, if any child of an element with width or height of auto is animated in any way that changes that child's size or position, the parent will respond.

This example shows:

• How to start an animation.
• How to use a script to assign an endpoint of an animated property.
• How autoSizing elements respond to animation of their children.
• How to switch targets from frame to frame in an animation. (You can even switch per action...)