HTML5 template reviews: Starbis

This post is from 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.

In this post, we are examining a Starbis template.

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 HTML5 template and adapt it to your website needs, the documentation is a very important component.

starbis template documentation

In Starbis case, 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 the simple how-to guide. Even the small tutorial to get developers started with customizing 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 have spent ~30 minutes editing the HTML markup of the web page.

Here are the steps we did to create the above page:

1. Removed the 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 a slider section is 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 is the extract from 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 the 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.

Template is designed to be responsive.

On the things to improve side, we think that template creators could invest in the more detailed documentation.

How to get started guide for web developers would really help. 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 Starbis template weights over 650MB. It’s quite a lot for HTML template. This package, of course, includes all the source files (PSD included) for the projects.

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

Did you like this post? Get monthly summary of our new tutorials, posts and tips to your inbox!


Developer Resources