Fix for defaultgrad pinstripes
Eric Lindsey
Remi Grumeau
Go to your clone page, see administer tab and choose Source.
www.blackberry.com
To: "iui-dev...@googlegroups.com" <iui-dev...@googlegroups.com>
Sent: March 30, 2012 5:18 AM
Subject: Fix for defaultgrad pinstripes
It looks like defaultgrad was still using pinstripes.png from default. I fixed it to use CSS3 gradients for the background pinstripes, and also corrected the default background color (which shouldn't ever be seen now that we're using gradients instead of images for the background, but just in case). See clone eslindsey-defaultgrad-pinstripe. Changes tested in iOS5 Safari, but should work in Mozilla as well. Testing appreciated, pull when ready. :)
You received this message because you are subscribed to the Google Groups "iui-developers" group.
To view this discussion on the web visit https://groups.google.com/d/msg/iui-developers/-/Ygk01ppbvG8J.
To post to this group, send email to iui-dev...@googlegroups.com.
To unsubscribe from this group, send email to iui-developer...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/iui-developers?hl=en.
Eric Lindsey
Sean Gilligan
On Mar 30, 2012, at 8:58 PM, Eric Lindsey <esli...@gmail.com> wrote:
> Done. Man I really wish that was an automated process. You can be sure I'm going to forget that step in every clone I make. Incidentally, in fixing that I found the Delete option to get rid of all those clones I don't want any more--it's under the Advanced tab. ;)
>
> --
> You received this message because you are subscribed to the Google Groups "iui-developers" group.
> To view this discussion on the web visit https://groups.google.com/d/msg/iui-developers/-/HRgpx6F8sE0J.
Eric Lindsey
Sean Gilligan
I know clones vs. branches is a little confusing. The best practices are slightly different for Git than they were for Mercurial, too. And Remi and I have both done it wrong in the past.
We'll all get it right eventually...
On Apr 1, 2012, at 10:24 AM, Eric Lindsey <esli...@gmail.com> wrote:
> I thought we made one clone for each fix or issue we were working on?
>
> --
> You received this message because you are subscribed to the Google Groups "iui-developers" group.
> To view this discussion on the web visit https://groups.google.com/d/msg/iui-developers/-/Avo1fbujzIQJ.
Remi Grumeau
Remi
Sean Gilligan
> We obviously need a documentation for that :)
I'm really disappointed with how little documentation on this that
Google Code provides.
I did create some (rough) documentation here:
http://code.google.com/p/iui/wiki/Contributing#Preferred_(Git)_Patch_Submission_Method_--_Google_Code
-- Sean
Sean Gilligan
http://code.google.com/p/iui/source/detail?r=237d22841b1c3925124048b73b0a854ce848b75a
http://code.google.com/p/iui/source/detail?r=ac4147171151b217fb601d8e1d957774791920fa
... and pushed to the staging demo site (easy to test with Theme
Switcher in Music sample):
http://stage.iui-js.org/samples/music/music.html#_themes
Looking good! (I tested in Firefox 10.0.2, and it looks good there too)
Thanks!
-- Sean
Sean Gilligan
> It looks like defaultgrad was still using pinstripes.png from default.
> I fixed it to use CSS3 gradients for the background pinstripes, and
> also corrected the default background color
Good find! I fixed it in a few more places:
http://code.google.com/p/iui/source/detail?r=4be32a19c6609509505bc8399f16bc953a53e5f3
(See this is why we need to use LESS. With LESS we'd define:
@panel-bg-color: #c5ccd4;
and then reference @panel-bg-color everywhere. I had to do a "grep -i
c8c8c8 -r *" to find all instances of this color.)
> (which shouldn't ever be seen now that we're using gradients instead
> of images for the background, but just in case).
I believe it will bee seen in any browser that doesn't support
-webkit-gradient or -moz-linear-gradient.
-- Sean
Sean Gilligan
> I fixed it to use CSS3 gradients for the background pinstripes,
As part of my LESS experimentation, I created a defaultgrad-theme.less
(by copying defaultgrad-theme.css) and then made a few changes to take
advantage of LESS. I did not convert the whole file, nor did I use LESS
in the most optimal way. But you can see some improvements that will
really improve readability, maintenance, and style modifications.
Scroll down to line 255 ("body > .panel") to see how the stripes
gradient definition looks using LESS:
-- Sean
Remi Grumeau
Remi
-- Sean
--
You received this message because you are subscribed to the Google Groups "iui-developers" group.
To post to this group, send email to iui-developers@googlegroups.com.
To unsubscribe from this group, send email to iui-developers+unsubscribe@googlegroups.com.
Remi Grumeau
Remi
-- Sean
Sean Gilligan
> Feel free to use LESS locally to generate final CSS file THAT you will
> push to the repo so any human can read it
.less files can be *more readable* than .css files. Look here:
http://code.google.com/r/msgilligan-iui-dev/source/diff?spec=svn936ab49466e7bec9af80addd0c44f7244785e25b&name=msgilligan-lesscss&r=936ab49466e7bec9af80addd0c44f7244785e25b&format=side&path=/web-app/iui/t/defaultgrad/defaultgrad-theme.less
-- Sean
Remi Grumeau
Remi
-- Sean
Sean Gilligan
> Because you know this is LESS code. [etc]
Yes, but even if you don't know LESS, etc. This:
body > .panel {
background-color: @panel-bg-color;
background-image: -webkit-gradient(linear, left top, right top,
from(@panel-bg-color),
color-stop(0.86,@panel-bg-color),
color-stop(0.87,@panel-stripe-color),
to(@panel-stripe-color));
background-image: -moz-linear-gradient(0deg,
@panel-bg-color 0%,
@panel-bg-color 86%,
@panel-stripe-color 87%,
@panel-stripe-color 100%);
-webkit-background-size: 7px 1px;
-moz-background-size: 7px 1px;
background-size: 7px 1px;
}
is easier to read, than this:
body > .panel {
background-color: #c5ccd4;
background-image: -webkit-gradient(linear, left top, right top,
from(rgb(197,204,212)),
color-stop(0.86,rgb(197,204,212)),
color-stop(0.87,rgb(203,210,216)),
to(rgb(203,210,216)));
background-image: -moz-linear-gradient(0deg,
rgb(197,204,212) 0%,
rgb(197,204,212) 86%,
rgb(203,210,216) 87%,
rgb(203,210,216) 100%);
-webkit-background-size: 7px 1px;
-moz-background-size: 7px 1px;
background-size: 7px 1px;
}
I didn't even realize that #c5ccd4 and rgb(197,204,212) were the same color!
> Just pimp a Wordpress blog and you'll get my point...
Yeah, I've done that a few times.
-- Sean
Eric Lindsey
Sean, I seem to recall somewhere that you can use LESS to define a single function that makes all 3 cross-browser gradient definitions in one line--now THAT would be easier to read, and way more maintainable.
Remi, I understand where you're coming from. I'm doing work on ZoneMinder source code, and that project uses C, PHP, PERL, HTML, CSS, JavaScript, and BASH scripting to accomplish its mission. Fortunately I'm familiar with all of these languages. Unfortunately, it does make the project a lot less maintainable. They're actually trying to move to a modular design paradigm for the 2.x release because it's gotten so intertwined and complicated. I think this is a very good move on their part because then the whole project should be language agnostic. Any language could theoretically be used to make any part of the project, independent of any other. However, I'm not sure that a dead-set stance against using LESS in iui would be in the project's best interests. If all it was going to do was make things more complicated by requiring another language then yes, I would be against it too. But from what I've seen of it, it looks like if it's done properly it can make the source files WAY more straightforward and centrally-maintainable. The benefit in this case could definitely outweigh the costs.
Sean Gilligan
> Haha my thread got hijacked!
Yeah, sorry about that. But I do think that the gradients-based theme
does really cry out for using LESS.
> Sean, I seem to recall somewhere that you can use LESS to define a single function that makes all 3 cross-browser gradient definitions in one line--now THAT would be easier to read, and way more maintainable.
Yes - exactly. (Although looking at Bootstrap I see 6 cross-browser
gradient definitions, plus an old-fashioned IE filter!) LESS supports
something called "mixins" that allow you to include one class inside
another (what you're remember and referring to as a function)
In Bootstrap they use another feature of LESS called namespaces that
allows them to package the mixins inside a '#gradient' namespace. So
the calls/references to mixins are all preceeded by '#gradient >' --
but we don't have to do it that way: it could simply be defined and used
as .verticalGradient without the namespace.
So, in Bootstrap - to add a vertical gradient to any CSS class you just use:
#gradient > .vertical(@primaryColor, @secondaryColor)
The definition looks like this:
#gradient {
.vertical(@startColor: #555, @endColor: #333) {
background-color: mix(@startColor, @endColor, 60%);
background-image: -moz-linear-gradient(top, @startColor,
@endColor); // FF 3.6+
background-image: -ms-linear-gradient(top, @startColor, @endColor);
// IE10
background-image: -webkit-gradient(linear, 0 0, 0 100%,
from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @startColor,
@endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, @startColor, @endColor);
// Opera 11.10
background-image: linear-gradient(top, @startColor, @endColor); //
The standard
background-repeat: repeat-x;
filter:
e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d',
endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
}
}
The documentation is here:
http://twitter.github.com/bootstrap/less.html#mixins
The LESS code ifself is in mixins.less:
https://github.com/twitter/bootstrap/blob/master/less/mixins.less
Although most users of Bootstrap will just use CSS classes like "btn"
(button) and need not be aware that LESS or CSS gradients are even being
used.
-- Sean