HTML5 : Extending CSS Class

A quick tutorial, on how to extend a CSS class. Extending CSS classes is a good technique to manage your web UI project especially, when you are using HTML5 frameworks such as jQueryMobile and etc. A good CSS practice should always use css class for styling only and leave the ID for programming. In order to do a more complex design, you need to at least learn how to extend a css class.

To extend a CSS class, I put together this css extending tutorial with jQueryMobile. A good example in jqueryMobile will be making a custom navbar icon with background tile style.

In this tutorial, you will learn :-

  1. How CSS extending class works
  2. How to make custom navbar icons using this technique in jQueryMobile.

Picture below shows what we intend to achieve today.


There’s a few ways of doing this actually (using id with class and data-icon=”custom”) but, I’m gonna just use my tutorial way to achieve the similar result. Let’s start with my index.html. Have a go with my sample code below and try it out yourself – the comments should guide you further. Here is my resource file for the icon.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html> 
<html> 
<head> 
	<title>CSS Class Extension Tutorial</title> 
 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<link rel="stylesheet" href="css/custom-navbar.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head> 
 
<body> 
	<div data-role="page"> 
		<div data-role="header">
			<div data-role="navbar" data-theme="a">
				<ul data-theme="d">
					<li><a href="#" data-theme="a"><div class="tab1"></div>Tab-1</a></li>
					<li><a href="#" data-theme="a"><div class="tab2"></div>Tab-2</a></li>
					<li><a href="#" data-theme="a"><div class="tab3"></div>Tab-3</a></li>
					<li><a href="#" data-theme="a"><div class="tab4"></div>Tab-4</a></li>
					<li><a href="#" data-theme="a"><div class="tab5"></div>Tab-5</a></li>
				</ul>
			</div>
		</div> 
		<div data-role="content"><div class="contentWrapperDiv"><h1>This is Content Area</h1></div></div> 
		<div data-role="footer" data-theme="c">		
				<div data-role="navbar" data-theme="a">
					<ul data-theme="d">
						<li><a href="#" data-theme="a"><div class="small-tab1"></div>Tab-1</a></li>
						<li><a href="#" data-theme="a"><div class="small-tab2"></div>Tab-2</a></li>
						<li><a href="#" data-theme="a"><div class="small-tab3"></div>Tab-3</a></li>
						<li><a href="#" data-theme="a"><div class="small-tab4"></div>Tab-4</a></li>
						<li><a href="#" data-theme="a"><div class="small-tab5"></div>Tab-5</a></li>
					</ul>
				</div>
		</div>
 
	</div>
</body>
</html>

And this is the custom navbar css source.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
/********************************************************************** 
tab 1 .. 5 they all have the same background url source and property 
but different in background-positioning. With this, we can load the 
background resources once, and it applies to all! Take a look at images
IconPack400x80.png to see how it look like.
**********************************************************************/ 
 
.tab1, .tab2, .tab3, .tab4, .tab5 {
	width:80px;
	height:80px;
	background: url('../images/IconPack400x80.png');
	/*** background-size can be use to scale the iconpack ***/ 
	background-size:400px 80px;
	margin-left:auto;
	margin-right:auto;
}
 
.tab1 {
	background-position:0px 0px;
} 
 
.tab2 {
	background-position:80px 0px;
}
 
.tab3 {
	background-position:160px 0px;
}
 
.tab4 {
	background-position:240px 0px;
}
 
.tab5 {
	background-position:320px 0px;
}
 
 
/*** This is example how to use extend class for custom tab below footer ***/
.small-tab1, .small-tab2, .small-tab3, .small-tab4, .small-tab5 {
	width:40px;
	height:40px;
	background: url('../images/IconPack400x80.png');
	/*** background-size can be use to scale the iconpack ***/ 
	background-size:200px 40px;
	margin-left:auto;
	margin-right:auto;
}
 
.small-tab1 {
	background-position:0px 0px;
} 
 
.small-tab2 {
	background-position:40px 0px;
}
 
.small-tab3 {
	background-position:80px 0px;
}
 
.small-tab4 {
	background-position:120px 0px;
}
 
.small-tab5{
	background-position:160px 0px;
}
 
/*** Sometimes, you can even extend your same class to it's child's selector ***/
.contentWrapperDiv {
	border:1px dotted #cccccc;
}
 
.contentWrapperDiv h1 {
	text-align:center;
}

Abit of a side note, if you encounter anchor links are not firing event when, they are “tapped” on the fixed footer, try this css hack.

.ui-footer-fixed{z-index:1 !important}

Whole set of tutorial for today.
cssExtend Tutorial (3263 downloads)

 

Comments

comments

One thought on “HTML5 : Extending CSS Class

Leave a Reply

Your email address will not be published. Required fields are marked *