Tabzilla
This is the home of Tabzilla, the universal tab you can add to your website. Below follows simple instructions on how to get, and use Tabzilla.
Upgrading to the new Tabzilla
Before you switch to the new Tabzilla, there are a couple of caveats you need to be aware of.
- Tabzilla is no longer available as a hosted service. You have to add it to your website using one of the options below.
- Tabzilla no longer needs any fonts bundled with it so, we are no longer including
@font-facedeclarations for Open Sans in the CSS. NOTE: You can still load the Open-Sans fonts using the Mozilla CDN, or another CDN of your choosing, for example:
@font-face{
font-family: 'Open Sans Light';
src: url('https://mozorg.cdn.mozilla.net/media/fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('https://mozorg.cdn.mozilla.net/media/fonts/OpenSans-Light-webfont.woff') format('woff'),
url('https://mozorg.cdn.mozilla.net/media/fonts/OpenSans-Light-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}- This version of Tabzilla is static and there is no requirement for JavaScript, as such, we no longer inject jQuery.
If you have been relying on any of these assets being included/injected by Tabzilla, you will now have to manually include them on your site.
Bower Package
Do you use Bower to manage your front-end dependencies? Well, then you will be happy to hear that you can install Tabzilla using Bower.
bower install mozilla-tabzillaThat's it! Now you have all the bits you need. Next step, add it to your site.
npm
Already have a package.json and use npm to install dependencies? Well, you can also install Tabzilla
using npm. So either add it to your dependency list
or, install it using:
npm install mozilla-tabzilla -SManual Download
Don't use Bower? No problem, you can download the latest release right here from the releases page.
Once downloaded, extract the package and add the css and media folders to your
project.
Using Tabzilla
First step is to add the tabzilla.css file to your main HTML file:
<link rel="stylesheet" type="text/css" href="css/tabzilla.css" media="screen" />Next, you need to add the following required HTML to your document.
<div id="tabzilla">
<a href="https://www.mozilla.org/">Mozilla</a>
</div>Using Tabzilla with Sass
After installing Tabzilla using npm, it is easy to import the styles into your Sass style sheets.
If you're using Gulp, you can require the mozilla-tabzilla module and specify the Tabzilla includePaths using the following snippet:
var gulp = require('gulp');
var sass = require('gulp-sass');
var tabzilla = require('mozilla-tabzilla');
gulp.task('sass', function () {
gulp.src('*.scss')
.pipe(sass({
includePaths: tabzilla.includePaths
}))
.pipe(gulp.dest('css'));
});Then simply call @import "tabzilla"; from within your Sass file to import the Tabzilla styles.
If you're using Grunt, you can require the mozilla-tabzilla module using the following snippet:
var tabzilla = require('mozilla-tabzilla');
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-sass');
grunt.initConfig({
sass: {
options: {
includePaths: [tabzilla.includePaths]
},
dist: {
files: {
'css/main.css': '*.scss'
}
}
}
});
};Changing The Color of the Wordmark
By default the color of the wordmark on Tabzilla is transparent, as below:
You might want to change this to be a solid color instead. You can change
the color of the wordmark by adding the following override to your CSS:
#tabzilla:before {
background-color: #0C99D5;
}The above will result in the wordmark being displayed as follows:
[i18n] Right To Left Languages
For right to left languages it makes more sense to have Tabzilla float to the left, as apposed to the right. If you are using Tabzilla in a right to left language website, you need to add the following to the HTML element:
<html dir="rtl">
...License
MPL-2.0
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent