A standardized way to know when a site is bright or dark
25 views
Skip to first unread message
Stian Didriksen
Jan 20, 2011, 9:53:08 PM1/20/11
to Joomla 3PD Extension Standards
Hi all,
I don't know about you, but I can spend hours finding the right
contrast on some overlay so that the hilites are subtle but noticable.
The problem is that for very bright backgrounds, if you want to create
a great inset effect using overlays then you likely want a box shadow
that's 1 px down, and very very bright and opaque.
This effect looks bad on a darker background however.
Darker schemes it looks much better if you decrease the opacity on the
white box shadow down to something like 5-10%.
If you try and create one overlay that works for both, you'll most
likely have to go with a boring gray color, right between white and
black.
Just because it'll give you some contrast in both schemes, but the
contrast will be poor, and visually it looks shitty.
If you create two overlay versions, then you have to create an option
for the end-user to pick which one should be used.
And no matter which option you make default, there'll be thousands of
users that will be on a scheme that don't match your default setting
and the user is likely to confuse what those options mean. If you're
on a dark scheme, would you pick an option called "Light", or "Dark"?
Light could mean that the text is white, which is what you want on a
dark site. But Dark could also mean that the style is meant to match a
dark template.
All in all, I think we can an should solve it.
My proposal is super simple.
We decide on a css class that's added to the <html> tag. That css
class is defined by the joomla template, that extensions CSS can use
to change what overlay to use depending on the class.
My suggestion would be using a format that isn't likely to be already
in use, but still makes sense.
lightness-bright and lightness-dark could be one suggestion.
The specific naming on its own isn't important.
Even "bobs-cat" and "bobs-dog" would be fit for the job, what matters
is that we just agree on something that we all use, so that us
extension devs may create pixel perfect interfaces using overlays
without complicating the administrator UI. All while us template
developers can spend less time on html layout overrides just because
we're creating a dark template and most extensions expect everything
to have a white background.
I work daily as a extensions developer at NinjaForge, and template
developer on the Morph framework at ProThemer.
And with that background I know the pains and frustration coming from
both sides, and I think a simple css class like this makes things
easier for all of those of us that care about detail :)
Cheers
I don't know about you, but I can spend hours finding the right
contrast on some overlay so that the hilites are subtle but noticable.
The problem is that for very bright backgrounds, if you want to create
a great inset effect using overlays then you likely want a box shadow
that's 1 px down, and very very bright and opaque.
This effect looks bad on a darker background however.
Darker schemes it looks much better if you decrease the opacity on the
white box shadow down to something like 5-10%.
If you try and create one overlay that works for both, you'll most
likely have to go with a boring gray color, right between white and
black.
Just because it'll give you some contrast in both schemes, but the
contrast will be poor, and visually it looks shitty.
If you create two overlay versions, then you have to create an option
for the end-user to pick which one should be used.
And no matter which option you make default, there'll be thousands of
users that will be on a scheme that don't match your default setting
and the user is likely to confuse what those options mean. If you're
on a dark scheme, would you pick an option called "Light", or "Dark"?
Light could mean that the text is white, which is what you want on a
dark site. But Dark could also mean that the style is meant to match a
dark template.
All in all, I think we can an should solve it.
My proposal is super simple.
We decide on a css class that's added to the <html> tag. That css
class is defined by the joomla template, that extensions CSS can use
to change what overlay to use depending on the class.
My suggestion would be using a format that isn't likely to be already
in use, but still makes sense.
lightness-bright and lightness-dark could be one suggestion.
The specific naming on its own isn't important.
Even "bobs-cat" and "bobs-dog" would be fit for the job, what matters
is that we just agree on something that we all use, so that us
extension devs may create pixel perfect interfaces using overlays
without complicating the administrator UI. All while us template
developers can spend less time on html layout overrides just because
we're creating a dark template and most extensions expect everything
to have a white background.
I work daily as a extensions developer at NinjaForge, and template
developer on the Morph framework at ProThemer.
And with that background I know the pains and frustration coming from
both sides, and I think a simple css class like this makes things
easier for all of those of us that care about detail :)
Cheers
Danayel
Feb 1, 2011, 1:03:59 AM2/1/11
to Joomla 3PD Extension Standards
A great suggestion, but one which should probably be dealt with as
part of the larger HTML and CSS standards, so please remember to bring
it up there.
-D.
part of the larger HTML and CSS standards, so please remember to bring
it up there.
-D.
Marco Barbosa
Mar 3, 2011, 8:43:47 AM3/3/11
to joomla-3pd-exte...@googlegroups.com
I think this is a good idea..
I was thinking of a way to do this with Mootools colors, to "detect" if the color is dark or bright wit HSL in the back-end.
But a class would help tons in the front-end I guess.
Reply all
Reply to author
Forward
0 new messages