1

Topic: Simplify CSS

This post is adressed to Paul in particular, but all designers too.

"Tables" system are very "loud" to customize. I know you are against float blocks but it's incredible. The Stylesheet is > 15/16 ko ! Only for One forum !

So I know you have rewritten once the CSS (in better), but I would like to know if it's possible to discuss to find the possibility to have "light" CSS in the future. And why not, playing width DD and display-inline to change the TABLE format.

Or ... another solution : integrate php inside CSS to enter all color schemes in variables

$color1 = #fff;
$color2 = #000; ...

Re: Simplify CSS

First of all, the stylesheets are cached by your browser, so they are only downloaded once (well, almost). Also, generating the stylesheets with PHP is not a good idea because it will put more strain on the webserver (having to involve PHP all the time).

"Programming is like sex: one mistake and you have to support it for the rest of your life."

3

Re: Simplify CSS

1. I'm OK with "it's cached once" ... but you see only the forum : but imagine you want to apply a design to a whole site

(http://www.sortons.net/nucleus/ vs http://www.sortons.net/forum) and you see a css app + a css app + a css app ... it's becoming grow ! I would like all my Style Sheets don't exceed 20ko ... and Pun = 14 ko ... smile

For php ... it's possible it creates "once" no ??? Php would be easier for colors, and change them (only the variables to change, and not whole css to update)

Re: Simplify CSS

But if you're going to create a style for both Nucleus and PunBB, why not start from scratch?

"Programming is like sex: one mistake and you have to support it for the rest of your life."

Re: Simplify CSS

The *_cs.css stylesheets are not hard to understand at all so I don't see why you would want the colors in php variables in the first place.

6

Re: Simplify CSS

It wouldn't make any difference putting the colours in variables. Either those variables are going to be used to generate a style block at the start of the xhtml output in which case your pages end up larger or you are going to use dynamic css which will generate a stylesheet identical to the existing one.

I think you can forget your dream of small stylesheets. The current trend is exactly the opposite. There is a new tableless and somewhat minimalistic forum called Vanilla which has stylesheets which are over 40k. The reality is that the less markup you use then the larger and more complex the stylesheets become. I think most people have concluded that heavier but cached stylesheets are a reasonable price to pay for lighter simpler web pages.

You should also remember that the size and complexity of the stylesheet is simply what is required to produce a particular style. If you want a smaller stylesheet then create a simpler style.

You have also got the relationship betwen using tables and the complexity of css the wrong way round. Tableless layouts require more and fancier css than tables.

Personally I'm coming round to the idea of replacing data tables with tableless designs but not because of the reasons usually given. There are now three times as many mobile phones as computers and pretty soon the majority of them will be web enabled. We could be getting to the point where people will expect web pages to work on handheld devices rather than simply hoping they do. The unfortunate truth is that even semantically correct properly marked up data tables look like crap on a narrow format device.

7

Re: Simplify CSS

But I'm OK with you !!!

But I think it's possible to simplify, that's all.

For example, I have rewritten CSS and some tags code of Nucleus : the stylesheet is now < 5 ko ! ... I have integrated the CSS nucleus inside my general CSS ... I know it's not possible with Pun ... but I think it's possible to have 10 ko ...

It's like Javascript / DHTML > before, to have a great tooltip (Overlib), your JS was 50 ko ... today other scripts (DOM power) do the SAME thing with 3 ko ... I believe about this smile

As you can see Paul, I have begun to work on tableless at http://www.sortons.net/dev/PunBB/test-punTableless.htm

Ok it's not perfect ... but it's the beginning : for a similar layout, look at the CSS ... I think the problem is table is too "long" to customize : the perfect example is "viewtopic" is very simple to customize, viewforum and index is a hell.

8

Re: Simplify CSS

I have looked Vanilla Forum. Don't like it : tableless doesn't mean "poor visual" smile

9 (edited by Jacq 2005-08-24 12:19)

Re: Simplify CSS

You could allways reduce the size of current css by running the files through a program which removes comments and unnecessary white space before putting them online. Try http://flumpcakes.co.uk/css/optimiser/ for example and propably you'll go under 10k easily.

10

Re: Simplify CSS

Any interest for me smile But thanx however.

I have found a very good article about my problem.
http://www.icant.co.uk/articles/cssconstants

11 (edited by badrad 2005-08-27 07:40)

Re: Simplify CSS

Paul wrote:

I think you can forget your dream of small stylesheets. The current trend is exactly the opposite... The reality is that the less markup you use then the larger and more complex the stylesheets become. I think most people have concluded that heavier but cached stylesheets are a reasonable price to pay for lighter simpler web pages.

...

You have also got the relationship betwen using tables and the complexity of css the wrong way round. Tableless layouts require more and fancier css than tables.

Well said. I work with CSS all the time in my job, and Paul is right on the mark here.

Paul wrote:

Personally I'm coming round to the idea of replacing data tables with tableless designs but not because of the reasons usually given. There are now three times as many mobile phones as computers and pretty soon the majority of them will be web enabled. We could be getting to the point where people will expect web pages to work on handheld devices rather than simply hoping they do. The unfortunate truth is that even semantically correct properly marked up data tables look like crap on a narrow format device.

Like many other CSS designers, I've long ago ditched tables (although I understand the difficulty this can cause), for many reasons, including handhelds. I only use tables now for tabular data, something that I've only had on one site I've designed so far.

I would be happy to see PunBB *eventually* become tableless, although its not a huge priority, especially since I'll have to redo my styles. Of course, I'll probably have to do that for 1.3 anyway.

12

Re: Simplify CSS

if Pun becomes tableless, the CSS will be reduce about 50% (it's easier to custom a div box than a TR / TD / BOX)

13

Re: Simplify CSS

Rod wrote:

if Pun becomes tableless, the CSS will be reduce about 50% (it's easier to custom a div box than a TR / TD / BOX)

That doesn't make sense. The css which relates to the tables makes up aboutt 10% of the total and most of that just sets column widths. Consequently, even if you deleted the tables and didn't replace them with anything else the maximum you could save would be 10%. In practice the replacement css for a tableless design would probably increase the size of the stylesheets by about 20%.

14 (edited by Rod 2005-08-27 15:58)

Re: Simplify CSS

Ohhhh no !! smile

I can copy/paste the actual code ... tr / td are everywhere, it's quite impressive.

a lot of parent / child css relation in the style >           #div table tr td {border-top : blabla} ... as I have posted before when you look > http://www.sortons.net/dev/PunBB/test-punTableless.htm (100% compatible IE / FF / OPERA) the code is very very small. And it's not the viewtopic.php which has the most CSS.

And I have played with span : and without them (don't need them, in fact), the code will be more little.



Edit : another thing (because I have not said it) : but the CSS is very good however.

15

Re: Simplify CSS

Rod: I'm not just guessing, I've measured it. Its 10.43%.

16 (edited by Rod 2005-08-27 16:43)

Re: Simplify CSS

I like you smile

Other things (I have erased all styles and rebuilt one per one to have a total control)

<div class="icon"><div class="nosize"><!-- --></div></div>

So in css, we have so ... class for icon and class for no size ... but I ask you the interest to put a div for no size ?

Reducing by this we obtain the same thing
<div class="icon"><span><!-- --></span></div>

and in css ... icon span { display : none }

So ... I play with IE / Firefox and Opera ... maybe you have coded in this way with other browsers ???

17

Re: Simplify CSS

I've changed that in 1.3. Its now just <div class="icon"><!-- --></div>. Class nosize has gone.

18

Re: Simplify CSS

OK smile et what do you think about my tableless presentation ???! It requires a min-width for gecko browsers, but it works well (et very less code, css and html)

19

Re: Simplify CSS

I want to share a rod his topic, When generating reports from database we use table for it and make span between cells and it too hard with complix reports, but when use DIV it more easy than tables by degine DIV width.

 |-----|----|---------|
 |-----|----|---------|
 |--|--|--|--|--|--|--|
 |--|--|--|--|--|--|--|
 |--|--|--|--|--|--|--|
 |-----|----|----|----|
 |-----|----|----+----|

for this table i must calc the span columns before generate the table, when useing div i have problem to understand CSS, like how i can make this cells (DIVs) contiguous (i used my dic:) ) i mean without wraping in the next line or (auto sized) or not autosized when i resize the browser.

If your people come crazy, you will not need to your mind any more.

20

Re: Simplify CSS

One of the advantages of the DIV layout, I would like to show the index forum like my agenda page
http://www.sortons.net/agenda/  > 1 box = 1 forum ... and with Tables it's not possible (or it's possible but very not beautiful at all)

smile

21

Re: Simplify CSS

Rod: If you go with a tableless design then faking a table is probably not the way to go. Tableless designs normally look more like this
http://jasidog.com/forums/index.php?act=idx

22 (edited by Rod 2005-08-28 21:11)

Re: Simplify CSS

Paul wrote:

Rod: If you go with a tableless design then faking a table is probably not the way to go. Tableless designs normally look more like this
http://jasidog.com/forums/index.php?act=idx

With tableless system, you have CHOICE : faking a table layout, but do all you want ... it's possible to change the layout simply with the CSS : or it's not possible when you have table (a table stays ... a table smile) but your example has given me ideas smile

23

Re: Simplify CSS

And for something more traditional
http://www.post21.co.uk/files/ttalt.html

A bit heavy on the css side but see how it degrades without the stylesheet.

24 (edited by badrad 2005-08-30 07:15)

Re: Simplify CSS

Paul wrote:

A bit heavy on the css side but see how it degrades without the stylesheet.

Sexy. I don't think that CSS is too heavy either.

If we are ditching tables *just for the sake of not using tables*, an argument could be made that the forum view is indeed tabular data and thus semantically ok to be an a table.

If we are ditching tables for added flexibility and accessiblity, then its all good. Are you planning a tableless design Paul, or just experimenting?

And off topic, I forgot will 1.3 be compatable with application/xhtml+xml?

Re: Simplify CSS

Paul wrote:

And for something more traditional
http://www.post21.co.uk/files/ttalt.html

A bit heavy on the css side but see how it degrades without the stylesheet.

thats awesome, i guess it allows for alot more flexibility on how the forum looks too