Scooby skinning

I've taken a quick first pass at 'Scooby Skins.'
Instructions for use 
are here:

http://wiki.osafoundation.org/bin/view/Projects/
ScoobyUiSkinning

This page is linked from ScoobyDevelopmentHome.

I know all of this skinning/templating stuff will change and
evolve. I 
have no particular attachment to the current approach, and I
hope people 
will dive is with suggestions/ideas on how to improve it.
This is just a 
quickie first step toward templating that will let people
play around 
with some different looks for Scooby, and pave the way for
more 
sophisticated skinning and customization.

Visual customization like that is something that will make
Scooby a very 
'sticky' app -- once users or organizations put their
stamp on it, they 
are a lot more attached to it.

Matthew



_______________________________________________
scooby-dev mailing list
scooby-devlists.osafoundation.org
http://lists.osafoundation.org/cgi-bin/mailman
/listinfo/scooby-dev

Matthew Eernisse wrote:
>
> I know all of this skinning/templating stuff will
change and evolve. I 
> have no particular attachment to the current approach,
and I hope 
> people will dive is with suggestions/ideas on how to
improve it. This 
> is just a quickie first step toward templating that
will let people 
> play around with some different looks for Scooby, and
pave the way for 
> more sophisticated skinning and customization.
>
Very cool!

Have you thought about doing the skins directly with CSS?
Your approach 
is nice in that the skinner doesn't have to learn a bunch
of CSS or 
learn how scooby is structured.. but part of me wonders if
people will 
eventually ask for CSS-based skins so they can tweak
whatever they 
want... maybe this is part of your plan already? The
Firefox/Thunderbird 
skins are all CSS based, if you've tried them at all...

You probably already have seen this but its pretty easy to
swap out the 
stylesheet on a loaded page..
http://www.web-wise-wizard.c
om/css-style-sheets/switch-style-sheets-dynamically.html
... and there are more useful links down at the bottom..

I don't know how well that will work on more dynamic ajaxy
pages of 
course...

Alec

_______________________________________________
scooby-dev mailing list
scooby-devlists.osafoundation.org
http://lists.osafoundation.org/cgi-bin/mailman
/listinfo/scooby-dev

Matthew Eernisse wrote:
>
> I know all of this skinning/templating stuff will
change and evolve. I 
> have no particular attachment to the current approach,
and I hope 
> people will dive is with suggestions/ideas on how to
improve it. This 
> is just a quickie first step toward templating that
will let people 
> play around with some different looks for Scooby, and
pave the way for 
> more sophisticated skinning and customization.
>
Very cool!

Have you thought about doing the skins directly with CSS?
Your approach 
is nice in that the skinner doesn't have to learn a bunch
of CSS or 
learn how scooby is structured.. but part of me wonders if
people will 
eventually ask for CSS-based skins so they can tweak
whatever they 
want... maybe this is part of your plan already? The
Firefox/Thunderbird 
skins are all CSS based, if you've tried them at all...

You probably already have seen this but its pretty easy to
swap out the 
stylesheet on a loaded page..
http://www.web-wise-wizard.c
om/css-style-sheets/switch-style-sheets-dynamically.html
... and there are more useful links down at the bottom..

I don't know how well that will work on more dynamic ajaxy
pages of 
course...

Alec

_______________________________________________
scooby-dev mailing list
scooby-devlists.osafoundation.org
http://lists.osafoundation.org/cgi-bin/mailman
/listinfo/scooby-dev

Alec,

Thanks very much for the input. I suspect you are right
about people 
ultimately asking for more tweakability and wanting to be
able to do it 
in plain old static CSS.

The issue with that right now is the fact that Scooby's
styles are all 
dynamically constructed. The problem with static CSS is
redundancy -- 
how to share common values across disparate items (e.g.,
giving several 
different UI elements the same color, or sharing a common
value like 
height or padding across several groupings of elements.

There might be clever ways to do it with pure CSS, but I
only ever 
learned enough of it to get things to render like I want
them to -- so 
with anything remotely application-like, I always ended up
going with a 
'Rick Wakeman Brute Force Approach' in JavaScript. (You
ever see any 
pics of the massive banks of keyboards that dude used to
have all around 
him touring with Yes in the 70s?) I would construct a
stylesheet using 
JavaScript string values and then document.write that as an
inline 
stylesheet on the doc. It allowed me to use JS variables for
common 
values and do things in a bit less redundant and more
programmatic way. 
Could be a case of "when all you have is a hammer
..." 

Scooby uses a more modern/correct version of the same
approach, using 
JavaScript stylesheet DOM methods to do addRule/insertRule
to create all 
the needed CSS. The values are all still stored as normal
strings of CSS 
selector-rule in an array (see js/global.css.js), mostly
because Safari 
doesn't support DOM for creating stylesheets yet, so
there's no option 
there but to punt and do document.write of an inline style.

So I guess at this point if someone wanted to do more
granular CSS 
manipulations, they could easily make changes to the
selector/rule 
strings in global.css.js. It is ostensibly JavaScript, but
the format is 
still pure CSS, so someone halfway competent with CSS could
easily go in 
and twiddle around with the stuff they want to.

Longer-term it would indeed be much cooler to allow people
to work in 
plain old CSS. It wouldn't be that hard to parse a static
CSS file out 
and then use it as an override at the end of the process
that assembles 
the dynamic CSS.


Matthew


Alec Flett wrote:
> Matthew Eernisse wrote:
> 
>>
>> I know all of this skinning/templating stuff will
change and evolve. I 
>> have no particular attachment to the current
approach, and I hope 
>> people will dive is with suggestions/ideas on how
to improve it. This 
>> is just a quickie first step toward templating that
will let people 
>> play around with some different looks for Scooby,
and pave the way for 
>> more sophisticated skinning and customization.
>>
> Very cool!
> 
> Have you thought about doing the skins directly with
CSS? Your approach 
> is nice in that the skinner doesn't have to learn a
bunch of CSS or 
> learn how scooby is structured.. but part of me wonders
if people will 
> eventually ask for CSS-based skins so they can tweak
whatever they 
> want... maybe this is part of your plan already? The
Firefox/Thunderbird 
> skins are all CSS based, if you've tried them at
all...
> 
> You probably already have seen this but its pretty easy
to swap out the 
> stylesheet on a loaded page..
> http://www.web-wise-wizard.c
om/css-style-sheets/switch-style-sheets-dynamically.html

> 
> ... and there are more useful links down at the
bottom..
> 
> I don't know how well that will work on more dynamic
ajaxy pages of 
> course...
> 
> Alec
> 

_______________________________________________
scooby-dev mailing list
scooby-devlists.osafoundation.org
http://lists.osafoundation.org/cgi-bin/mailman
/listinfo/scooby-dev

Alec,

Thanks very much for the input. I suspect you are right
about people 
ultimately asking for more tweakability and wanting to be
able to do it 
in plain old static CSS.

The issue with that right now is the fact that Scooby's
styles are all 
dynamically constructed. The problem with static CSS is
redundancy -- 
how to share common values across disparate items (e.g.,
giving several 
different UI elements the same color, or sharing a common
value like 
height or padding across several groupings of elements.

There might be clever ways to do it with pure CSS, but I
only ever 
learned enough of it to get things to render like I want
them to -- so 
with anything remotely application-like, I always ended up
going with a 
'Rick Wakeman Brute Force Approach' in JavaScript. (You
ever see any 
pics of the massive banks of keyboards that dude used to
have all around 
him touring with Yes in the 70s?) I would construct a
stylesheet using 
JavaScript string values and then document.write that as an
inline 
stylesheet on the doc. It allowed me to use JS variables for
common 
values and do things in a bit less redundant and more
programmatic way. 
Could be a case of "when all you have is a hammer
..." 

Scooby uses a more modern/correct version of the same
approach, using 
JavaScript stylesheet DOM methods to do addRule/insertRule
to create all 
the needed CSS. The values are all still stored as normal
strings of CSS 
selector-rule in an array (see js/global.css.js), mostly
because Safari 
doesn't support DOM for creating stylesheets yet, so
there's no option 
there but to punt and do document.write of an inline style.

So I guess at this point if someone wanted to do more
granular CSS 
manipulations, they could easily make changes to the
selector/rule 
strings in global.css.js. It is ostensibly JavaScript, but
the format is 
still pure CSS, so someone halfway competent with CSS could
easily go in 
and twiddle around with the stuff they want to.

Longer-term it would indeed be much cooler to allow people
to work in 
plain old CSS. It wouldn't be that hard to parse a static
CSS file out 
and then use it as an override at the end of the process
that assembles 
the dynamic CSS.


Matthew


Alec Flett wrote:
> Matthew Eernisse wrote:
> 
>>
>> I know all of this skinning/templating stuff will
change and evolve. I 
>> have no particular attachment to the current
approach, and I hope 
>> people will dive is with suggestions/ideas on how
to improve it. This 
>> is just a quickie first step toward templating that
will let people 
>> play around with some different looks for Scooby,
and pave the way for 
>> more sophisticated skinning and customization.
>>
> Very cool!
> 
> Have you thought about doing the skins directly with
CSS? Your approach 
> is nice in that the skinner doesn't have to learn a
bunch of CSS or 
> learn how scooby is structured.. but part of me wonders
if people will 
> eventually ask for CSS-based skins so they can tweak
whatever they 
> want... maybe this is part of your plan already? The
Firefox/Thunderbird 
> skins are all CSS based, if you've tried them at
all...
> 
> You probably already have seen this but its pretty easy
to swap out the 
> stylesheet on a loaded page..
> http://www.web-wise-wizard.c
om/css-style-sheets/switch-style-sheets-dynamically.html

> 
> ... and there are more useful links down at the
bottom..
> 
> I don't know how well that will work on more dynamic
ajaxy pages of 
> course...
> 
> Alec
> 

_______________________________________________
scooby-dev mailing list
scooby-devlists.osafoundation.org
http://lists.osafoundation.org/cgi-bin/mailman
/listinfo/scooby-dev

>
>
> The issue with that right now is the fact that
Scooby's styles are all 
> dynamically constructed. The problem with static CSS is
redundancy -- 
> how to share common values across disparate items
(e.g., giving 
> several different UI elements the same color, or
sharing a common 
> value like height or padding across several groupings
of elements.
>
> There might be clever ways to do it with pure CSS, but
I only ever 
> learned enough of it to get things to render like I
want them to 
I can help the CSS with that once I finish chewing on
minical. There are 
things you can do with css that will make your head spin.

-J;
_______________________________________________
scooby-dev mailing list
scooby-devlists.osafoundation.org
http://lists.osafoundation.org/cgi-bin/mailman
/listinfo/scooby-dev

>
>
> The issue with that right now is the fact that
Scooby's styles are all 
> dynamically constructed. The problem with static CSS is
redundancy -- 
> how to share common values across disparate items
(e.g., giving 
> several different UI elements the same color, or
sharing a common 
> value like height or padding across several groupings
of elements.
>
> There might be clever ways to do it with pure CSS, but
I only ever 
> learned enough of it to get things to render like I
want them to 
I can help the CSS with that once I finish chewing on
minical. There are 
things you can do with css that will make your head spin.

-J;
_______________________________________________
scooby-dev mailing list
scooby-devlists.osafoundation.org
http://lists.osafoundation.org/cgi-bin/mailman
/listinfo/scooby-dev

In the meantime could you point us in the right direction,
or tell us  
what you have in mind?

I'm very interested in this problem myself - finding ways
to express  
relationships between things, and using constants somehow.

I heard that this can be done but only in IE.

On May 2, 2006, at 1:16 AM, Jeremy Epstein wrote:

>
>>
>>
>> The issue with that right now is the fact that
Scooby's styles are  
>> all dynamically constructed. The problem with
static CSS is  
>> redundancy -- how to share common values across
disparate items  
>> (e.g., giving several different UI elements the
same color, or  
>> sharing a common value like height or padding
across several  
>> groupings of elements.
>>
>> There might be clever ways to do it with pure CSS,
but I only ever  
>> learned enough of it to get things to render like I
want them to
> I can help the CSS with that once I finish chewing on
minical.  
> There are things you can do with css that will make
your head spin.
>
> -J;
> _______________________________________________
> scooby-dev mailing list
> scooby-devlists.osafoundation.org
> http://lists.osafoundation.org/cgi-bin/mailman
/listinfo/scooby-dev

_______________________________________________
scooby-dev mailing list
scooby-devlists.osafoundation.org
http://lists.osafoundation.org/cgi-bin/mailman
/listinfo/scooby-dev

In the meantime could you point us in the right direction,
or tell us  
what you have in mind?

I'm very interested in this problem myself - finding ways
to express  
relationships between things, and using constants somehow.

I heard that this can be done but only in IE.

On May 2, 2006, at 1:16 AM, Jeremy Epstein wrote:

>
>>
>>
>> The issue with that right now is the fact that
Scooby's styles are  
>> all dynamically constructed. The problem with
static CSS is  
>> redundancy -- how to share common values across
disparate items  
>> (e.g., giving several different UI elements the
same color, or  
>> sharing a common value like height or padding
across several  
>> groupings of elements.
>>
>> There might be clever ways to do it with pure CSS,
but I only ever  
>> learned enough of it to get things to render like I
want them to
> I can help the CSS with that once I finish chewing on
minical.  
> There are things you can do with css that will make
your head spin.
>
> -J;
> _______________________________________________
> scooby-dev mailing list
> scooby-devlists.osafoundation.org
> http://lists.osafoundation.org/cgi-bin/mailman
/listinfo/scooby-dev

_______________________________________________
scooby-dev mailing list
scooby-devlists.osafoundation.org
http://lists.osafoundation.org/cgi-bin/mailman
/listinfo/scooby-dev

Bobby Rullo wrote:
> In the meantime could you point us in the right
direction, or tell us 
> what you have in mind?
>
> I'm very interested in this problem myself - finding
ways to express 
> relationships between things, and using constants
somehow.
>
I hope I'm not expressing too much of the obvious here but
'class' is 
your friend.

The basic idea is that all elements can have a 'class'
attribute that 
holds one or more space-separated values. I think a lot of
people know 
about class but don't know that it can hold multiple
values. 'class' 
tends to be one of the fastest styles to match, and is easy
because its 
more or less context-free.

The way I've used is is to attach multiple class values to
elements 
indicating different levels of semantics... i.e.

i.e. lets say you have multiple things related to 'pizza'
- folders, 
messages, etc. Folders should get a particular style, but
things about 
pizza should also get that style. Folders might also be mail
folders, or 
calendar folders, or what have you:

<li class="folder mail pizza">
...
</li>

Now you can have separate styles for each of these, which
describe 
different things:
.folder {
    list-style-icon: folder.gif;
}

.mail {
    background-color: #00c;
}

.pizza {
    color: #800;
}

So basically you're saying All Pizza-related elements
(whether they're 
folders, messaages, maps, or whatever) all get red text..
all mail 
folders are blue, and all folders get a folder icon.

This may seem like a simple concept but its actually quite
powerful in 
practice.

One further thing you can do on this is to dynamically
create styles 
based on user content. For instance, lets say you want a
special icon 
for the "Inbox" - you could dynamically attach a
class called 
'foldertype-<type>' to every folder - i.e.
'foldertype-Inbox' and then 
attach a style:

.foldertype-Inbox {
    list-style-image: inbox.gif
}

(and yeah yeah you have to be careful in this example that
"Inbox" is 
not a localized string or of course- I'm assuming its an
internal flag 
name to indicate what the folder is)

All of the above techniques are used in the Firefox skinning
mechanism...

Alec

> I heard that this can be done but only in IE.
>
> On May 2, 2006, at 1:16 AM, Jeremy Epstein wrote:
>
>>
>>>
>>>
>>> The issue with that right now is the fact that
Scooby's styles are 
>>> all dynamically constructed. The problem with
static CSS is 
>>> redundancy -- how to share common values across
disparate items 
>>> (e.g., giving several different UI elements the
same color, or 
>>> sharing a common value like height or padding
across several 
>>> groupings of elements.
>>>
>>> There might be clever ways to do it with pure
CSS, but I only ever 
>>> learned enough of it to get things to render
like I want them to
>> I can help the CSS with that once I finish chewing
on minical. There 
>> are things you can do with css that will make your
head spin.
>>
>> -J;
>> _______________________________________________
>> scooby-dev mailing list
>> scooby-devlists.osafoundation.org
>> http://lists.osafoundation.org/cgi-bin/mailman
/listinfo/scooby-dev
>
> _______________________________________________
> scooby-dev mailing list
> scooby-devlists.osafoundation.org
> http://lists.osafoundation.org/cgi-bin/mailman
/listinfo/scooby-dev

_______________________________________________
scooby-dev mailing list
scooby-devlists.osafoundation.org
http://lists.osafoundation.org/cgi-bin/mailman
/listinfo/scooby-dev