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.
Named for Ms Potter, a classic children's book theme for simple stories. Goes well with Alice in Wonderland.
A space-age look for big books. Goes well with The Future of Ideas, by Lawrence Lessig.
A wild and wonky look for grabbing attention. Goes well with Little Brother, by Cory Doctorow.
An elegant, conservative A4 textbook design for the Ketida platform. Works with our Ketida sample content.
A bright and wavy textbook design for the Ketida platform. Works with our Ketida sample content.
A smart, sleek textbook design for the Ketida platform. Works with our Ketida sample content.
A gentle, quirky textbook design for the Ketida platform. Works with our Ketida sample content.
A gentle, quirky textbook design for the Ketida platform. Works with our Ketida sample content.
A plain template with very few opinions, and the starting place for creating brand new themes. Goes well with our typography samples.
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.
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.)
Once you have created a theme that fits your project's HTML structure:
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">
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>
npm run http-server -p 4000
in your project root folder, and visit your site at http://localhost:4000.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
.
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.
theme.json
file, enter its name.
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.
/themes/yourtheme/_selectors.scss
(where yourtheme
is the name of the theme you’re working on)./themes/yourtheme/_variables.scss
. See the _defaults
theme for the existing variables you can define./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.
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.