With 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 the former 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:
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:
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:
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.
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.
Adding the JavaScript
The last step in making our UI masterpiece is to add the JavaScript plug-in. The front-end developers at Brainjocks, now Perficient, 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!
Hi Emily,
In our next web project we are planning to use flexbox with Sitecore instead of bootstrap. Can you please suggest of flexbox is compatible enough to be used with Sitecore . Does it work fine with experience editor as well ?
Thanks,
Samridhi
> Hi Samridhi. It is compatible to be used with Sitecore, however you may have problems in the experience editor. The flexbox styles will carry over into the experience editor and may give you trouble with the editing experience. I recommend to override the flexbox styles in experience editor and style the elements as floating block elements or inline block elements to give you a similar look to the front end.