lfa

LearnForward Author - HTML5 textbook publishing tool

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.

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

After that, run:

$ 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
├── .lfa
│   └── package.json
├── assets
│   └── ...
├── js
│   ├── ...
│   └── index.js
├── styles
│   ├── ...
│   └── main.styl
├── mixins
│   ├── ...
│   └── index.jade
└── text
    └── ...

.lfa/package.json 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/main.styl or in @import-ed stylus or CSS files. Any other assets can be placed in assets/.

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:

.row
  .col-sm-6
    +img('img/kitten.jpg')
  .col-sm-6
    +img('img/kitten.jpg')

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.

Detailed documentation can be found here

Just clone this repo, then use Pull Requests. There aren't too many tests right now, but if you implement a new feature, please also write some tests for it.

See license.txt.

In order to continuously improve our product, this tool is collecting anonymous usage data.