RFC: UI Refactor Part 2

[Adrian Crum]

Thanks to Marco's tireless work refactoring the back office UI to use the new styles, we are almost
at a point where the deprecated styles can be removed from the back office main style sheet. So, I
thought I'd share some ideas I've come up with since the UI refactoring effort started and ask for
comments.

1. Change the head1, head2, and head3 style names to h1, h2, and h3. This will make those styles
more interchangeable with <h> elements. So, you could have

<h1>Some big bold text</h1>

or

<span class="h1">Some big bold text</span>

2. Remove color attributes from the h1 - h3 styles and have them inherit their container's colors.
This would make those styles more generic and reusable. We could use the h1 - h3 styles mainly for
font size standardization, and leave any additional styling to the container. This approach will
also reduce the complexity of the main style sheet.

Markup can be simplifed by using the h1 - h3 styles as decorators for other styles. For example,
instead of:

<div class="screenlet-title-bar">
   <h3>Some Title Text</h3>
</div>

you could have

<div class="screenlet-title-bar h3">
   Some Title Text
</div>

This approach would fix a layout bug in the screenlet title bar. It would also work better with the
screen widget's HTML output.

Idea #1 is a simple search and replace operation. Idea #2 will take more work because the style
change will break existing layout. Those instances will be easy to find though, by searching for the
particular styles.

3. Work on better IE7 compatibility. When I first created the new styles, everything rendered
looking pretty much the same in Firefox and IE7. Now IE7 doesn't render as well. I don't know what
changed, but I'd like to investigate it and get that fixed.

4. Once the back office style sheet has the deprecated styles removed and some tweaks done, it would
be nice to bring the new styles and the lessons learned over into the ecommerce style sheet.

That's it. What do you think? Does anyone else have any ideas?

-Adrian

[David E Jones]

This looks good to me. It's great to see these things cleaned up and  
simplified.

-David


On Feb 1, 2008, at 11:32 AM, Adrian Crum wrote:

> Thanks to Marco's tireless work refactoring the back office UI to  
> use the new styles, we are almost at a point where the deprecated  
> styles can be removed from the back office main style sheet. So, I  
> thought I'd share some ideas I've come up with since the UI  
> refactoring effort started and ask for comments.
>
> 1. Change the head1, head2, and head3 style names to h1, h2, and h3.  
> This will make those styles more interchangeable with <h> elements.  
> So, you could have
>
> <h1>Some big bold text</h1>
>
> or
>
> <span class="h1">Some big bold text</span>
>
> 2. Remove color attributes from the h1 - h3 styles and have them  
> inherit their container's colors. This would make those styles more  
> generic and reusable. We could use the h1 - h3 styles mainly for  
> font size standardization, and leave any additional styling to the  
> container. This approach will also reduce the complexity of the main  
> style sheet.
>
> Markup can be simplifed by using the h1 - h3 styles as decorators  
> for other styles. For example, instead of:
>
> <div class="screenlet-title-bar">
>  <h3>Some Title Text</h3>
> </div>
>
> you could have
>
> <div class="screenlet-title-bar h3">
>  Some Title Text
> </div>
>
> This approach would fix a layout bug in the screenlet title bar. It  
> would also work better with the screen widget's HTML output.
>
> Idea #1 is a simple search and replace operation. Idea #2 will take  
> more work because the style change will break existing layout. Those  
> instances will be easy to find though, by searching for the  
> particular styles.
>
> 3. Work on better IE7 compatibility. When I first created the new  
> styles, everything rendered looking pretty much the same in Firefox  
> and IE7. Now IE7 doesn't render as well. I don't know what changed,  
> but I'd like to investigate it and get that fixed.
>
> 4. Once the back office style sheet has the deprecated styles  
> removed and some tweaks done, it would be nice to bring the new  
> styles and the lessons learned over into the ecommerce style sheet.
>
> That's it. What do you think? Does anyone else have any ideas?
>
> -Adrian
>

Hi Adrian,

I agree with you on all these points, probably we can also replace all the <b> tag with <span class="label">.
In any case there still some deprecated style to be removed from the forms in the back end application and still some application to be converted to the new styles (like order entry, ecommerce, specialpurpose applications, framework applications).
I have tried to used head3 instead of use head4 into the screen and seems to me ok.

Thanks
Marco

----

Il giorno 01/feb/08, alle ore 19:32, Adrian Crum ha scritto:

Thanks to Marco's tireless work refactoring the back office UI to use the new styles, we are almost at a point where the deprecated styles can be removed from the back office main style sheet. So, I thought I'd share some ideas I've come up with since the UI refactoring effort started and ask for comments.

1. Change the head1, head2, and head3 style names to h1, h2, and h3. This will make those styles more interchangeable with <h> elements. So, you could have

<h1>Some big bold text</h1>

or

<span class="h1">Some big bold text</span>

2. Remove color attributes from the h1 - h3 styles and have them inherit their container's colors. This would make those styles more generic and reusable. We could use the h1 - h3 styles mainly for font size standardization, and leave any additional styling to the container. This approach will also reduce the complexity of the main style sheet.

Markup can be simplifed by using the h1 - h3 styles as decorators for other styles. For example, instead of:

<div class="screenlet-title-bar">
 <h3>Some Title Text</h3>
</div>

you could have

<div class="screenlet-title-bar h3">
 Some Title Text
</div>

This approach would fix a layout bug in the screenlet title bar. It would also work better with the screen widget's HTML output.

Idea #1 is a simple search and replace operation. Idea #2 will take more work because the style change will break existing layout. Those instances will be easy to find though, by searching for the particular styles.

3. Work on better IE7 compatibility. When I first created the new styles, everything rendered looking pretty much the same in Firefox and IE7. Now IE7 doesn't render as well. I don't know what changed, but I'd like to investigate it and get that fixed.

4. Once the back office style sheet has the deprecated styles removed and some tweaks done, it would be nice to bring the new styles and the lessons learned over into the ecommerce style sheet.

That's it. What do you think? Does anyone else have any ideas?

-Adrian

[Jacques Le Roux]

+1

Jacques
From: "David E Jones" <[hidden email]>

>
> This looks good to me. It's great to see these things cleaned up and  
> simplified.
>
> -David
>
>
> On Feb 1, 2008, at 11:32 AM, Adrian Crum wrote:
>
>> Thanks to Marco's tireless work refactoring the back office UI to  
>> use the new styles, we are almost at a point where the deprecated  
>> styles can be removed from the back office main style sheet. So, I  
>> thought I'd share some ideas I've come up with since the UI  
>> refactoring effort started and ask for comments.
>>
>> 1. Change the head1, head2, and head3 style names to h1, h2, and h3.  
>> This will make those styles more interchangeable with <h> elements.  
>> So, you could have
>>
>> <h1>Some big bold text</h1>
>>
>> or
>>
>> <span class="h1">Some big bold text</span>
>>
>> 2. Remove color attributes from the h1 - h3 styles and have them  
>> inherit their container's colors. This would make those styles more  
>> generic and reusable. We could use the h1 - h3 styles mainly for  
>> font size standardization, and leave any additional styling to the  
>> container. This approach will also reduce the complexity of the main  
>> style sheet.
>>
>> Markup can be simplifed by using the h1 - h3 styles as decorators  
>> for other styles. For example, instead of:
>>
>> <div class="screenlet-title-bar">
>>  <h3>Some Title Text</h3>
>> </div>
>>
>> you could have
>>
>> <div class="screenlet-title-bar h3">
>>  Some Title Text
>> </div>
>>
>> This approach would fix a layout bug in the screenlet title bar. It  
>> would also work better with the screen widget's HTML output.
>>
>> Idea #1 is a simple search and replace operation. Idea #2 will take  
>> more work because the style change will break existing layout. Those  
>> instances will be easy to find though, by searching for the  
>> particular styles.
>>
>> 3. Work on better IE7 compatibility. When I first created the new  
>> styles, everything rendered looking pretty much the same in Firefox  
>> and IE7. Now IE7 doesn't render as well. I don't know what changed,  
>> but I'd like to investigate it and get that fixed.
>>
>> 4. Once the back office style sheet has the deprecated styles  
>> removed and some tweaks done, it would be nice to bring the new  
>> styles and the lessons learned over into the ecommerce style sheet.
>>
>> That's it. What do you think? Does anyone else have any ideas?
>>
>> -Adrian
>>
>
>

[David E Jones]

I haven't been as involved in this most recent effort, but as a  
general approach for working with HTML and CSS the minimal style seems  
to work best and produce the most flexible and small code.

In other words instead of using:

<span class="head1">...</span>

we should just use:

<h1>...</h1>

Along with this if we want to style things in one part of a page  
different from the rest we simply wrap that page in a div tag with an  
id attribute like this:

<div id="CheckoutLeftBar">...</div>

For examples of how this should ideally work the index.html page for  
the ofbiz.apache.org web site is a good example. The different  
sections have their own IDs and the tags within them are simple,  
standard HTML tags like <a>, <p>, <h2>, etc.

-David


On Feb 1, 2008, at 5:05 PM, [hidden email] wrote:

> Hi Adrian,
>
> I agree with you on all these points, probably we can also replace  
> all the <b> tag with <span class="label">.
> In any case there still some deprecated style to be removed from the  
> forms in the back end application and still some application to be  
> converted to the new styles (like order entry, ecommerce,  
> specialpurpose applications, framework applications).
> I have tried to used head3 instead of use head4 into the screen and  
> seems to me ok.
>
> Thanks
> Marco
>
> ----
>
> Il giorno 01/feb/08, alle ore 19:32, Adrian Crum ha scritto:
>
> Thanks to Marco's tireless work refactoring the back office UI to  
> use the new styles, we are almost at a point where the deprecated  
> styles can be removed from the back office main style sheet. So, I  
> thought I'd share some ideas I've come up with since the UI  
> refactoring effort started and ask for comments.
>
> 1. Change the head1, head2, and head3 style names to h1, h2, and h3.  
> This will make those styles more interchangeable with <h> elements.  
> So, you could have
>
> <h1>Some big bold text</h1>
>
> or
>
> <span class="h1">Some big bold text</span>
>
> 2. Remove color attributes from the h1 - h3 styles and have them  
> inherit their container's colors. This would make those styles more  
> generic and reusable. We could use the h1 - h3 styles mainly for  
> font size standardization, and leave any additional styling to the  
> container. This approach will also reduce the complexity of the main  
> style sheet.
>
> Markup can be simplifed by using the h1 - h3 styles as decorators  
> for other styles. For example, instead of:
>
> <div class="screenlet-title-bar">
> <h3>Some Title Text</h3>
> </div>
>
> you could have
>
> <div class="screenlet-title-bar h3">
> Some Title Text
> </div>
>
> This approach would fix a layout bug in the screenlet title bar. It  
> would also work better with the screen widget's HTML output.
>
> Idea #1 is a simple search and replace operation. Idea #2 will take  
> more work because the style change will break existing layout. Those  
> instances will be easy to find though, by searching for the  
> particular styles.
>
> 3. Work on better IE7 compatibility. When I first created the new  
> styles, everything rendered looking pretty much the same in Firefox  
> and IE7. Now IE7 doesn't render as well. I don't know what changed,  
> but I'd like to investigate it and get that fixed.
>
> 4. Once the back office style sheet has the deprecated styles  
> removed and some tweaks done, it would be nice to bring the new  
> styles and the lessons learned over into the ecommerce style sheet.
>
> That's it. What do you think? Does anyone else have any ideas?
>
> -Adrian
>
>
>

[Jacques Le Roux]

Yes, I agree.

I was confused by Marco's suggestion too. I mean, I can't see what is the point in replacing all the <b> tag by <span
class="label">.
This because a HTML tag is obviously the simplest way of coding in HTML (simple is beautiful :o). But maybe I'm msiggin something
here ?

Jacques

From: "David E Jones" <[hidden email]>

>
> I haven't been as involved in this most recent effort, but as a  general approach for working with HTML and CSS the minimal style
> seems  to work best and produce the most flexible and small code.
>
> In other words instead of using:
>
> <span class="head1">...</span>
>
> we should just use:
>
> <h1>...</h1>
>
> Along with this if we want to style things in one part of a page  different from the rest we simply wrap that page in a div tag
> with an  id attribute like this:
>
> <div id="CheckoutLeftBar">...</div>
>
> For examples of how this should ideally work the index.html page for  the ofbiz.apache.org web site is a good example. The
> different  sections have their own IDs and the tags within them are simple,  standard HTML tags like <a>, <p>, <h2>, etc.
>
> -David
>
>
> On Feb 1, 2008, at 5:05 PM, [hidden email] wrote:
>
>> Hi Adrian,
>>
>> I agree with you on all these points, probably we can also replace  all the <b> tag with <span class="label">.
>> In any case there still some deprecated style to be removed from the  forms in the back end application and still some
>> application to be  converted to the new styles (like order entry, ecommerce,  specialpurpose applications, framework
>> applications).
>> I have tried to used head3 instead of use head4 into the screen and  seems to me ok.
>>
>> Thanks
>> Marco
>>
>> ----
>>
>> Il giorno 01/feb/08, alle ore 19:32, Adrian Crum ha scritto:
>>
>> Thanks to Marco's tireless work refactoring the back office UI to  use the new styles, we are almost at a point where the
>> deprecated  styles can be removed from the back office main style sheet. So, I  thought I'd share some ideas I've come up with
>> since the UI  refactoring effort started and ask for comments.
>>
>> 1. Change the head1, head2, and head3 style names to h1, h2, and h3.  This will make those styles more interchangeable with <h>
>> elements.  So, you could have
>>
>> <h1>Some big bold text</h1>
>>
>> or
>>
>> <span class="h1">Some big bold text</span>
>>
>> 2. Remove color attributes from the h1 - h3 styles and have them  inherit their container's colors. This would make those styles
>> more  generic and reusable. We could use the h1 - h3 styles mainly for  font size standardization, and leave any additional
>> styling to the  container. This approach will also reduce the complexity of the main  style sheet.
>>
>> Markup can be simplifed by using the h1 - h3 styles as decorators  for other styles. For example, instead of:
>>
>> <div class="screenlet-title-bar">
>> <h3>Some Title Text</h3>
>> </div>
>>
>> you could have
>>
>> <div class="screenlet-title-bar h3">
>> Some Title Text
>> </div>
>>
>> This approach would fix a layout bug in the screenlet title bar. It  would also work better with the screen widget's HTML output.
>>
>> Idea #1 is a simple search and replace operation. Idea #2 will take  more work because the style change will break existing
>> layout. Those  instances will be easy to find though, by searching for the  particular styles.
>>
>> 3. Work on better IE7 compatibility. When I first created the new  styles, everything rendered looking pretty much the same in
>> Firefox  and IE7. Now IE7 doesn't render as well. I don't know what changed,  but I'd like to investigate it and get that fixed.
>>
>> 4. Once the back office style sheet has the deprecated styles  removed and some tweaks done, it would be nice to bring the new
>> styles and the lessons learned over into the ecommerce style sheet.
>>
>> That's it. What do you think? Does anyone else have any ideas?
>>
>> -Adrian
>>
>>
>>
>
>

[Adrian Crum-2]

If you want to make text bold, then you should use the <b> tag. The label class does more than make text bold - it also has padding to separate the label from the element it describes.

As a general rule, we should try to use styles for their intended purpose. The label class should be used for labels only. If the label class is used for other purposes, then later on when someone restyles the main style sheet, you might end up with unpredictable results.

As far as <h1> versus <span class="h1"> is concerned, the <span> element is what the screen widget outputs. So, sometimes you don't have a choice in which element to use.

There are other alternatives to David's suggestion of wrapping things in <div> elements and restyling them. Not that there is anything wrong with that suggestion, I'm just saying there are other choices. You can have a local style that overrides the style sheet style. I've used those here and there in the project. The general rule I try to use is to make those local styles very small - so that restyling the main style sheet won't have an adverse impact on the local style.

-Adrian

Jacques Le Roux <[hidden email]> wrote: Yes, I agree.

I was confused by Marco's suggestion too. I mean, I can't see what is the point in replacing all the  tag by
class="label">.
This because a HTML tag is obviously the simplest way of coding in HTML (simple is beautiful :o). But maybe I'm msiggin something
here ?

Jacques

From: "David E Jones"

>
> I haven't been as involved in this most recent effort, but as a  general approach for working with HTML and CSS the minimal style
> seems  to work best and produce the most flexible and small code.
>
> In other words instead of using:
>
> ...
>
> we should just use:
>
> ...
>
> Along with this if we want to style things in one part of a page  different from the rest we simply wrap that page in a div tag
> with an  id attribute like this:
>
> ...

>
> For examples of how this should ideally work the index.html page for  the ofbiz.apache.org web site is a good example. The
> different  sections have their own IDs and the tags within them are simple,  standard HTML tags like , ,
, etc.

>
> -David
>
>
> On Feb 1, 2008, at 5:05 PM, [hidden email] wrote:
>
>> Hi Adrian,
>>
>> I agree with you on all these points, probably we can also replace  all the  tag with .
>> In any case there still some deprecated style to be removed from the  forms in the back end application and still some
>> application to be  converted to the new styles (like order entry, ecommerce,  specialpurpose applications, framework
>> applications).
>> I have tried to used head3 instead of use head4 into the screen and  seems to me ok.
>>
>> Thanks
>> Marco
>>
>> ----
>>
>> Il giorno 01/feb/08, alle ore 19:32, Adrian Crum ha scritto:
>>
>> Thanks to Marco's tireless work refactoring the back office UI to  use the new styles, we are almost at a point where the
>> deprecated  styles can be removed from the back office main style sheet. So, I  thought I'd share some ideas I've come up with
>> since the UI  refactoring effort started and ask for comments.
>>
>> 1. Change the head1, head2, and head3 style names to h1, h2, and h3.  This will make those styles more interchangeable with  
>> elements.  So, you could have
>>
>> Some big bold text
>>
>> or
>>
>> Some big bold text
>>
>> 2. Remove color attributes from the h1 - h3 styles and have them  inherit their container's colors. This would make those styles
>> more  generic and reusable. We could use the h1 - h3 styles mainly for  font size standardization, and leave any additional
>> styling to the  container. This approach will also reduce the complexity of the main  style sheet.
>>
>> Markup can be simplifed by using the h1 - h3 styles as decorators  for other styles. For example, instead of:
>>
>>
>> Some Title Text
>>

>>
>> you could have
>>
>>
>> Some Title Text
>>

>>
>> This approach would fix a layout bug in the screenlet title bar. It  would also work better with the screen widget's HTML output.
>>
>> Idea #1 is a simple search and replace operation. Idea #2 will take  more work because the style change will break existing
>> layout. Those  instances will be easy to find though, by searching for the  particular styles.
>>
>> 3. Work on better IE7 compatibility. When I first created the new  styles, everything rendered looking pretty much the same in
>> Firefox  and IE7. Now IE7 doesn't render as well. I don't know what changed,  but I'd like to investigate it and get that fixed.
>>
>> 4. Once the back office style sheet has the deprecated styles  removed and some tweaks done, it would be nice to bring the new
>> styles and the lessons learned over into the ecommerce style sheet.
>>
>> That's it. What do you think? Does anyone else have any ideas?
>>
>> -Adrian
>>
>>
>>
>
>

       
---------------------------------
Be a better friend, newshound, and know-it-all with Yahoo! Mobile.  Try it now.

[Jacques Le Roux]

Thanks for comment Adrian,

Jacques

From: "Adrian Crum" <[hidden email]>

> If you want to make text bold, then you should use the <b> tag. The label class does more than make text bold - it also has
> padding to separate the label from the element it describes.
>
> As a general rule, we should try to use styles for their intended purpose. The label class should be used for labels only. If the
> label class is used for other purposes, then later on when someone restyles the main style sheet, you might end up with
> unpredictable results.
>
> As far as <h1> versus <span class="h1"> is concerned, the <span> element is what the screen widget outputs. So, sometimes you
> don't have a choice in which element to use.
>
> There are other alternatives to David's suggestion of wrapping things in <div> elements and restyling them. Not that there is
> anything wrong with that suggestion, I'm just saying there are other choices. You can have a local style that overrides the style
> sheet style. I've used those here and there in the project. The general rule I try to use is to make those local styles very
> small - so that restyling the main style sheet won't have an adverse impact on the local style.
>
> -Adrian
>
> Jacques Le Roux <[hidden email]> wrote: Yes, I agree.
>
> I was confused by Marco's suggestion too. I mean, I can't see what is the point in replacing all the  tag by
> class="label">.
> This because a HTML tag is obviously the simplest way of coding in HTML (simple is beautiful :o). But maybe I'm msiggin something
> here ?
>
> Jacques
>
> From: "David E Jones"
>>
>> I haven't been as involved in this most recent effort, but as a  general approach for working with HTML and CSS the minimal style
>> seems  to work best and produce the most flexible and small code.
>>
>> In other words instead of using:
>>
>> ...
>>
>> we should just use:
>>
>> ...
>>
>> Along with this if we want to style things in one part of a page  different from the rest we simply wrap that page in a div tag
>> with an  id attribute like this:
>>
>> ...
>
>>
>> For examples of how this should ideally work the index.html page for  the ofbiz.apache.org web site is a good example. The
>> different  sections have their own IDs and the tags within them are simple,  standard HTML tags like , ,
> , etc.
>>
>> -David
>>
>>
>> On Feb 1, 2008, at 5:05 PM, [hidden email] wrote:
>>
>>> Hi Adrian,
>>>
>>> I agree with you on all these points, probably we can also replace  all the  tag with .
>>> In any case there still some deprecated style to be removed from the  forms in the back end application and still some
>>> application to be  converted to the new styles (like order entry, ecommerce,  specialpurpose applications, framework
>>> applications).
>>> I have tried to used head3 instead of use head4 into the screen and  seems to me ok.
>>>
>>> Thanks
>>> Marco
>>>
>>> ----
>>>
>>> Il giorno 01/feb/08, alle ore 19:32, Adrian Crum ha scritto:
>>>
>>> Thanks to Marco's tireless work refactoring the back office UI to  use the new styles, we are almost at a point where the
>>> deprecated  styles can be removed from the back office main style sheet. So, I  thought I'd share some ideas I've come up with
>>> since the UI  refactoring effort started and ask for comments.
>>>
>>> 1. Change the head1, head2, and head3 style names to h1, h2, and h3.  This will make those styles more interchangeable with
>>> elements.  So, you could have
>>>
>>> Some big bold text
>>>
>>> or
>>>
>>> Some big bold text
>>>
>>> 2. Remove color attributes from the h1 - h3 styles and have them  inherit their container's colors. This would make those styles
>>> more  generic and reusable. We could use the h1 - h3 styles mainly for  font size standardization, and leave any additional
>>> styling to the  container. This approach will also reduce the complexity of the main  style sheet.
>>>
>>> Markup can be simplifed by using the h1 - h3 styles as decorators  for other styles. For example, instead of:
>>>
>>>
>>> Some Title Text
>>>
>
>>>
>>> you could have
>>>
>>>
>>> Some Title Text
>>>
>
>>>
>>> This approach would fix a layout bug in the screenlet title bar. It  would also work better with the screen widget's HTML
>>> output.
>>>
>>> Idea #1 is a simple search and replace operation. Idea #2 will take  more work because the style change will break existing
>>> layout. Those  instances will be easy to find though, by searching for the  particular styles.
>>>
>>> 3. Work on better IE7 compatibility. When I first created the new  styles, everything rendered looking pretty much the same in
>>> Firefox  and IE7. Now IE7 doesn't render as well. I don't know what changed,  but I'd like to investigate it and get that fixed.
>>>
>>> 4. Once the back office style sheet has the deprecated styles  removed and some tweaks done, it would be nice to bring the new
>>> styles and the lessons learned over into the ecommerce style sheet.
>>>
>>> That's it. What do you think? Does anyone else have any ideas?
>>>
>>> -Adrian
>>>
>>>
>>>
>>
>>
>
>
>
>
> ---------------------------------
> Be a better friend, newshound, and know-it-all with Yahoo! Mobile.  Try it now.

Hi to all,

I have replace all the head4 style with head3 and now Adrian you continue with what you want to do next.
About my suggestion to replace of <B> to <span class="label"> is because I'm not sure that the <B> tag can be interpreted to all the browser if it will be inserted into main.css for having general css rules applied.
By the way what you have proposed is it ok for me.

Thanks
Marco


Il giorno 03/feb/08, alle ore 16:18, Adrian Crum ha scritto:

If you want to make text bold, then you should use the <b> tag. The label class does more than make text bold - it also has padding to separate the label from the element it describes.

As a general rule, we should try to use styles for their intended purpose. The label class should be used for labels only. If the label class is used for other purposes, then later on when someone restyles the main style sheet, you might end up with unpredictable results.

As far as <h1> versus <span class="h1"> is concerned, the <span> element is what the screen widget outputs. So, sometimes you don't have a choice in which element to use.

There are other alternatives to David's suggestion of wrapping things in <div> elements and restyling them. Not that there is anything wrong with that suggestion, I'm just saying there are other choices. You can have a local style that overrides the style sheet style. I've used those here and there in the project. The general rule I try to use is to make those local styles very small - so that restyling the main style sheet won't have an adverse impact on the local style.

-Adrian

Jacques Le Roux <[hidden email]> wrote: Yes, I agree.

I was confused by Marco's suggestion too. I mean, I can't see what is the point in replacing all the  tag by
class="label">.
This because a HTML tag is obviously the simplest way of coding in HTML (simple is beautiful :o). But maybe I'm msiggin something
here ?

Jacques

From: "David E Jones"

I haven't been as involved in this most recent effort, but as a  general approach for working with HTML and CSS the minimal style
seems  to work best and produce the most flexible and small code.

In other words instead of using:

...

we should just use:

...

Along with this if we want to style things in one part of a page  different from the rest we simply wrap that page in a div tag
with an  id attribute like this:

...


For examples of how this should ideally work the index.html page for  the ofbiz.apache.org web site is a good example. The
different  sections have their own IDs and the tags within them are simple,  standard HTML tags like , ,
, etc.

-David


On Feb 1, 2008, at 5:05 PM, [hidden email] wrote:

Hi Adrian,

I agree with you on all these points, probably we can also replace  all the  tag with .
In any case there still some deprecated style to be removed from the  forms in the back end application and still some
application to be  converted to the new styles (like order entry, ecommerce,  specialpurpose applications, framework
applications).
I have tried to used head3 instead of use head4 into the screen and  seems to me ok.

Thanks
Marco

----

Il giorno 01/feb/08, alle ore 19:32, Adrian Crum ha scritto:

Thanks to Marco's tireless work refactoring the back office UI to  use the new styles, we are almost at a point where the
deprecated  styles can be removed from the back office main style sheet. So, I  thought I'd share some ideas I've come up with
since the UI  refactoring effort started and ask for comments.

1. Change the head1, head2, and head3 style names to h1, h2, and h3.  This will make those styles more interchangeable with
elements.  So, you could have

Some big bold text

or

Some big bold text

2. Remove color attributes from the h1 - h3 styles and have them  inherit their container's colors. This would make those styles
more  generic and reusable. We could use the h1 - h3 styles mainly for  font size standardization, and leave any additional
styling to the  container. This approach will also reduce the complexity of the main  style sheet.

Markup can be simplifed by using the h1 - h3 styles as decorators  for other styles. For example, instead of:


Some Title Text



you could have


Some Title Text



This approach would fix a layout bug in the screenlet title bar. It  would also work better with the screen widget's HTML output.

Idea #1 is a simple search and replace operation. Idea #2 will take  more work because the style change will break existing
layout. Those  instances will be easy to find though, by searching for the  particular styles.

3. Work on better IE7 compatibility. When I first created the new  styles, everything rendered looking pretty much the same in
Firefox  and IE7. Now IE7 doesn't render as well. I don't know what changed,  but I'd like to investigate it and get that fixed.

4. Once the back office style sheet has the deprecated styles  removed and some tweaks done, it would be nice to bring the new
styles and the lessons learned over into the ecommerce style sheet.

That's it. What do you think? Does anyone else have any ideas?

-Adrian









---------------------------------
Be a better friend, newshound, and know-it-all with Yahoo! Mobile.  Try it now.