disrupthor-logo

Basic8 HTML5 Template review

Basic8 HTML5 template

Table of Contents

More to explore

Basic8 is a pure HTML5 and CSS3 template (no js frameworks included). That’s why it’s lightweight, minimalist and blazing fast. The Basic8 HTML5 Template is beautiful and clean; one of these rare products where things are focused and simple.

Eyes on the prize, no distractions

The code is clean and easy to customize even by newbies. There’s no third party scripts or complex grid systems, so it’s simple to get around to build a website fast.

Lightweight and blazing fast

Well, this template achieves blazing fast loading speed times exactly because the code is minimal. Basic8 template might be the purest HTML5 and CSS3 on the market, with a smidge of basic javascript in there (under 399 bytes). Additionally, it’s also W3C valid and there are no in-line or !important css declarations.

What’s important on this topic, Basic8 passes Google’s PageSpeed and GTmetrix’s tests with excellence. So, pay attention to the size of your own assets to give your website the maximum chances to perform.

SEO Optimized

Still, it’s flexible, versatile and trivial to customize. The very own presentation site is built using the Basic8 HTML5 template. This “eat your own dog food” approach makes a good showcase for the product.

It looks modern and behaves accordingly. The template is responsive and retina ready. And we’ll talk about how it’s optimized for SEO as well.

Basic8 HTML5 template – a clean and simple template to use

The way the code is written makes customization easy. Build pages with Navigations,  Footers and Sections. You can choose the background color and paddings options for each. On top, you can choose the overall look and feel by setting your colors and fonts.

The easiest way to start is with one of the example pages provided in the template. Paste in your content, play around with colors and fonts. You’re basically ready to go live with the first version of your website.

Basic8 is responsive and retina ready. Plus, it’s SEO and conversion optimized. So it’s easier to get on top of these topics as well.

Colors and fonts

There are a few predefined colors to choose from, but you can set your own. Similarly, there are two font choices that come bundled in with the template – a Material Design one and one more in line with macOS & iOS look and feel.

There’s documentation available in the package to help you set up and customize.

Sections in Basic8 template

The structure

Use the Sections, Navigation and Footers provided as building blocks. You get a versatile set of choices for each. Then personalize each building block with its own background color and top/bottom paddings. You can build a fully dark or light mode website, or you can mix and match.

Navigation and Footer

Navigation has the following options to configure

  • Subnavigation
  • Breadcrumb
  • Single/multiple CTAs
  • With/without social icons
  • Sticky or not
  • With logo or text
  • White, light, grey, dark, black backgrounds

Similarly, the footer can also be configured in several variations from a basic stripe for copyright info to more complex.

Intro Sections

These are your hero sections that are suited for the top part of your website. There are 9 dedicated Intro Sections, but you can also use a regular Section that contains image or video.

There are plenty of variations in here to choose from. Left/right layouts, full/medium/small images or videos, and a wide spectrum of column layouts.

Content Sections

There are about 35 different sections that vary from Headings to Contact Sections. You can display maps, contact info, buttons, team members, testimonials, or full size articles. Additionally, you can showcase products, clients’ logos, display images by columns with title and description, and more.

Each Section adapts to a white, light, grey, dark or black mode automatically. Also, you can set top/bottom paddings from a predefined group of 5 sizes (XS, S, M, L, XL).

Video Sections

These sections come in several variations of layout. Small, medium, large or full size embedded video displayed with or without supporting content. All in various single or multiple column layouts.

Headings

These are one of the more basic Sections that you can use for titles. But even these have several variations for layout, supporting description or eyebrow text, links, one or more buttons and a choice of text style.

What’s in the package

The Basic8 HTML5 template comes bundled with all Sections described above, Navigations, Footers and so on. There are a few example pages already built so that it’s easier to get started. There’s an additional page with all Content Sections included and that gives you a good overview. You can also check all Sections available here.

Additionally, documentation is provided to help you get started, if needed. The template is pretty easy to use, but you might want to have a look through the advanced customization tips.

Last, two Sketch files are included – one with images placeholders and another with a Sketch components library. This last one contains everything available in the Basic8 template as Sketch components. This might prove useful if you want, for example, to compare a few different versions of a page layout.

Basic8 HTML5 template – conclusions

This template is very powerful for highly performing responsive websites. It’s beautiful and modern, clean and simple, and fits well for simple websites that can go live fast. It’s very simple to use – mix sections in so many ways, you get countless different versions for your website.

Basic8 might be a simple HTML5 and CSS3 product, but the way it was built and its performance pushes this product to the premium templates rank. Change a few parameters and you get a totally different look and feel for your website, while higly performing in terms of speed.

Check it out here for more details:
https://www.basic8template.com

Disclaimer: Career AI Srl developed both Disrupthor.com and Basic8Template.com. Thus, the authors of this review are also the authors of Basic8 HTML5 template.