Backend Theme in eCommerce

[Jacques Le Roux]

A quick question (mostly intended to Adrian I guess). Why don't we use the backend colourful CSS theme in eCommerce ?

Thanks

Jacques

[Adrian Crum]

Jacques Le Roux wrote:
 > A quick question (mostly intended to Adrian I guess). Why don't we use the backend colourful CSS
theme in eCommerce ?

Jacques,

The back office apps were styled based on the general agreement that the new styles can target newer
browsers - older (non-compliant) browsers were not a concern.

The eCommerce component needs to work with the majority of browsers - even the broken ones. A lot of
the backend styling doesn't work in certain browsers, so we can't just copy the back office styles
over to eCommerce.

The approach taken in the back office apps could be repeated in eCommerce - taking care to introduce
styles that will work in most browsers.

One difference is you would want to specify sizes in pixels - so there will be greater control over
the layout. The back office apps were made scalable (using ems) and accessible - a good feature. As
a result, the layout is "fluid" - things move around when default font sizes are changed or the
window size is changed. That behavior might be undesirable in eCommerce.

Here are the steps taken during the back office UI refactoring:

1. Eliminate redundant properties settings (fonts and font size for example) in the main style
sheet. The "Resets" and "Basic Element" sections of maincss.css could be copied over to facilitate
that (converting em to px in the process).

2. Reduce the number of CSS styles by using descendent selectors. In other words, style HTML element
compounds - not individual HTML elements.

3. Convert table-based layout to CSS-based layout. Use the screenlet classes, etc.

The eCommerce style sheet will probably require browser-specific hacks. That is an area I am not
proficient with. Maybe some CSS gurus in the developer community can help with that.

So, the bottom line is - the process used in the back office apps can be used as a model, but the
steps need to be carried out differently to maintain browser compatibility.

-Adrian

[Jacques Le Roux]

Adrian,

Thanks for these explanations. I created a Jira issue for this
https://issues.apache.org/jira/browse/OFBIZ-1119

Jacques

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

> Jacques Le Roux wrote:
>  > A quick question (mostly intended to Adrian I guess). Why don't we use the backend colourful CSS
> theme in eCommerce ?
>
> Jacques,
>
> The back office apps were styled based on the general agreement that the new styles can target newer
> browsers - older (non-compliant) browsers were not a concern.
>
> The eCommerce component needs to work with the majority of browsers - even the broken ones. A lot of
> the backend styling doesn't work in certain browsers, so we can't just copy the back office styles
> over to eCommerce.
>
> The approach taken in the back office apps could be repeated in eCommerce - taking care to introduce
> styles that will work in most browsers.
>
> One difference is you would want to specify sizes in pixels - so there will be greater control over
> the layout. The back office apps were made scalable (using ems) and accessible - a good feature. As
> a result, the layout is "fluid" - things move around when default font sizes are changed or the
> window size is changed. That behavior might be undesirable in eCommerce.
>
> Here are the steps taken during the back office UI refactoring:
>
> 1. Eliminate redundant properties settings (fonts and font size for example) in the main style
> sheet. The "Resets" and "Basic Element" sections of maincss.css could be copied over to facilitate
> that (converting em to px in the process).
>
> 2. Reduce the number of CSS styles by using descendent selectors. In other words, style HTML element
> compounds - not individual HTML elements.
>
> 3. Convert table-based layout to CSS-based layout. Use the screenlet classes, etc.
>
> The eCommerce style sheet will probably require browser-specific hacks. That is an area I am not
> proficient with. Maybe some CSS gurus in the developer community can help with that.
>
> So, the bottom line is - the process used in the back office apps can be used as a model, but the
> steps need to be carried out differently to maintain browser compatibility.
>
> -Adrian