I’ve been working on an Open Source project for months. In fact, I’ve been working on it so long, people are asking for a download of it and I haven’t even gotten 25% of the way through the project. Needless to say, I got off my butt.
Template Engines
One of the things that really slowed me down was the ability to use templates. I could have used a custom system as I’ve done in the past, but I didn’t feel like coding something that someone has already written. I searched high, low, sideways and longways. There are lots of Template Engines out there. Some are small, others like Smarty are huge, and still others are just overly bloated.
I eventually found a template engine called PaTemplate, which Mambo (Mambo before it separated) uses. I was satisfied and sat down to read through the main documentation and thought some more about it. Around this time, I got fed up with the size of the project and walked away for a few months.
The Main Template Problem
Coming back to the project, I see a problem. Templates are supposed to allow separation between content and design. While creating a template can do this, it doesn’t get the content and php separated. It just means that the template creator has to cut and paste PHP blocks whenever they want to change the template. Thus - the problem with PaTemplate and others like Smarty. Its a nice, easy way to implement templates, but its not exactly what I want.
What I Want Out Of Templates
Again, separation between code and template. There should be NO reason a graphic artist has to touch code or content, in any way shape or form. I know that graphic artists and web masters are one in the same now (by whatever title we like to call ourselves), but its a matter of principle.
The graphic artist is there specifically to design the layout. They are not responsible for the content. At the same time, a web master shouldn’t have to go mucking around in a graphic artists work and add code since this is just a big waste of time. For larger companies, there are three teams. One for programming the back end, one for the looks and one for the content. They all talk in the beginning, but in the end, none should cause problems for the other team.
Screw the middle man routine.
I’ve gone over this before in my mind, but I’ve finally got to get serious about it. CSS ladies and gents…
- CSS is used by both the authors and readers of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document structure (written in HTML or a similar markup language) from document presentation (written in CSS). This separation provides a number of benefits, including improved content accessibility, greater flexibility and control in the specification of presentational characteristics, and reduced complexity of the structural content. CSS is also capable of controlling the document’s style separately in alternative rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on braille-based, tactile devices.Wikipedia
Why CSS - Why Not Smarty Or PaTemplate?
For the same reasons and others… Smarty and PaTemplate don’t officially separate the content from the code. While setting up both, a designer still has to cut and paste small bits of php ie: print $content all over the page to make it work right.
Smarty has other drawbacks as well. While the Smarty community loves it, I personally don’t need to learn a whole new “language” of functions. PHP is PHP is PHP - stop changing it… If you want to change it, become a PHP core developer.
Remember how I said some TE’s are bloated? Smarty is bloated no matter which way you look at it. The latest source for Smarty (May06) has about 112 files (this is everything, an educated guess says half are deletable). Thats bigger than some of the websites using Smarty! Know how many files you need to install for CSS Templates? None. CSS is a browser based standard (I acknowledge that some companies have changed the definition of “Standardâ€). No files to worry about other than the 1 CSS template file.
Now, CSS allows me complete separation between content, styles and code. This would allow someone to update 1 file and have an entire website updated instantly with the same content. Don’t believe me - try CSS Zen Garden. The content pulls from one file and the CSS is in another. Go ahead, view a few templates and compare the source of each one - its the same. The perfect Template Engine has been around for years and the poor Geeks of the world are trying to recreate it.
The Problems With CSS
CSS currently has 3 standards. 1, 2 and (Soon… well, they’ve been saying “Soon†for about a year and a half now.) 3. The main problem is, not every browser in the world has even adopted the first set of standards. I wouldn’t even attempt the 3rd standard because its considered bleeding edge and you just might get hurt from your visitors for using it.
The other main problem of CSS is that others are less likely to use it. Look at me - it took me years to accept CSS for the Template Engine it is. With all of the code floating around in peoples heads, they’re less likely to want to learn CSS beyond what they may already know.
The Myths Of CSS
In the past, CSS has been labeled “Confusing, Stupid & Shitty”. Honestly, I’ve muttered the first 2 words several times. As of this writing, I’m still a little apprehensive about delving more into CSS design but its the only way for me to go at this point. There isn’t a single other Template Engine that can switch an entire website with one file without making changes to other files here and there. Once its built in, it should stay the same. That is, unless Standard 3 causes problems.
But, back on topic, CSS is usually associated with blocks (literally) of content. People think that you can’t have a decent looking website with CSS. Again, if you haven’t looked at CSSZenGarden - look at it. They have well over 100 templates setup and the only thing that is changed between them are the CSS files and the images. The content and code are completely separate.
Another thing newbies often get wrong is that they need some special program to work with code. Most don’t realize that you DON’T need FrontPage or something similar when coding. (On a more personal note, if I see a business website where I can tell, just by looking at it, that the site was designed with Frontpage, I leave within seconds. I wouldn’t even think about buying anything from a store designed in FrontPage.) All you need is Note Pad (keep saying that…) The only real tools you’ll need are 2 to 3 web browsers (seriously) and you can download them all for free.
- I personally have Internet Explorer, Firefox, Opera & Netscape installed on my main Windows programming box for testing. You really need to install multiple browsers to check over your work or someone will get something completely reverse of what you designed.
For my main SUSE Linux box, which I use more and more of, I have Firefox, Opera, Kongueror and I’ll probably cram a few others in there as well.
And again - CSS is part of your browser so there are no fees, no downloads, etc.
There is another option. You can use the Free Validator at http://validator.w3.org. Heck, if you throw this site through it, there are exactly 112 errors in it. This is the main reason I so proudly include “Lost! is proudly powered by with invalid XHTML and CSS.” in the footer. (Hmm…typo, I gotta fix that)
Now, The Hard Part
Ok, I have to admit it - I’m a table junkie… Over the last few years, its been much easier to let a WYSIWYG editor (Dreamweaver, not FrontPage) draw my code for me. Now, I do tweek the actual code when I want to get dirty or do something that would take a little longer in the editor.
The tables are just so dang easy - just drop it in, stretch in more ways than one and throw content in…
When working with CSS though, I don’t want any tables. I want to give the Graphic Artists the ability to put the login anywhere they want without the tables messing it up in the browser.
- As a “for instance”: what happens when a Graphic Artist wants to throw a login prompt up in the right top corner of a page with only 50pixels worth of room when the template has a table for the login prompt setup to be 46% of the page? Houston - ya’ll got a problem…
But CSS Really IS A Pain!
I know, oh trust me, I do feel your pain… I just got done working on a CSS driven menu that took 7 hours to work out the kinks (note: this is what happens when you “learn” something when it first comes out and never touch it again).
The fact of the matter is, any language is a real pain when you first start REALLY getting into it. I remember my first hand coded PHP application. I spent days on a problem and the issue was one (yes, one) semi-colon… Now, I’m extra careful and know that PHP fails on one line when it means the one or few before it. (I personally love when the PHP parser tells you something has failed on the very last blank line of the file.)
Hard Coding CSS
Sometimes you have to break the rules. Sometimes something just doesn’t fit right or fits too well.
In my case, I have a collapsible CSS menu tree that looks very good a certain way. Now, I spent a heck of a lot of time hand coding and customizing this sucker. In my opinion, the next person isn’t going to want to worry about the way the menu looks because the CSS file for it is as big as a regular template file. If they want to edit it, they can, but for the most part - its hard coded and not included in the site CSS file.
Seriously
There really is no reason to download Smarty or PaTemplate or any of the other Template Engines. CSS does an awesome job with controlling the looks the feel (of cotten….) and most of all, it just plain makes it easier to change your entire website with 1 file update.
Now, I’ve changed lanes on my project again…gag - it’ll get released sometime before 2010.
