Over a million developers have joined DZone.

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

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software


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.


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.


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!

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

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.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


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

{{ parent.tldr }}

{{ parent.urlSource.name }}