article scholar one search

Scholar OneSearch

Re-skinning Northeastern University Libraries' Primo UI

With the launch of Alma on July 1, 2013, Northeastern University Libraries introduced the new Scholar OneSearch, a Primo installation featuring responsive and user-friendly design.

We're especially proud of our responsive design, which allows flexibility and functionality beyond the default mobile stylesheet. We're also happy to have WorldCat NRE requests integrated successfully.

Scholar OneSearch also improves upon some of the features in the standard Primo release, including a reorganized page header, collapsable facets in the left-hand “refine my results” sidebar, and integrated feedback into each search result.

Constraints of Default Design

In our first early implementation, we only authored a few lines of CSS to override the default styles. After user testing we realized that we might need to do a drastic overhaul of the design to address issues found in our less modified Primo implementation.

Leveraging Open-Source Technology

With the relatively short deadline before release, it would have been impossible to change the user-experience without the help of open-source projects. We implemented the Front-End framework from Twitter called Bootstrap. This was then customized using the project's preferred CSS preprocessor, LESS. Without the aid of a CSS Preprocessor the stylesheets would have been unmaintainable and the complex CSS selectors would have been nearly impossible. Recess was used to help enhance LESS by compiling and ordering the CSS properties with best practices automatically.

// LESS before being compiled to CSS

.navbar-toggle{
  background-color: @navbar-toggle-bg;
  border: @navbar-toggle-color 3px solid;
  .icon-bar{
    background-color: @navbar-toggle-color;
  }
  border-color: @navbar-toggle-color;
  &:hover,
  &:focus{
    background-color: @navbar-toggle-bg-hover;
  }
}



/**  Becomes **/


.navbar-toggle {
  background-color: #ffffff FF;
  border: #cc0000 3px solid;
  border-color: #cc0000;
}

.navbar-toggle .icon-bar {
  background-color: #cc0000;
}

.navbar-toggle:hover,
.navbar-toggle:focus {
  background-color: #555555;
}

.navbar-brand {
  max-width: 250px;
}

With the use of the Font-Awesome icon font set, we were able to create retina ready icons that are small in size and can be styled using CSS. Font-Awesome includes LESS stylesheets and powerful mix-ins that aided in integrating icons into the design.

Inspiration and color pallets were taken from the popular Flat-UI project and were integrated into the Bootstrap framework. Modernizr was used for feature detection and legacy browser support.

Further modifications were made to the HTML through the use of jQuery; jQuery was already bundeled with Primo. We built our javascript functions in "The Module Pattern" to keep the code maintainable going forward.

Projects Used

• jQuery
• twitter/bootstrap
• twitter/recess
• Font-Awesome/Font-Awesome
• design-modo/Flat-UI
• Grunt.js

Working Together for a Better Primo

Northeastern Libraries wants to continue to make Primo and Scholar OneSearch better through collaboration with others in the Primo community. This means making the code available for you to use with Primo at your library. Even though there is more work that needs to be done, we are following the "Release early, and release often" iterative approach.

If you are interested in implementing this code, please help make improvements. Even submitting and fixing issues that you have found in a copy of the code would be beneficial to any adopting institutions. You can view and work on the code through our public repository at nu-lts/scholar-onesearch.

Ways to Contribute

• Adding documentation to the wiki.
• Filing issues and enhancement requests
  • General feedback/suggestions also appreciated.
• Fixing and adding new features through a pull request.