Category HTML/CSS

Firefox OS Contact App Using Vanilla JavaScript

This tutorial is about creating Firefox OS contact viewer app in vanilla JavaScript (without using any library or framework). We will be creating app using some best JavaScript practices which could be applied to SPA (Single Page Application), and Phonegap apps as well. We will also make use of Web Components to develop a custom element which will help us in layout and its animations. You will find this tutorial useful if you write JavaScript. The only thing that’s specific to Firefox OS will be the use of Contact WebAPI.

HTML5 Features You Must Use Today For Mobile

Whether you are developing for Firefox OS or PhoneGap or mobile web, you must take advantage of some HTML5 features that are well supported by modern browsers and can reduce the development time. Remember this article provide quick introduction to each of the feature along links to other quality posts for more details.

Firefox OS App From Scratch – Part 1

This is the first part out of two in a tutorial series where we will build a Todo app for Firefox OS from scratch. I assume you have some understanding of HTML5, CSS3, JavaScript, jQuery/Zepto, and Backbone.js. In this part we will handcraft a properly structured and semantic UI of a Todo app using best practices for designing UIs for mobile.

This post is contributed to Mozilla Hacks blog. Continue Reading on Mozilla Hacks…

sBubble: jQuery/CSS3 Tooltip Plugin

sBubble is a jQuery tooltip plugin which is totally based on CSS3 for shapes and animations. Yes no images used and no jQuery code used for animation. Plus some color themes are also provided.

Printer Friendly CSS – II

What’s it About?

In Part I of this tutorial, you learned how to slice a design and write standards compliant Html/CSS. In this part, you will learn how to write printer friendly CSS. I will continue extending the same demo used in Part I and make it printer friendly.

Slicing PSD & Html/CSS – I

What’s it About?

In this article you will learn how to slice a design and write standard compliant Html/CSS. In its Part 2, you will learn how to write printer friend CSS. Which means when you print your webpage, it will exclude all background images, and colors. This helps anyone printing the document more reader friendly and also save the user’s printer resources as well.