Paged Design

Customisable themes for book design with CSS

Are you creating books with HTML and CSS? Stylesheets for books can be long and complicated to write. Our themes give you a head start: pick a theme, add it to your project, and customise it.

Note that these demos only work in a Chrome browser, and that paged.js and this project are in development, so expect bugs, workarounds, and exciting possibilities, and contribute if you can.

Themes

These are just a small start. If you're interested in more themes, tell us so that we know it's worth investing time in more theme development.

Sample content

This demo site includes various pieces of sample content for seeing themes at work:

For each one, use the theme-selector dropdown to see the browser lay out the book before your eyes. (Only Chrome can get this right currently.)

How to use a theme

Adding a theme to your project

Once you have created a theme that fits your project's HTML structure:

  1. Copy the theme's `main.css` file to your project.
  2. In the head of your HTML (the content of your book), link to that CSS file. For example with 
    <link rel="stylesheet" type="text/css" href="../css/beatrix/main.css">
  3. To use `paged.js`, in the head of your HTML, link to the paged.js script, which will lay out your pages in Chrome. For instance, if you want to always link to the latest official version: 
    <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
  4. Serve your HTML. For example, if you're using Node and have http-server installed, you can run npm run http-server -p 4000 in your project root folder, and visit your site at http://localhost:4000.

Creating a theme

  1. Install dependencies. To do this, from the command line (in the same directory as package.json), enter:

    npm install

    which will install dependencies to node_modules.

  2. Add a single index.html file of your content to a directory in content. E.g. content/example/index.html. Your theme will need to match your HTML structure, which is likely to be different to the example content we have here already.

  3. Make a copy of one of the theme folders (one closest to what you're after) and give it a unique directory name. In its theme.json file, enter its name.

  4. To serve your content and watch for changes to your styles, in the project root, at the command line, enter:

    npm start

    You can now visit your content at http://localhost:5000/content/example?theme=yourtheme (where 'example' is the name of the folder yout HTML is in, and 'yourtheme' is the name of your theme directory). Node Sass will be watching for changes to your styles. Every time you change a file in your theme's Sass files, your compiled CSS will automatically update and you only need to refresh your browser to see your new styles. You may need to hard refresh (Ctrl+F5 or Cmd+R).

    Tip: to quickly scroll to where you were last, enter scrollToLastPosition() in the dev tools console.

  5. Define the selectors for your HTML in /themes/yourtheme/_selectors.scss (where yourtheme is the name of the theme you’re working on).
  6. Define any new values for design variables in /themes/yourtheme/_variables.scss. See the _defaults theme for the existing variables you can define.
  7. Add your own Sass/CSS styles to /themes/yourtheme/_styles.scss. We recommend doing these as partials (see the Apollo theme for a good example.)

There are some technical docs on GitHub.

About

This project is maintained by Electric Book Works, and made possible by funding and encouragement from Adam Hyde, the Coko Foundation, and the Shuttleworth Foundation.

You can get the code and contribute on GitHub.