RFC: UI Refactor Part 2

[Adrian Crum <ad...@hlmksw.com>]

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

Re: RFC: UI Refactor Part 2

[Jacques Le Roux <ja...@les7arts.com>]

+1

Jacques
From: "David E Jones" <jo...@hotwaxmedia.com>
> 
> 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
>>
> 
>

Re: RFC: UI Refactor Part 2

[David E Jones <jo...@hotwaxmedia.com>]

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
>