There’s a common perception that digital books have to sacrifice a lot of the beautiful style touches that print books offer. What if that perception were wrong? What would you design?

In fact, it is possible to bring a high level of style and design to your digital titles, and with a little upfront work, you could customize the look of each title in mere moments. Here at Inkling, we were faced with a problem that any publisher can understand: how do we quickly digitize a hefty backlist and still preserve the individual books’ styles and beautiful print layouts? As part of a massive project with Elsevier to revamp its popular Expert Consult and Student Consult online portals, we needed to transform 850 medical references and textbooks into mobile-optimized eBooks that still retained the beauty and the structure of the print books.

In tackling this monumental task for Elsevier, we created possibly one of the most convenient SASS files we’ve ever used: the setup file. The setup file contains all of the basic eBook stylesheet options in one easy-to-access place. By altering one line of code in this file, we were able to change the design across large sets of titles in mere minutes.

Imagine changing 6 characters and seeing an entire book change color–that’s the genius of the setup file. Using SASS and color math, we’ve created a system that will change and vary the colors of headings, asides and section background colors, tables, unit banners and more. All by setting one main color in this line:

$color-1: #3878a8;

Yes, that’s it! That #3878a8 is the hex code for the color royal blue in the image below.

49c26847eca6fba839bd5b55ca
Chapter Heading Using Color Math: This chapter heading uses color math to set the dark blue of the section banner, the royal blue of the chapter title background and the light blue of the chapter number.

By swapping out the #3878a8 hex code for a different color’s hex code, we changed almost every color in the title, making the creation of a unique look for each book a super-simple task. Once the setup file has been created, all you have to do is pop over to a website like colorhexa, pick your color, plug in the hex code, and you’ll have a stunning variety of color options. Here’s an image of the same chapter title with the hex code changed:

Screen-Shot-2014-05-14-at-2.04.17-PM
Changing Colors Using Color Math: Each of these titles has a different $color-1. From top to bottom, Purple (#961a66), Red (#c42020), and Yellow (#f08d21). 

Note the color distinctions between the section banners up top, the chapter title background, and the chapter numbers. All of those colors were set just by changing the $color-1 to purple, yellow, and red, respectively. The color math picks up that main color and makes it lighter or darker depending on the element (ex: the section banner color was made darker by the color math).

Here’s another example. Let’s say you added a unit banner above those dark blue section banners.

0edf204febb0c9bdffa7c6f4d3

The color math automatically adjusts the unit banner to be lighter, making it distinctive from the section banner below it.

This makes short work of customization and adds an instantaneous distinction from other titles. There are even more useful one-liners in the setup file, which you can mix and match to make a very diverse library, such as these examples below.

a6304b4a5abfef64084b452ce9
A Chapter Title with the Background Set to White. The heading changes to be royal blue, and a border appears beneath the title.
097fe44197b6f1564c1c3898b5
Setting the Chapter Style to “Minimal” will yield this result for a chapter introduction.
ff998249eaabe75e1aebb5715b
Set the Chapter Number to Appear “Right”, and you’ll get this big bold chapter number display that uses the main color.

All of these simple changes via the setup file are possible because we researched the content in Elsevier’s library for patterns. Though each of the library’s 850 titles is unique, groupings and patterns emerge when you take a broader view of the content. By taking a pattern-based approach with our eBook stylesheets, we were able to build scripts and systems that could cascade changes across many titles at once, imposing both consistency and beauty upon the library, and making the task of converting large libraries of legacy content seem much less daunting!

Want to learn more about how Elsevier partnered with Inkling to create a better mobile experience for their half a million users? Get the full case study here, available as an interactive eBook and PDF.