• Stars
    star
    140
  • Rank 261,473 (Top 6 %)
  • Language
    CSS
  • Created over 10 years ago
  • Updated almost 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A static site framework for online books.

Franklin

Franklin is a static-site framework, optimized for online books.

Franklin Logo

Setup

Franklin is built on top of Middleman, a fantastic static site generator written in Ruby. The setup steps are as follows:

1) Install Dependencies

Ensure that you have the following installed:

  • Ruby (comes pre-installed on Mac)
  • Rubygems (comes pre-installed on Mac)
  • Bundler (see http://bundler.io for installation instructions)

2) Install Middleman

# Run the following commands in the console
gem install middleman

For more detailed instructions, see http://middlemanapp.com/basics/getting-started/.

3) Download this project, and place it in your ~/.middleman directory:

# If you have git installed...
git clone [email protected]:bryanbraun/franklin.git ~/.middleman/bryanbraun/franklin

If you don't have git installed, you can manually download franklin, unzip it, and drop it into your ~/.middleman folder.

4) Create your project:

# Replace 'mysite' with the name of your project
middleman init mysite --template=bryanbraun/franklin
cd mysite
bundle install  # Installs any franklin-specific gems.

Basic Usage

The most basic purpose of Franklin is to convert a stack of markdown files into an HTML site, and to do it in a way that is optimized for books.

Your markdown files go into the "source" folder. They can be named anything (xxxxxxxx.md), except you must have a file named index.md to serve as the front page of your book. Franklin starts you out with some example files, which you can change or remove to suit your needs.

The structure of your book, as given in the Table of Contents, will mimic the structure of the markdown files in the source directory. Notably:

  1. Your front page (index.md) will be promoted to the top of the list.
  2. Pages will be ordered alphebetically by their file names (thus, using a numbered prefix, like 01-my-filename.md is encouraged).
  3. Your readme (readme.md) file will not appear in your table of contents (for guidence on how to exclude other items from the Table of Contents, see the README for the Middleman-Navtree gem).

When you are ready to build your site, run the following command:

# This creates a `build` folder, containing your site, converted into static HTML.
bundle exec middleman build

Using Middleman's customization options, you can do all sorts of interesting things beyond this basic use-case. For details, see the Middleman documentation.

Configuration

book.yml

This is where you can change the author, title, and other book information. The available parameters are (with example values):

title: Example Book
author: You
github_url: https://github.com/yourname/example-book
domain: http://yourname.github.io/example-book
license_name: Attribution-ShareAlike
license_url: https://creativecommons.org/licenses/by-sa/4.0

tree.yml

This defines the order and structure of your book (for the table of contents and pagination). This file is generated automatically and should not need adjustment. For advanced use-cases where adjustment is desired, see the middleman-navtree docs (specifically the automatic_tree_updaets option).

Themes

Themes can be found in the source/themes directory. You can use your own theme by adding it to the themes folder and changing the value in config.rb: like so:

config[:theme] = 'glide'

Any theme you add must have the following structure:

theme_name
  |
  |--javascripts
  |
  |--layouts
  |
  `--stylesheets

The main page layout is defined in layouts/layout.erb. For more details on working with layouts, see Middleman's documentation.

Localization

Default locale is :en. If you want to change it, for example to :pl, configure middleman:

activate :i18n, :mount_at_root => :pl

and put locales file pl.yml in locales directory in format:

---
  pl:
    previous_page: 'Poprzednia'
    next_page: 'Następna'
    table_of_contents: 'Spis treści'

Examples

Screenshot of three mobile-friendly Franklin themes

Contribution Guidelines

  1. Fork this project
  2. Create a feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch to github (git push origin my-new-feature)
  5. Submit a Pull Request

Contributors

(If you are making a contribution, add your name here as part of your pull request)

License

MIT

More Repositories

1

after-dark-css

Recreating After Dark screensavers in CSS.
CSS
1,167
star
2

checkboxland

Render anything as HTML checkboxes
JavaScript
946
star
3

anchorjs

Add deep anchor links to your docs.
JavaScript
883
star
4

poor-mans-styleguide

A frontend styleguide for the pragmatic.
HTML
471
star
5

your-life

HTML
249
star
6

twitter-listbot

A simple twitter bot that retweets the contents of a twitter list.
JavaScript
61
star
7

music-box-fun

A web app for making music box songs.
JavaScript
54
star
8

middleman-navtree

For building navigation trees & menus in Middleman.
Ruby
45
star
9

bryanbraun.github.io

My personal website.
HTML
23
star
10

alt-react-demo

Demo for a build-free alternative to React, written in vanilla JS.
JavaScript
18
star
11

connect-four

Connect Four, in Javascript.
JavaScript
17
star
12

lets-get-creative

A collection of high-quality, free, online creativity tools.
TypeScript
12
star
13

infinitely-nested-iframes

I N C E P T I O N
HTML
7
star
14

africa-map-raphael

A Javascript-friendly map of Africa using the Raphael.js library.
7
star
15

tiny-book-of-rules

A online book about the Drupal Rules module, written by Johan Falk.
5
star
16

twitter-timeline-eradicator

This Chrome Extension displays all of Twitter except the Timeline.
JavaScript
4
star
17

writer

A Drupal Blogging Theme For Developers
PHP
3
star
18

hubot-answers

Let Hubot answer your yes/no questions.
CoffeeScript
3
star
19

lit-element-demo

A demo app for exploring a web-component-based React alternative
JavaScript
3
star
20

landmark-articles

My personal list of landmark articles for personal/professional development in the web industry.
HTML
2
star
21

github-wiki-html-test

Testing which html tags are supported in Github Wikis
2
star
22

advent-of-code

My collection of advent of code exercises
TypeScript
2
star
23

petitions-newslink

Tracking public engagement by linking news items to White House petitions.
JavaScript
2
star
24

googly

A chrome extension for adding Googly eyes to any webpage.
JavaScript
1
star
25

propagate

A series of demos about Javascript Events
JavaScript
1
star
26

jTutor

Real-time javascript programming feedback in the browser.
JavaScript
1
star
27

hello

A classy introduction page.
HTML
1
star
28

alchemist

A simple, incomplete javascript game, built as a personal javascript exercise.
JavaScript
1
star
29

gdi-personal-website

Slides for a Girl Develop It workshop: Building a Personal Website with Github Pages
JavaScript
1
star