Project structure

A typical Bookiza project has the following structure:

my-awesome-new-book $ ls -ltra
├── README.md
├── assets
│   ├── css/
│   ├── images/
│   │   ├── illustration-1.jpg
│   │   └── illustration-2.jpg
│   └── javascript/
├── cover
│   ├── front.jpg
│   └── banner.jpg
├── license.md
├── crust/
├── node_modules/
├── manuscript
│   ├── page-1
│   │   ├── body.html
│   │   └── style.css
│   ├── page-2
│   │   ├── body.html
│   │   └── style.css
│   ├── page-3
│   │   ├── body.html
│   │   └── style.css
│   ├── page-4
│   │   ├── body.html
│   │   └── style.css
│   ├── page-5
│   │   ├── body.html
│   │   ├── head.html
│   │   ├── script.js
│   │   └── style.css
│   ├── page-6
│   │   ├── body.html
│   │   └── style.css
│   │   …
│   │   …
│   └── page-2N
│       ├── body.html
│       └── style.css
├── templates
│   ├── head.html
│   ├── style.css
│   ├── body.html
│   └── script.js
└── trash
│   ├── page-8-17:10:20
│   └── page-12-17:11:17
├── gulpfile.js
├── index.html
├── templates
├── package.json
├── package-lock.json
└── .bookrc

Where each page-N inside the manuscript/ folder is an independent webpage with its own accessibility context. As the author of the book (or the book maker), most of your time developing and presenting the story will be spent inside this (manuscript) folder. In this directory you'll see a subfolder for each page of the book with a number appended to its foldername, like so: page-1, page-2, page-3… and so on until page-2N.

Inside each page subdirectory, you'll find files like body.html and style.css that go into composing a given page on the book. You can sprinkle some javascript on the page using a scripts.js file and include a head resource using a head.html file if it is required. Bookiza will pick-up the contents of these files, combine them and generate a page using the specified components on your book.

See how to use [preprocessors]({{ site.baseurl }}{% link _posts/2018-07-26-preprocessors.md %}) instead of plain markup and style by altering Bookiza's mode.

Layout

The templates folder is where all the layout and structure level markup and scripts live. Code and style rules placed inside templates folder get applied across all the pages of a book, so this is an ideal place to choose web-fonts and typography on your book.

Learn more about strong layout templates.

Assets

Assets folder is where all your static assets like images, illustrations or libraries of the book (or comics or magazine) will go. As a convention the assets folder will not hold the Cover and Banner art of your book though.

All resources need to be checked-in and hot-linked via rawgit or an asset hosting provider like Cloudinary (recommended referral link). Using a Content Delivery Network (CDN) to deliver images at right resolution and size dynamically helps your readers get to reading the book faster, especially on high latency networks.

Cover

The cover-art (450px x 610px) for your book and its banner (1400px x 800px) will go into the Cover folder. These images are uploaded via the Cover page of your Superbook on Bubblin.