WebTabs: open source automatic tabbed layout for website and apps

WebTabs is a great open source template for create responsive tabbed layout without writing code. It’s very easy to use, you can find files and instruction on GitHub.

HOW TO USE WEBTABS

STEP 1: DOWNLOAD Download the WebTabs Template .zip from and unzip it wherever you want.

STEP 2: CUSTOMIZE SETTINGS Open setttings.js file and customize the template, from this file you can change everything. The first two variables contains two colors in #RRGGBB format, just change them and you’ll see the app magically change. The second variable contains the list of the tabs with their properties. If you modify this list you can change the number of tabs displayed and icon for every tab. In the url field you can find the address of html file that describing the contents of the tab.

STEP 3: CUSTOMIZE TAB TEMPLATES To customize the contents of the tab, simply edit the html file that you specified in the previous step. For styling the html you can add your custom css rules incustom_style.css file, it’s already built in the app.

STEP 4: RUN This is the simplest step, run the app (index.html) and test the results on a browser.

It’s done . . . I told you that it’s easy!