| Previous · Next | |
| User | Message |
|
preaction
|
Date: 9/20/2008 0:56 am · Subject: WebGUI.css -- Common Style Sheet · Rating: 1
Something I think should be added to the template working group's influence is a set of class names we can use inside WebGUI's core code for things like:
These things at minimum. These types of things are all over WebGUI but have no consistent style or placement. By making them have a common class, we can keep consistency and also make them pop-out at the user (which they should). These things would be defined in a global "webgui-core.css" file or somesuch. After we have things defined with common class names, a future possibility then is to have a custom stylesheet added to every request (including Admin Console or otherwise un-templatable pages). It's the benefit of being able to change how certain internal WebGUI pages look without the pain of making them actually templatable. This will work even better as we clean up the default WebGUI templates and the non-template pages. The power of stylesheets is immense, and we don't use it nearly enough. Is this something the Template Working Group would be interested in? Is this even a good idea? If this is too much, we can keep it on the back-burner for now. |
| Back to Top |
Rate [ | ]
|
|
patspam
|
Date: 9/21/2008 4:10 am · Subject: Re: WebGUI.css -- Common Style Sheet · Rating: 0
Hi Doug,Not that I speak for the group, but as far as I'm aware that's definitely on the agenda. I think Diona was the one who first raised the idea of creating standardized class names for errors/messages at the WUC discussion. I totally agree, we can and should do a lot more with CSS to make the customization process easier for the end user. One of the driving forces is to make wg easier to skin for people at all levels. For designers with no wg knowledge, that means better use of CSS. For people who understand templates, that means more accessible and more consistent templates, etc.. I'd like to start a discussion about ways in which we can minimize http requests, because, just like your suggestion, my guess is that one outcomes of the template re-working is going to be an increase in the number of CSS files. I'd like that to not lead to a decrease in front end performance. There's also a lot of sub-optimal loading of javascript files at the moment, partly as a result of the need to make assets work in multiple contexts, but also due to a lack of centralised coordination at the WebGUI level (e.g. a lot of assets, for example the current default YUI Navigation menu, blindly load in the YUI js/css files they require without coordinating with any other assets on the page which might also be loading duplicate resources or worse as part of a combined YUI roll-up file such as rest-fonts-grids.css or utilities.js). One easy first step would be to create a content filter that allows you to give a list of files you want concatenated together, like YUI introduced recently for their Yahoo-hosted files, e.g. http://domain.com/gimme_files?yui/yahoo-dom-event.js&some_other_file.js This only gets you so far because if you load different combinations of files on different pages that have shared resources then you lose the benefits of caching. But as soon as you get this far you start thinking that the JS/CSS should also be minimized, at which point it's probably more efficient to do it before the server starts rather than per-request. I'd love to see WebGUI get smarter too in the ways that script and link tags get written (via $session->style->setScript(), $session->style->setStyle() and template head block). For example, the Yahoo equivalent of the content filter example above actually has the smarts to work out the dependencies to make sure you've got all the YUI files you need, roll them up into combined files such as utilities.js, etc... (see YUI Dependency Configurator). If all WG JS was written in the unobtrusive mould then all script tags could be written to the end of the html body rather then in the html head etc.. Then there's new YUI.loader approach, which lazily loads all pre-requisite assets at runtime (it can even handle your own custom YUI widgets).. It looks like the YUI team is embracing this whole-heartedly in the YUI 3.x preview release. It will always be slower than script tags, but it solves most of the aforementioned problems quite nicely. hmm sorry for hijacking your thread. I've been mulling over this for a while and haven't come up with a simple solution yet so I'd really love to hear what different thoughts/ideas people have. Patrick On Sat, Sep 20, 2008 at 3:56 PM, <doug@plainblack.com> wrote: preaction wrote: |
| Back to Top |
Rate [ | ]
|
|
rogier
|
Date: 9/22/2008 4:56 am · Subject: Re: WebGUI.css -- Common Style Sheet · Rating: 0
I'd like to start a discussion about ways in which we can minimize http requests, because, just like your suggestion, my guess is that one outcomes of the template re-working is going to be an increase in the number of CSS files. I'd like that to not lead to a decrease in front end performance. There's also a lot of sub-optimal loading of javascript files at the moment, partly as a result of the need to make assets work in multiple contexts, but also due to a lack of centralised coordination at the WebGUI level (e.g. a lot of assets, for example the current default YUI Navigation menu, blindly load in the YUI js/css files they require without coordinating with any other assets on the page which might also be loading duplicate resources or worse as part of a combined YUI roll-up file such as rest-fonts-grids.css or utilities.js). Pat, this of course touches on the subject of the new defaults, but is mostly beyond that. Maybe you can start a separate discussion about this, or put this in the form of an RFE or a couple of them (or maybe you already did?). Then at the template group we can work with whatever the results are.
Rogier | United Knowledge |
| Back to Top |
Rate [ | ]
|
|
dionak
|
Date: 9/21/2008 11:25 am · Subject: Re: WebGUI.css -- Common Style Sheet · Rating: 0
Doug, Perhaps this stylesheet should be compressed at some point as well? It's sure to be large. I'm thinking along the lines of YUI with a webgui.css and a webgui-min.css. Webgui.css would be readable and webgui-min.css would improve performance for production. Regarding messages, I'd like to see a common scheme of class names/markup created that is easy to use by developers and theme creators/designers. Can you elaborate on messages relating to warnings and informational with examples? This would make it easier to define use-cases. My initial thought is that one of the informational messages might be the 'your post is being processed' message. Are there any other conventions (like messaging styles) that developers would find useful? I've been considering the JavaScript includes as of late but do not have a suggestion at this point. However, I do agree that we need to strike a balance in organization, ensuring the proper JS libs are included and minimizing http requests. Diona ---- |
| Back to Top |
Rate [ | ]
|
|
preaction
|
Date: 9/21/2008 11:48 am · Subject: Re: WebGUI.css -- Common Style Sheet · Rating: 0
What brought this to my attention (that we don't have one) is I'm adding a big warning message to people who try to edit default templates. We had a bunch of people get burned by the upgrade to 7.5 stable because they had edited default WebGUI templates. This could be more of a "notice" message, shown with a yellow background and a triangular exclamation point icon. The "settings" page of the Admin Console has two such messages. There is an informational "Settings saved!" message that could be shown with a blue background and one of those speech bubbles with an "i" in it. There is also the possibility of an error message, which could be shown with a red background and a stop sign. The Gallery shows a confirmation page for deleting a photo or an album, this could be shown in a grey box with a question-mark icon and nicely styled buttons (probably YUI buttons). And yes, all of the "Your content has been added" screens. There are other things we can do, but the above messages are a quick way to add some polish. |
| Back to Top |
Rate [ | ]
|
|
rogier
|
Date: 9/22/2008 4:02 am · Subject: Re: WebGUI.css -- Common Style Sheet · Rating: 0
Thanks Doug, very nice that you thought of us while working on this. And thanks for these examples. Great idea to add icons ("i", "?", "!" etc.) to the messages. I do think we are talking about two sets of messages here:
For this second set at least the possibility should exist to overwrite the default styles. Just making observations; this is something to be discussed in further detail. Added it to the work breakdown.
Rogier | United Knowledge |
| Back to Top |
Rate [ | ]
|