Implementing CSS Sprites in Web Applications that Generated by PHPMaker 9.2.0

As we have already known, CSS Sprites has the ability to reduce the HTTP requests and the bandiwdth usage of your web applications. You are strongly recommended to implement it for your web applications, moreover if you are using some icons or small picture. Instead of downloading all the pictures several time from the web server, then that would be better if we combine all the icons into one picture and simply download it once or two (perhaps the other picture such as logo or the animation picture) from the web server. Unfortunately, PHPMaker has not implemented CSS Sprites, yet. Even until version 10! So I pleased to announce you that I have successfully added this ability for the web applications that generated by PHPMaker 9.2.0 by customizing some of my extensions that I created a few months ago. Honestly, I have been waiting so long to implement CSS Sprites to empower PHPMaker. And now, it really came true! 🙂

Perhaps, you must be asking a question by yourself: What's new regarding the implementation of CSS Sprites for the web applications that generated by PHPMaker?

First, you don't need to create the sprites picture by yourself, since I have included the most used icons and combining them into one picture file, of course, with the .css file, too. All the icons that used by PHPMaker such as icons for displaying Printer Friendly, Export to Excel, Export to Word, Export to HTML, Export to CSV, Export to XML, Send to Email, First Record or Page, Previous Record or Page, Next Record or Page, Last Record or Page, Sort Up, Sort Down, Expand, Collapse, and so forth, have been included. I also added some other icons that usually useful for you in the sprites picture.

Secondly, I have provided the classes name that related to the icons in the related .css file so that you can use it easily and quickly. For example, if you want to display the Edit icon, then you can simply use the sprite edit prefix class, or if you want to display the Next icon, then you can use the sprite next prefix class. This class syntax also has been tested either for displaying the icons on the menu items and also on the grid, above the grid, in the record and page navigation. They all are working nicely.

Thirdly, all the changes have been implemented through the extensions I created. No need to customize the PHPMaker template. In other words, you are still be able to generate the web applications without using CSS Sprites technique by using the default template that shipped within PHPMaker, and then feel the difference of the loading time between those pages that use CSS Sprites and those that do not. If I were you, then I decide today to start moving out to use the CSS Sprites for all the web applications that generated by PHPMaker. There is no reason anymore not to use CSS Sprites in my web applications!

Can't wait to try? Well, you can re-download all the extensions that I just updated on September 5, 2013 from this link. The changes that related to the sprites customization have been implemented for 9 extensions as follows: MasinoGraphical, MasinoLogin, MasinoForgotPwd, MasinoRegister, MasinoChangePwd, MasinoSearchPanel, MasinoFixedWidthSite, MasinoPreviewRow, and MasinoHeaderFooter. Just for your information, the sprites files itself (.gif and .css) can be found in MasinoFixedWidthSite extension. So make sure you have downloaded the latest version of MasinoFixedWidthSite and enable it in your project.

Lastly, I just also updated PHPMaker 9.2.0 Demo Project Files so that you can see the example of usage of CSS Sprites for Menu items and Server Events from the project file. You will see at least two technique to use the class for displaying the icon, either as the part of the a href or as the certain independent tag.

Here is some example of CSS Sprites usage that you can easily enter from Multi-Language Property Editor of PHPMaker. This will output the menu items that contain the small icon followed by the menu text:

<i class='sprite car prefix'></i> Cars
<i class='sprite users prefix'></i> Customers
<i class='sprite menu prefix'></i> Menu Position
<i class='sprite horizontal prefix'></i> Top (Horizontal)
<i class='sprite vertical prefix'></i> Left (Vertical)
<i class='sprite theme prefix'></i> Themes/Colors
<i class='sprite help prefix'></i> Help (Categories)

Here is some example of CSS Sprites usage which will be a part of href tag and will be shown only as images:

<a href="customersadd.php" class="sprite form prefix" title="Add Customers"></a>
<a href="settingslist.php" class="sprite settings prefix" title="Settings"></a>

Finally, here is all the classes that already provided in the .css file:

1. accept
2. add
3. addblankrow
4. alert-small
5. analysis
6. anchor
7. asterisk_orange
8. attach
9. basket
10. box
11. bug
12. camera
13. cancel
14. car
15. cart
16. cd
17. change
18. chart_bar
19. chart_pie
20. clock
21. collapse
22. comment
23. comments
24. copy
25. cursor
26. cut
27. date
28. delete
29. detail
30. edit
31. error
32. exclamation
33. expand
34. exportcsv
35. exportdoc
36. exportemail
37. exporthtml
38. exportpdf
39. exportxls
40. exportxml
41. eye
42. favgreen
43. female
44. film
45. find
46. first
47. firstdisab
48. form
49. gear
50. group
51. heart
52. help
53. helpcircle
54. home
55. horizontal
56. hourglass
57. house
58. info
59. info2
60. inlinecopy
61. inlineedit
62. insert
63. key
64. language
65. last
66. lastdisab
67. leftbar
68. lightbulb
69. link
70. loading
71. lock
72. login
73. logout
74. magnifier
75. mail
76. mainbar
77. male
78. menu
79. money
80. monitor
81. mouse
82. music
83. next
84. nextdisab
85. pencil
86. pill
87. plugin
88. prev
89. prevdisab
90. print
91. question
92. reference
93. register
94. report
95. rightbar
96. rosette
97. rss
98. ruby
99. settings
100. sortdown
101. sortup
102. sport_8ball
103. sport_basketball
104. sport_football
105. sport_golf
106. sport_raquet
107. sport_shuttlecock
108. sport_soccer
109. sport_tennis
110. star
111. staryellow
112. stats
113. status_offline
114. status_online
115. tag
116. tag_blue
117. telephone
118. television
119. theme
120. thunder
121. tick
122. time
123. tux
124. tv
125. tyre
126. update
127. user
128. user_female
129. userblue
130. userprofile
131. users
132. vertical
133. view
134. warn
135. weather_clouds
136. weather_cloudy
137. weather_lightning
138. weather_rain
139. weather_snow
140. weather_sun
141. zoom

As you can see, there are hundreds icons combined into only one picture. Did I mention the sprite file size that used for this CSS Sprites? Well, it is only approximately 25 KB in .gif file. Can you imagine this sprite file which has the file size only 25 KB contains the hundreds icon in it? However, I also included the sprite image file in .png format which has the size approximately 74 KB. Again, just wanted to remind you that the sprites files (.css and .gif) can be found in MasinoFixedWidthSite.