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.
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.
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 four 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.)
headof your HTML (the content of your book), link to the compiled CSS file in your new theme folder. The path will depend on your folder structure, for example
<link rel="stylesheet" type="text/css" href="../css/beatrix/themes/beatrix/main.css">
headof your HTML, link to the
paged.jsscript, which will lay out your pages in Chrome. For instance, if you want to always link to the latest official version:
npm run http-server -p 4000in your project root folder, and visit your site at http://localhost:4000.
Once you're set up:
Install dependencies. To do this, from the command line, in the unzipped theme folder (alongside
which will install a modules to
node_modules that we need in that folder.
Start our Node script to watch for changes to your styles. To do this, in the same folder, at the command line, enter:
Node Sass will now 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).
YOURTHEMEis the name of the theme you’ve downloaded).
/themes/YOURTHEME/_variables.scss. See the
_defaultsfor the variables you can set.
There are some technical docs on GitHub.
You can get the code and contribute on GitHub.