Superbooks on Bubblin use strong layouts.
Strong layouts add visual structure to content in a way that is neither fixed which restricts scalability of content nor fluid in a way that allows uncontrollable reflow. It is somewhere in between, in that the content and layout remains elastic and stretchy to automatically occupy maximum real estate that is above the fold. The content of itself remains firm and scales in a proportionate manner so that the individual pieces retain their visual balance and positional integrity. Like stretching text on Spandex!
The Superbook container scales the outer periphery of the
<page> (dimensions of iframe) automatically. It manages a constant aspect ratio (height : width) using
single mode depending on the viewport being in portrait or landscape mode. This is done in a way so that “maximum real estate” is available on book for any user device. The inners of the iframe is where an author’s content and a strong layout lives.
Here’s a somewhat contrived example of how height and width of
100vw is applied on each page of the book:
Notice that the
font-size is being set here using
viewport units to allow strong scaling unlike seen anywhere else—which brings us to the first rule of creating strong layout for Superbooks:
Rule #1: Never use a CSS framework on your book! See best practices for a great layout.
How to use a Strong Layout
It is super easy to apply a layout on your Superbook. Use the layout
template feature to apply styles across the entire book. Use the dropdown for templates as shown below:
templates folder at the root of the project. Bookiza will automatically pick and apply the rules on all pages of your book.
Check out some free and open source templates on Github to get started.