Correct, all CSS & JS will be included directly in the <head> of the page. The work also includes a runtime toggle to switch between the raw CSS/JS and the compress and aggregated versions which will hopefully make development a bit easier.

I think all the points of the proposal sound great, +1 from me.

What sort of time frame do you think you'd have for this work?

-Eric

Gary Thompson wrote:
Eric,

If I understand the work done for UP-2505, there will not be a need for a main CSS file that imports other CSS files as this new aggregator will be doing that?

With that consideration, and some further thought on naming, I would like to propose this for uPortal skins:

[skinDirectory]
   - portal.css
   - portlet.css
   - thumb.gif
   - [images]

1. [skinDirectory]
This directory is named with the skin name. Everything contained in this folder should be named generically (i.e., not include the skin name in file names).

2. portal.css
The primary, portal-scoped CSS file and the new version of the "fluid.theme.skinname.css" file. Includes the Fluid Skinning System theme and uPortal-specific CSS. Overrides to FSS or jQueryui will be done in this file, if necessary. This will eliminate the previous "jquery.css" file.

3. portlet.css
Portlet-scoped CSS file that replaces the previous "uportal3_portlet_content.css" and includes the JSR-168 CSS spec. Eliminates the previous "jsr168_portlet_spec.css".

4. thumb.gif
Remove the skin name from the file name. Every skin's thumbnail file will be named "thumb.gif".

5. [images]
The images directory remains unchagned.  Any skin-specific images go here.

As part of these changes, we retire these CSS files:
 - skinname.css (no longer needed with the new aggregator)
 - jquery.css (overrides to jQueryui to be done in the new portal.css)
 - jsr168_portlet_spec.css (included in portlet.css)
 - skinname_legacy.css (no longer needed)
- skinname_ie6overrides.css (with the sunset of IE6, this is not needed by default; can be added as necessary)

For namespacing, I suggest adding the "up" namespace and keeping the "fluid-theme-name" classes on the <body> of the document:

<body class="up fluid-theme-uportal">

This keeps support for the Fluid Skinning System and other Fluid components, while allowing for the global "up" namespace that will facilitate not having to change that namespace in all the CSS files.

As is the current uPortal 3.x setup, Universality skins will continue to include these common (non-skinned) files:
- layout.css
- print.css

Overrides to layout.css should be done in portal.css or portlet.css as needed.

Gary Thompson
User Experience Leader
Unicon | www.unicon.net

----- Original Message -----
From: "Eric Dalquist" <[email protected]>
To: [email protected]
Cc: "Jen Bourey" <[email protected]>, "Matt Polizzotti" <[email protected]>, "Alex Bussa" <[email protected]>, "uportal-dev" <[email protected]> Sent: Friday, November 20, 2009 7:29:33 AM GMT -07:00 U.S. Mountain Time (Arizona)
Subject: Re:[uportal-dev] uPortal skin CSS

This sounds like a great proposal both for simplifying the skin file names as well as the CSS class names.

I just wanted to make sure that you're also aware of the work that Nick Blair has been doing on http://www.ja-sig.org/issues/browse/UP-2505

The result of this work will be a skin.xml file in each skin directory. This file will list all CSS and JS files the skin uses in the order they should be imported. I don't think these two sets of changes will cause each other any issues.

Something that will help with the aggregation that this new skin.xml and plugin provides is to as much as possible have CSS files listed so that files in the same directory are next to each other. The reason is if skin.xml lists:

/path/to/skin/main.css
/path/to/common/common.css
/path/to/skin/portlet.css

That can't be aggregated to reduce the number of files the browser downloads, where as the following:

/path/to/common/common.css
/path/to/skin/main.css
/path/to/skin/portlet.css

Could be aggregated down to a two files for the users browser to download.

-Eric

Gary Thompson wrote:

    As you know, we've been looking at refining uPortal CSS files.  A
    significant part of this is to accomplish UP-2389
    (http://www.ja-sig.org/issues/browse/UP-2389), and in general to
    make the process of creating and maintaining skins easier.  I
    wanted to run this proposal past you and get any feedback before I
    post it to the list.

    Here's the proposal:

    The root skin directory alone contains the unique skin name, for
    example "uportal3".  Each skin would contain these files:

    [skinDirectory]
       - main.css
       - fss-theme-uportal.css
       - portlet.css
       - thumb.gif
       - [images]

    The new structure does the following:

    1. main.css
    A repalcement of the previous, skin-specific "uportal3.css" file,
    this CSS will contain imports of any other skin CSS files, and is
    the file linked to from the portal <head>.

    2. fss-theme-uportal.css
    The primary, portal-scoped CSS file and the new version of the
    "fluid.theme.uportal3.css" file.  Formatted as Fluid Skinning
    System theme and follows the updated FSS file naming.  Overrides
    to FSS or jQueryui will be done in this file, if necessary.  This
    will eliminate the previous "jquery.css" file

    3. portlet.css
    Portlet-scoped CSS file that replaces the previous
"uportal3_portlet_content.css" and includes the JSR-168 CSS spec. Eliminates the previous "jsr168_portlet_spec.css"

    As a by-product, we will retire both "uportal3_legacy.css" and
    "uportal3_ie6overrride.css".  The legacy file had support for the
    deprecated "uportal-" classes.  An IE6-specific file will not be
    provided by default, but can be created as-needed.  We may have an
    IE conditional CSS call in the theme.

    We will also be changing the uPortal CSS namespace.  Previously,
    the skin name was put as a class on the body, and all CSS classes
    used this as a namespace.  We want to move away from using the
    skin name, and instead use a global uPortal namespace.  I am
    suggesting we use the class "up".  For example:

    <body class="up">

    and in the CSS:

    .up .classname ...

    instead of the previous:

    .fluid-theme-uportal3 .classname ...

    Let me know your thoughts.

    Gary Thompson
    User Experience Leader
    Unicon | www.unicon.net

--

You are currently subscribed to [email protected] as: 
[email protected]
To unsubscribe, change settings or access archives, see 
http://www.ja-sig.org/wiki/display/JSG/uportal-dev

Attachment: smime.p7s
Description: S/MIME Cryptographic Signature

Reply via email to