Page 1 of 1

Using templates and CSS

Posted: Fri Nov 21, 2008 4:58 am
by nfrandsen
Hey there,
I'm a computer science student on summer holidays messing around with a pet PHP project and have a question regarding the use of templates that I think fit in this section.
I have chosen to rebuild a existing application provided by a PHP guide I just completed, in the hope of learning a few design techniques. It uses PEAR templates to separate content from style, for example it has a main template that sets up headers and a navigation bar and then there are a few different templates for the various types of pages required for the website. When a page is opened the specific page type template is then merged with the main template and the content inputed through php block manipulation. My question is, why have this main template that only seems to set up things that are present on every page, why not just include this using CSS? Basically what can be archived by templates that cant be done by CSS?
Thank for your help guys!

Re: Using templates and CSS

Posted: Fri Nov 21, 2008 6:45 am
by Hannes2k
Hi,
nfrandsen wrote:Basically what can be archived by templates that cant be done by CSS?
Templates are much more powerfull than just CSS.

With CSS you can 'just' change the style of your site, the font/background color, font size, width & heights of container etc.
But you cannot change the structure of a site. With templates, you can.


For example take this board. If you change the css file, you can change only very basic aspects (font family, size, color etc.).
But if you have templates, you can change everything! You can add/remove easily new smilies or icons, you can change the structure of posts, e.g. from:

Code: Select all

 
author |  title                   Posted: Date
       | Text Text Text
       | Text Text Text
       | --------------
       | signature       
 
to

Code: Select all

 
Text Text Text
Text Text Text
-- written by author at Date   
 
Thats the big advantage of templates. You can easily create different designs of your application, e.g. one design/view for search engines, another design/view for blindly person and another design/view for normal humans.
It is also possible to create webservice or (rss, atom) feed for your site just by changing the templates. Try this with CSS.


Another advantage of using templates is the seperation of code and design. It's very easy to change the design/structure of the application, you just need some basic skills in HTML.
But, by the seperation you can also modify the logic of your programm without modifing the design.

Guess a webshop-software (e.g. osCommerce) without templates. Each shop should look different, so who runs the shop have to change the html code, which is mixed up with php code.
If there is now an update, maybe a fix of a vulnerability, and the programmers of osCommerce release a new version, it's nearly impossible to update the own shop, because all changes you have done would be lost.

But, because osCommerce uses templates, it's realy easy to update the own shop and you do not have to modify the (php) files again and again to get the old look of your site.

Re: Using templates and CSS

Posted: Fri Nov 21, 2008 10:19 am
by allspiritseve
nfrandsen wrote:why not just include this using CSS? Basically what can be archived by templates that cant be done by CSS?


The main template should include all HTML that is the same across every single one of your pages. You can style this however you like with your css, but you don't want to duplicate that html across every one of your individual page templates. Basically, in a nutshell the main template is to make changes to the overall appearance of the site easier.
Hannes2k wrote:With CSS you can 'just' change the style of your site, the font/background color, font size, width & heights of container etc. But you cannot change the structure of a site.
If you're not using table-based layouts, you can (and should) change structure with css.

Re: Using templates and CSS

Posted: Fri Nov 21, 2008 10:56 am
by Eran
Templates and CSS work together to achieve the same goals but are inherently different.
Templates include the mark-up (ie HTML) and dynamic information that PHP generates. CSS Controls the formatting of that markup. Re-use of both is recommended for creating a consistent look-and-feel and for developing better maintainable websites.

Re: Using templates and CSS

Posted: Fri Nov 21, 2008 12:30 pm
by Hannes2k
Him
allspiritseve wrote:If you're not using table-based layouts, you can (and should) change structure with css.
But your possibilities are extremly limited.

The design for a post (in this board) could look like:

Code: Select all

 
<div class="left">Hannes2k</div>
<div class="post">
  <div class="title">Using templates and CSS</div>
  <div class="post_text">Text Text Text</div>
</div>
now try to get another structure of your post just with CSS, maybe, that a post is displayed like:

Code: Select all

 
<b>Using templates and CSS</b><br />
Text Text Text<br />
Text Text Text<br />
 -- written by Hannes2k at 21.11.2008
 
or try to get a valid web service with css:

Code: Select all

 
<post>
  <author>Hannes2k</author>
  <title>Using templates and CSS</title>
  <date>21.11.2008</date>
  <text>Text Text Text</text>
</post>
With CSS: impossible.
With a good template engine: extremly easy.

Re: Using templates and CSS

Posted: Fri Nov 21, 2008 12:40 pm
by allspiritseve
Hannes2k wrote:now try to get another structure of your post just with CSS, maybe, that a post is displayed like:
I don't really understand your examples. What exactly do you think you can do structurally with html that you can't do with css? line breaks?

Re: Using templates and CSS

Posted: Fri Nov 21, 2008 2:41 pm
by Hannes2k
Hi,
allspiritseve wrote: I don't really understand your examples. What exactly do you think you can do structurally with html that you can't do with css? line breaks?
For example. Or to change the text. Or to insert new text. Or to change totaly the order of items.

The possibilities of CSS are very limited (else each document would just consists of the body tag).


If you just have the possibility to change the CSS file for a web application, all design you can create looks very simular. Maybe you can change colors, sizes and images, but you cannot insert/modify/delete containers/items to your website. Otherwise HTML would be absolute obsolete and creating a webdesign would just mean editing a css file of a standard template (which maybe is used by every website on earth).


I hope you understand what I mean.

Re: Using templates and CSS

Posted: Fri Nov 21, 2008 4:02 pm
by allspiritseve
Hannes2k wrote:For example. Or to change the text. Or to insert new text. Or to change totaly the order of items.
Making something block-width instead of inline would create a line break. Changing text isn't a structural concern, nor is inserting new text. (though you can insert text in CSS2-- see :after). Changing the order of items can be done with floats and positioning.
Hannes2k wrote:If you just have the possibility to change the CSS file for a web application, all design you can create looks very similar.
Ever seen the CSS Zen Garden?
Hannes2k wrote:Maybe you can change colors, sizes and images, but you cannot insert/modify/delete containers/items to your website.
You maybe can't insert and delete, (which arguably aren't structural concerns anyways) but you can show/hide, position, move, etc... (which arguably are structural concerns.
Hannes2k wrote:The possibilities of CSS are very limited
On the contrary; the possibilites of CSS are (nearly) endless.

Re: Using templates and CSS

Posted: Fri Nov 28, 2008 7:58 pm
by josh
Hannes2k wrote: Or to change the text.
??? Not sure what you mean. What about the visible property though?
Hannes2k wrote:Or to insert new text.
Visible property.
Hannes2k wrote:Or to change totaly the order of items.
CSS does this.
Hannes2k wrote:The possibilities of CSS are very limited (else each document would just consists of the body tag).
???? CSS addresses different forces than HTML. HTML should structure the document logically using semantic tags, CSS is like a visual map layer laid over the underlying structure, to change the formatting for presentation. If the underlying structure needs to change you should use a templating system. If you don't need to manipulate template pragmatically you may find looking into XSL transformations interesting as well.

Hannes2k wrote:If you just have the possibility to change the CSS file for a web application, all design you can create looks very simular. Maybe you can change colors, sizes and images, but you cannot insert/modify/delete containers/items to your website.
Yes you can.
Hannes2k wrote: Otherwise HTML would be absolute obsolete
HTML doesn't address problems in the same context that CSS does.
Hannes2k wrote: and creating a webdesign would just mean editing a css file of a standard template
It does. If you understand how to use it


Hannes2k wrote:I hope you understand what I mean.
Nope :cry: