Crafting an Interactive Timeline with BrainJocks SCORE Components

With BrainJocks SCORE, one of our overriding goals is to minimize the complexity and development effort involved in building Sitecore websites. In most cases, you can use a series of SCORE components to build a complicated UI element, using advanced CSS and JavaScript techniques to completely transform them.

One such situation that I recently tackled was the interactive timeline on the “About Us” page of our newly designed brainjocks.com site. I built the timeline using only SCORE components and a JavaScript plug-in. Read on to find out how!

 

Analyzing the Design

The first step in building a complex UI element is to determine how to most efficiently use components to satisfy the fields in the design. Here is the design for this section of the page:

 

complicated ui element - timeline

 

We know that this is a series of component ‘blocks’ that are made into slides and combined in a slider. But we need to determine the SCORE components that will comprise each slide. Of the many different combinations of components that could work in this situation, I decided to take this approach:

component analysis

Ultimately, what will determine which components you choose to use is the ability to map the component’s fields to fields in the design. Thought it’s not obvious by looking at the design, the UX specifies that the entire teal box will be clickable. And, after analyzing the teal box at the top of the slide, we know we need a component that has two heading fields (one for the month and one for the day and year), a body text field (for the event description) and a button field. From my knowledge of SCORE components, I know that a Section Hero component has those exact fields available.

 

Writing the HTML and CSS

Our next step is to build an HTML page and style the components. We’ll build our HTML page using the predefined component HTML from the documentation. Our slide looks like this before it gets any custom CSS:

 

unstyled component

 

Now it’s time for CSS. Before we start styling, we need to add some custom classes so that we don’t make these global styles. We could put a class on each component or on each slide, but that would create a horrible experience for the Content Administrator. A wrapper class using a style box around the entire slider is a great compromise. I am writing in SCSS, so I will be nesting all of these styles inside a class called “timeline-slider.”

 

.timeline-slider {
    .score-section-hero {

    }
    .score-button {

    }
    .score-style-box {
        .score-content-spot {
 
        }
    }
}

 

The section hero is going to involve a lot of absolute positioning. We have to position the field for day and year behind the field for month, and we have to position the button to take up the entire teal box. We’ll also add the text styling, background color, border radius and margins.

 

styled and unstyled component

 

Next we’ll style the button and the bottom style box. The button specifies the year and has an image that is a piece of the timeline. We’re going to do the timeline image as a background, since we will have to change the image when the slide becomes active. The style box and content spot at the bottom needs minimal styling – the caret can be done with a pseudo-element and a CSS triangle.

 

styled and unstyled timeline

 

Adding the JavaScript

The last step in making our UI masterpiece is to add the JavaScript plug-in. The front-end developers at BrainJocks use the slick slider plug-in for almost every slider that we do. It’s easy to use and is very flexible for mobile devices. We already have a wrapper class of .timeline-slider to target with JS, but we don’t have a wrapper around every component to make up a series of slides. This is an easy fix: We will just add a generic style box that will wrap all of the components into one nice slide.

Now, in our JS, we will call slick slider on our custom style box:

 

$('.timeline-slider').slick({
   slidesToShow: 3,
   slidesToScroll: 3,
   infinite: false,
   responsive: [
      {
          breakpoint: 992,
          settings: {
                 slidesToShow: 2,
                 slidesToScroll: 2
          }
      },
      {
          breakpoint: 650,
          settings: {
                 slidesToShow: 1,
                 slidesToScroll: 1
          }
      }
   ]
});

 

And that’s a wrap!

This is just one example of how you can make awesome UI elements using BrainJocks SCORE with only native components, CSS and JavaScript. Check it out for yourself here: http://www.brainjocks.com/about-us.

Emily Lord

I am a UI developer with over 2 years of experience under my belt. I love learning about modern trends and new ways to make beautiful and responsive web pages. My mission is to put a smile on the faces of both the designers and the Sitecore developers while keeping my code clean and efficient. Learn more about Emily.

Add a Comment

Your email address will not be published. Required fields are marked *

Or request call back