learnforward-author is a build tool for generating HTML5 textbooks

LearnForwardAuthor is a build tool for generating HTML5 textbooks.

Since we wanted to make it as easy as possible for everybody to pick it up and go, we decided to use the Jade and Stylus pre-processors instead of plain HTML and CSS.

Jade makes HTML writing easy, allowing for short and readable markup. A good tutorial can be found here.

Stylus gives you more flexibility when writing CSS, allowing you to nest, declare variables, forget braces, loop and more. Tutorial link

Both have huge power usage potential while also being easy to learn. Go read up on them.

This guide assumes you have a POSIX environment (Linux / OS X). If you're stuck on Windows, try some cloud alternatives like Nitrous.io, C9, Codio, etc.

Firstly, make sure you have node.js and npm installed. There are guides on the net on how to do it, but usually it boils down to brew install npm on OS X with Homebrew or sudo apt-get install npm on Ubuntu-based Linux distros.

After that, run:

$ npm install -g lfa

If you get permission issues you most likely have a dodgy node installation. You can probably circumvent it temporarily with sudo -H npm install -g lfa.

LFA is a command line tool. For the basic help, run:

$ lfa

Let's create a new project:

$ lfa new my-first-book
$ cd my-first-book

Your project structure should look something like this:

$ tree
|-- config.yml
|-- css
|   `-- master.styl
|-- img
|   `-- kitten.jpg
`-- text
    |-- ch01
    |   |-- 00.jade
    |   |-- 01.jade
    |   `-- 02.jade
    `-- ch02.jade

config.yml is the main configuration file. This is where you set up project settings like the title or language of the book

The Jade files in text/ make up for the book's chapters. The table of contents is generated automatically based on the folder hierarchy. As mentioned, for CSS, we use Stylus. You should include whatever styles you have in css/master.styl or in @import-ed stylus or CSS files. Any other assets can be placed in any other subdirectory of the project.

Let's start editing our new project. Before we do that, we start the watcher:

$ lfa watch

By now, a browser tab should have popped up for you. You can now start editing files with your favorite text editor and, as soon as you save, the watcher will reload the page for you.

We built in some useful mixins and libraries (like Bootstrap, FontAwesome, modernizr, etc.) for you. For example, let's put up 2 kittens side-by-side in jade:


The end result:

See Bootstrap to understand what row and col-sm- mean in the code above.

The tags starting with + are called 'mixins'. Mixins are like functions in Jade (they return HTML snippets). We made a few mixins for you, such as +img and +lightbox. Create your own mixins to make your life easier.

Just clone this repo, then use Pull Requests. Most of the tests are out-dated.

See license.txt.

In order to continuously improve our product, this tool is collecting anonymous usage data. In order to opt-out, alias lfa to run as lfa --no-analytics.

If you want to remove anonymous statistics from the textbooks this tool generates, remove the lines that start with this._registerAnalyticsBackend from patterns/lfa-components/js/analytics/index.js