PKP Sprint 2016: Building themes for everyone with Bootstrap

May 5th, 2016 by  | 3 Comments

The theming and design group at the 2016 PKP Sprint in Montreal made significant progress towards a Bootstrap-based theme for OJS 3. Their efforts over the two-day sprint laid the groundwork for a simplified approach to rapidly styling OJS 3 that will make hundreds of potential themes an affordable future for OJS.

By building on Bootstrap 3, a popular HTML, CSS and JavaScript framework for developing responsive mobile-first web applications, the new OJS 3 theme will make it much easier to use any of the hundreds of free and commercial themes that are available. This significantly lowers the technical threshold required to adopt unique styles for your OJS 3 journal.

Group members:

Getting the basics in place

Most of the two days were spent getting the basics in place for the raw Bootstrap 3 format. We made significant progress converting templates, getting almost everything done. However, there is still some work to do to refine some of the templates and finish some missing components.

After two hard days of work, we had a basic Bootstrap 3 theme in place. But as you can see, the base style is not particularly inspiring.

Bootstrap3 theme for OJS - base look

Once we had added the basic Bootstrap 3 components, it only took a few lines of code to use one of the free themes from Bootswatch.

Lots of themes in one with bootswatch

Responsive, mobile-first themes

The default theme that will ship with OJS will be responsive and easy-to-use on small handheld devices. The same is true of all Bootstrap-based themes. That means your OJS 3 journal readers will get a responsive navigation menu and clean mobile presentation out-of-the-box with any of these themes.

 

ojs-bootstrap3-mobile

The new theme infrastructure

This project served as a proving ground for OJS 3’s new theming capabilities, demonstrating the benefits of the new separation between frontend and backend and exposing a few areas that we can improve upon.

One of the most exciting ideas is to move forward with an approach to theme-based options. This will allow us to include dozens of existing Bootstrap styles and allow journal managers to easily toggle between different styles without requiring any technical knowledge.

Once theme options are in place, we’ll be able to move forward with things like custom color selection and typography options on the base theme as well, making it easier than ever to customize the look-and-feel of an OJS journal.

These capabilities may not make it into OJS 3’s initial release. But the work performed by the theming and design group at the PKP sprint proved that the OJS 3 theming infrastructure is robust and will support future growth.

Open for contributions

If you’re a developer interested in working with this theme, you can take a look at the GitHub repository. It’s still a work-in-progress and needs your contributions.

Tags: ,

3 Comments on "PKP Sprint 2016: Building themes for everyone with Bootstrap"

  1. J. Langley says:

    This is great news and was one of my primary concerns with using OJS. Looking forward!

  2. Nasir Hussain says:

    I’m very much excited, can’t wait more to see it in action 🙂

  3. Jonny Dover says:

    So glad to see it! Keep up the great work, especially in theming. It is an area where scholarly publishing generally does not presently shine, but with the ability to use standardized tools like Bootstrap we’ll come a very very very long way toward easier and more beautiful knowledge presentation. Thanks a ton to the whole OJS crew–I can’t wait to see 3!

Comments are now closed.