Layouts


It is super easy to apply a layout on your Superbook. Use the template feature to add layout (style) that gets applied across the entire book. Occassionally, you may also need to apply a template for HTML, JavaScript & HEAD to your book.

Use the dropdown for templates as shown below:



On a Bookiza project, layout can be added via the templates folder inside the project. Bookiza will automatically pick and apply style to your book.

Check out some free and open source templates on Github to get started.

Strong layouts:

Bubblin uses a concept called strong layouts for books. It’s neither a fixed layout that restricts scalability nor a fluid one that allows reflow beyond control. The Superbook container will automatically scale and set the outer periphery of the <page> i.e. iframe. It will also handle the height/width proportion using dual or single view for your book automatically depending on portrait or landscape mode of the user device. It does so by optimizing for “maximum real estate”. The innards of the iframe is where your own content and style will live.

Typically, you’d want to set the height and width of body, html elements to 100vh and 100vw respectively, like so:

@import url('//fonts.googleapis.com/css?family=Source+Serif+Pro');

html, body {
  background: #fff;
  margin: 0 0;
  overflow: hidden;
  color: #444;
  font: 4vw/1.2 'Source Serif Pro', serif;
}

// Other style classes below as necessary.

Notice that the font-size is also set using viewport units to allow strong content scaling unlike seen anywhere else.

Rule #1: Never use a CSS framework on your book! See best practices for a great layout.