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 :-
- How CSS extending class works
- 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)