Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

HTML5 Template Reviews: Starbis

DZone's Guide to

HTML5 Template Reviews: Starbis

This post is from the HTML5 template reviews series. In these series, we are performing a quick test run for the selected HTML5 templates, with the goal to discover how simple it is to use the template. And how quickly we can create a few example web pages.

· Web Dev Zone
Free Resource

Prove impact and reduce risk when rolling out new features. Optimizely Full Stack helps you experiment in any application.

Overview

Starbis is a premium HTML5 template. Our goal is to review the flexibility of this template from the customization perspective and to give you an overview of pros and cons we have found while testing it. Let’s start.

Documentation

As always, we start from the documentation. If you are going to customize an HTML5 template and adapt it to your website needs, the documentation is a very important component.

starbis template documentation

In the case of Starbis, the documentation file points to the documentation pages hosted online. The documentation has a good overview of how HTML markup and CSS styles are structured.

In addition, documentation has pages dedicated to customizing animation, customizing sliders and creating custom navigation.

What we missed as part of the documentation was a simple how-to guide. Even the small tutorial to get developers started with customizing a Starbis HTML5 template would be very helpful.

Creating A Custom Page

As a quick exercise, we have aimed to create the new web page for an example e-commerce shop. This page lists several items for sale. Something that could potentially be the front page for our e-commerce store at HTMLCenter.

Here is the result:

htmlcenter ecommerce store

Did it take us long? Not really.

We have duplicated the home.html page from the template main directory and spent ~30 minutes editing the HTML markup of the web page. Here are the steps we took to create the above page:

1. Removed this section:

<div ... class="swiper-container ..> </div>

Which contained the slider component.

2. Changed the image source in the <div class="rd-navbar-panel"> element to point to the HTMLCenter logo.

3. With the slider section now gone, we have to lift up the actual items on the page a bit. In order to do this, we have changed the padding of the HTML elements on the web page.

Luckily, the Starbis template styles sheet provides us with options. After a quick look at the stylesheet code, we found the presets for different screen sizes and padding.

Unfortunately, they are not covered in the official Starbis documentation.

This was extracted from the stylesheets file:

@media (min-width: 768px) {
.section-sm-15 {
padding-top: 15px;
padding-bottom: 15px;
}
.section-sm-30 {
padding-top: 30px;
padding-bottom: 30px;
}
.section-sm-35 {
padding-top: 35px;
padding-bottom: 35px;
}
.section-sm-40 {
padding-top: 40px;
padding-bottom: 40px;
}
.section-sm-50 {
padding-top: 50px;
padding-bottom: 50px;
}
.section-sm-60 {
padding-top: 60px;
padding-bottom: 60px;
}
.section-sm-66 {
padding-top: 66px;
padding-bottom: 66px;
}
.section-sm-75 {
padding-top: 75px;
padding-bottom: 75px;
}
.section-sm-90 {
padding-top: 90px;
padding-bottom: 90px;
}
.section-sm-100 {
padding-top: 100px;
padding-bottom: 100px;
}
.section-sm-120 {
padding-top: 120px;
padding-bottom: 120px;
}
.section-sm-145 {
padding-top: 145px;
padding-bottom: 145px;
}
.section-sm-165 {
padding-top: 165px;
padding-bottom: 165px;
}

In our case, we have changed the following section above our product items...

<section id="section-start-journey" class="section-50 section-sm-90 section-lg-120">

... to have 50px padding across the different screen sizes:

<section id="section-start-journey" class="section-50 section-sm-90 section-lg-120">

4. What was left is to remove the unnecessary (for our experiment) top menu items and change the titles of the ones which remained.

The following element allows you to do exactly that. And the process is actually documented in the Starbis documentation pages.

<ul class="rd-navbar-nav"> ... </ul>

That’s all, after these changes we ended up with the version of the web page you can see above.

Summary

Starbis is a Bootstrap based web template. This means that its based on a solid, open source framework with a large developer community.

Making small layout changes, removing components and tweaking existing ones is relatively simple and not very time-consuming. The template is designed to be responsive.

On the things to improve, we think that template creators could invest in the more detailed documentation. A "how to get started" guide for web developers would really help too. Even for a simple customization exercise, we had to search for things within the source code files.

And the Final Note

We noticed during the download that the Starbis template weights over 650MB. It’s quite a lot for an HTML template. This package, of course, includes all the source files (PSD included) for the projects.

If you have experience with using the Starbis template, please lets us know in comments!

With SDKs for all major client and server side platforms, you can experiment on any platform with Optimizely Full Stack.

Topics:
template ,html5 ,web dev

Published at DZone with permission of Saul Zukauskas, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}