More CSS3 Fun - A Call To Action

[Eric Meyer]

I've been tasked with expanding the library of Compass CSS3 mixins. So
far we have:

- border-radius
- box-shadow
- box-sizing
- columns
- inline-block
- opacity

My to-add list so far includes

- gradients
- background-origin
- background-clip
- background-size
- transforms

I know that Brandon Mathis has done some work with gradients:

http://github.com/imathis/fancy-buttons/blob/master/lib/sass/_fancy_gradient.sass

Brandon, is that something that could easily adapt into a generic
mixin? Are you interested in working on that, or would you mind if I
do?

Do others have mixins already built or interest in building any of the
others? Or do you have special requests that I haven't listed? Be sure
to check that a mixin would actually be useful. I know that text-
shadow, for example, is the same in all supporting browsers - meaning
you can use it as-is without any help from a mixin.

[Alex Cabrera]

I've started preliminary work on transforms if anyone wants to work on
it.

Alex Cabrera
Interactive Director, Policus
http://policus.com

- Sent from my iPhone. Please excuse any typos, missing words, or any
otherwise gross and barbaric perversions of the English language.

> --
>
> You received this message because you are subscribed to the Google
> Groups "Compass" group.
> To post to this group, send email to compas...@googlegroups.com.
> To unsubscribe from this group, send email to compass-user...@googlegroups.com
> .
> For more options, visit this group at http://groups.google.com/group/compass-users?hl=
> .
>
>

[Brandon Mathis]

I know that Brandon Mathis has done some work with gradients:

http://github.com/imathis/fancy-buttons/blob/master/lib/sass/_fancy_gradient.sass

Brandon, is that something that could easily adapt into a generic
mixin? Are you interested in working on that, or would you mind if I
do?

Sure I'm already using a mixin I've created for that purpose. The fancy-linear-gradient that you've linked to, is just a slimmed down version of that. I'll update my fork and post a link to it for discussion.

I know that text-shadow, for example, is the same in all supporting browsers - meaning

you can use it as-is without any help from a mixin.

Browser vendor support is an obvious win, but I actually think that a text shadow mixin isn't a bad idea. One thing I like about mixins, is they allow us to provide defaults, and optional declaration. I'll add a text-shadow mixin too.

- Brandon Mathis

[Eric Meyer]

I'd love to see it, Alex. Can you post it in or link me up?

Thanks.
-e

On Nov 20, 4:23 pm, Alex Cabrera <a...@policus.com> wrote:
> I've started preliminary work on transforms if anyone wants to work on
> it.
>
> Alex Cabrera

> Interactive Director, Policushttp://policus.com

>
> - Sent from my iPhone. Please excuse any typos, missing words, or any
> otherwise gross and barbaric perversions of the English language.
>

> On Nov 20, 2009, at 5:40 PM, Eric Meyer <eriii...@gmail.com> wrote:
>
> > I've been tasked with expanding the library of Compass CSS3 mixins. So
> > far we have:
>
> > - border-radius
> > - box-shadow
> > - box-sizing
> > - columns
> > - inline-block
> > - opacity
>
> > My to-add list so far includes
>
> > - gradients
> > - background-origin
> > - background-clip
> > - background-size
> > - transforms
>
> > I know that Brandon Mathis has done some work with gradients:
>

> >http://github.com/imathis/fancy-buttons/blob/master/lib/sass/_fancy_g...

[Alex Cabrera]

Sure. I'm out for happy hour right now, but I'll post it in github
when I get back (long work week).

Wanted to talk to you about combining efforts with Susy and
Graphpaper, let's discuss over email.

Alex Cabrera
Interactive Director, Policus

http://policus.com

- Sent from my iPhone. Please excuse any typos, missing words, or any
otherwise gross and barbaric perversions of the English language.

[Eric Meyer]

Awesome, Brandon. Thanks. After posting I tried my hand at a gradients
mixin - a slimmed down version of fancy-gradients, but I'm not
entirely happy with it. Looking forward to seeing yours (and anything
else you throw in). I love the fancy-buttons, by the way. Well done.

Alex, thanks. I'd love to chat. Drop me a line any time.

-e

On Nov 20, 4:29 pm, Brandon Mathis <imat...@me.com> wrote:
> > I know that Brandon Mathis has done some work with gradients:
>

> >http://github.com/imathis/fancy-buttons/blob/master/lib/sass/_fancy_g...

[Brandon Mathis]

I've added some CSS3 mixins to my fork of the edge branch:

Text Shadow:
http://github.com/imathis/compass/blob/edge/lib/compass/frameworks/compass/stylesheets/compass/css3/_text_shadow.sass

Box Shadow (updated to have optional args and defaults):
http://github.com/imathis/compass/blob/edge/lib/compass/frameworks/compass/stylesheets/compass/css3/_box_shadow.sass

Gradients (which uses a new sass script by Chris Eppstein for
generating unlimited color stops):
http://github.com/imathis/compass/blob/edge/lib/compass/frameworks/compass/stylesheets/compass/css3/_gradient.sass

These have been tested and are working great. Let me know what you all
think.

- Brandon Mathis

[Eric Meyer]

Thanks Brandon. They work great.

Here's a question to consider. Looking around at all the CSS3 tricks
out there I stumbled back onto this:

http://nickcowie.com/eotw/

In his code he achieves a gradient like this:

background: -webkit-gradient(linear, right top, left bottom, from
(#fc9), to(#ffd),color-stop(0.1, #fc9));
background: -moz-gradient(linear, right top, left bottom, from(#fc9),
to(#ffd),color-stop(0.1, #fc9));
background: -o-gradient(linear, right top, left bottom, from(#fc9), to
(#ffd),color-stop(0.1, #fc9));
background: gradient(linear, right top, left bottom, from(#fc9), to
(#ffd),color-stop(0.1, #fc9));
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,
StartColorStr='#ffffffdd', EndColorStr='#fffcc99');

I can't find reference anywhere to `-o-gradient`, or support of the
CSS3 `gradient` anywhere. The final filter is supported by IE (and has
been for some time if I understand), though I'm not sure all the
details on how it works.

I think the IE filter would be worth adding if someone wants to figure
out the details of that. But what about the others? I could make a
strong argument for including the CSS3 value even though no one
supports it yet. The -o- argument is weaker but falls along the same
lines. Shouldn't we build this with an eye towards future adoptions?

It's a question that may well be relevant for several other mixins as
well.

Cheers,
-e

On Nov 21, 2:12 pm, Brandon Mathis <imat...@me.com> wrote:
> I've added some CSS3 mixins to my fork of the edge branch:
>

> Text Shadow:http://github.com/imathis/compass/blob/edge/lib/compass/frameworks/co...
>
> Box Shadow (updated to have optional args and defaults):http://github.com/imathis/compass/blob/edge/lib/compass/frameworks/co...

>
> Gradients (which uses a new sass script by Chris Eppstein for  

> generating unlimited color stops):http://github.com/imathis/compass/blob/edge/lib/compass/frameworks/co...

[Brandon Mathis]

There's no CSS3 standard yet, so I think the -o- is assuming future
support from Opera, but no currently available Opera browser supports
it. I also can't find any announcement from Opera planning to support
it in the future.

As far as the MS filter goes, this thread doesn't look very promising: http://msdn.microsoft.com/en-us/library/ms532997(VS.85).aspx

- Brandon

> --
>
> You received this message because you are subscribed to the Google
> Groups "Compass" group.
> To post to this group, send email to compas...@googlegroups.com.
> To unsubscribe from this group, send email to compass-user...@googlegroups.com
> .
> For more options, visit this group at http://groups.google.com/group/compass-users?hl=
> .
>
>

- Brandon
205-215-8468
bra...@imathis.com
skype: imathis
AIM: imbrandonmathis

[Andrew Vit]

Hi Brandon, great work with this!

All compass gems to date are prefixed with "compass-" so they're easy
to find in a gem list. May I suggest renaming your official gem to
"compass-fancy-buttons" before it catches on like wildfire? What do
you think?

Andrew Vit

On Nov 20, 3:29 pm, Brandon Mathis <imat...@me.com> wrote:
> > I know that Brandon Mathis has done some work with gradients:
>

> >http://github.com/imathis/fancy-buttons/blob/master/lib/sass/_fancy_g...

[Chris Eppstein]

susy doesn't follow this convention either ;-) I like the idea of having the word "compass" or "sass" in ports of existing projects which many of the ones you're thinking of are. My feeling is that original works that depend on sass and compass are welcome to break from that naming convention if they want to -- I want those projects to have their own identity.

chris

[Andrew Vit]

Fair enough… Hmm, I thought Susy followed this convention as:

compass-susy-plugin (0.6.3)

Anyway, just a thought.

Andrew Vit

[Brandon Mathis]

I'm afraid it may be a little late for that. I had nearly 8,000 page
views this weekend, and I have 83 watchers, on github. If I change my
project name according to Github:

"We won't setup any redirects from your old name. This includes
repository urls, your profile, any feeds, etc. In other words, if you
have a popular project, you're probably going to upset a lot of people."

I'm afraid that this will probably be damaging, and I don't see the
benefit of using the compass- prefix, other than the fact that it
makes it obvious that compass is required. From a branding standpoint
I prefer a shorter name as well.

- Brandon Mathis

> --
>
> You received this message because you are subscribed to the Google
> Groups "Compass" group.
> To post to this group, send email to compas...@googlegroups.com.
> To unsubscribe from this group, send email to compass-user...@googlegroups.com
> .

[Chris Eppstein]

http://gemcutter.org/gems/compass-susy-plugin

You're right about that. sorry. Anyways, some plugins are going to be small and while useful, probably not have much identity themselves, and other projects are going to be big and have their own website and docs, tutorials, etc. I think naming reflects where you want your plugin to be on that spectrum... so I'd prefer to leave it to the project owner to decide. I guess if they don't have a preference then certainly it's nice to have compass or sass somewhere in the name.

chris

[Eric Meyer]

I pulled Brandon's mixins and have added background-size:

background-size:
http://github.com/ericam/compass/blob/edge/lib/compass/frameworks/compass/stylesheets/compass/css3/_background_size.sass

background-clip:
http://github.com/ericam/compass/blob/edge/lib/compass/frameworks/compass/stylesheets/compass/css3/_background_clip.sass

and background-origin:
http://github.com/ericam/compass/blob/edge/lib/compass/frameworks/compass/stylesheets/compass/css3/_background_origin.sass

They seem to work, but I haven't tested all browsers yet and would be
glad for thoughts.

Alex, where are you with a transforms mixin?

Cheers,
Eric

On Nov 21, 2:12 pm, Brandon Mathis <imat...@me.com> wrote:
> I've added some CSS3 mixins to my fork of the edge branch:
>

> Text Shadow:http://github.com/imathis/compass/blob/edge/lib/compass/frameworks/co...
>
> Box Shadow (updated to have optional args and defaults):http://github.com/imathis/compass/blob/edge/lib/compass/frameworks/co...

>
> Gradients (which uses a new sass script by Chris Eppstein for  

> generating unlimited color stops):http://github.com/imathis/compass/blob/edge/lib/compass/frameworks/co...

[Alex Cabrera]

Had to take some time over the weekend to wrap up a client project.
I'll extract my transform mixing later this evening.

Alex Cabrera
Interactive Director, Policus
http://policus.com

[Eric Meyer]

Added a @font-face mixin here:

http://github.com/ericam/compass/blob/edge/lib/compass/frameworks/compass/stylesheets/compass/css3/_font_face.sass

Along with a function for passing font files (based on the new
color_stop() function):

http://github.com/ericam/compass/blob/edge/lib/compass/sass_extensions/functions/font_files.rb

This is working great for me, and follows the font-face advice of Paul
Irish and Tim Brown. I'd love feedback on the interface, or ideas for
making it more powerful if anyone has thoughts.

Cheers,
Eric

On Nov 23, 1:08 pm, Alex Cabrera <a...@policus.com> wrote:
> Had to take some time over the weekend to wrap up a client project.
> I'll extract my transform mixing later this evening.
>
> Alex Cabrera

> Interactive Director, Policushttp://policus.com

>
> On Mon, Nov 23, 2009 at 2:11 PM, Eric Meyer <eriii...@gmail.com> wrote:
> > I pulled Brandon's mixins and have added background-size:
>
> > background-size:

> >http://github.com/ericam/compass/blob/edge/lib/compass/frameworks/com...
>
> > background-clip:
> >http://github.com/ericam/compass/blob/edge/lib/compass/frameworks/com...
>
> > and background-origin:
> >http://github.com/ericam/compass/blob/edge/lib/compass/frameworks/com...

[Chris Eppstein]

I think you meant to say:

!postscript = false

instead of:

postscript = !false

here:

http://github.com/ericam/compass/blob/edge/lib/compass/frameworks/compass/stylesheets/compass/css3/_font_face.sass#L8

Chris

P.S. This css3 stuff is really coming together nicely :-D

[Eric Meyer]

Good catch. Fixed.

What do you think of taking one extra argument in font_files() for a
font directory, rather than repeating the directory with each file
arg. The only way I know would be to say: if there are an odd number
of arguments the first one is a directory, even number means they are
all file/format pairs.

Or, maybe, another setting in the users config.rb for web-font
directory (with stylesheets, js, etc directories) - which can then be
prepended to all of them including the .eot? I don't know the Ruby to
say exactly if/how that would work...

> P.S. This css3 stuff is really coming together nicely :-D

It's making me excited to style some more sites. Can't wait to use it!

-e

On Nov 24, 2:54 pm, Chris Eppstein <ch...@eppsteins.net> wrote:
> I think you meant to say:
> !postscript = false
>
> instead of:
> postscript = !false
>
> here:
>

> http://github.com/ericam/compass/blob/edge/lib/compass/frameworks/com...

>
> Chris
>
> P.S. This css3 stuff is really coming together nicely :-D
>

> On Tue, Nov 24, 2009 at 12:22 PM, Eric Meyer <eriii...@gmail.com> wrote:
> > Added a @font-face mixin here:
>

> >http://github.com/ericam/compass/blob/edge/lib/compass/frameworks/com...

>
> > Along with a function for passing font files (based on the new
> > color_stop() function):
>

> >http://github.com/ericam/compass/blob/edge/lib/compass/sass_extension...

[Richard Aday]

I'd rather see a web-font directory.  Convention over configuration is always easier to manage.

--

You received this message because you are subscribed to the Google Groups "Compass" group.
To post to this group, send email to compas...@googlegroups.com.
To unsubscribe from this group, send email to compass-user...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/compass-users?hl=en.

--
-Richard Aday

[Eric Meyer]

Others for a web-font directory? I'd place it directly inside the CSS
directory if we go that direction.

In other news: I think we have a full list. Well played, everyone.
It's a longer list than I first expected. Throw feedback at me if you
have it. Otherwise this might just be what we take to print.

http://github.com/ericam/compass/tree/edge/lib/compass/frameworks/compass/stylesheets/compass/css3/

- border radius
- inline block
- opacity
- box shadow
- text shadow
- columns
- box sizing
- gradients
- background clip
- background origin
- background size
- font face
- transform
- transition

> > compass-user...@googlegroups.com<compass-users%2Bunsu...@googlegroups.com>
> > .

[Chris Eppstein]

Re: web-font directory I don't know what are the common practices around them or if there are any. So I don't have any official opinions other than the interface itself which seems reasonable.

But one thing I would point out is that there's a sass function called "stylesheet_url"

http://github.com/chriseppstein/compass/blob/edge/lib/compass/sass_extensions/functions/urls.rb

Like image_url, it allows you to refer to assets stored in the css directory and it will work using the relative_assets mode or via http transparently. I think you'll need this to make the assets be relative to your generated stylesheet in either case since the mixin doesn't know where it'll be in the site hierarchy.

Chris

To unsubscribe from this group, send email to compass-user...@googlegroups.com.

[Chris Eppstein]

What do people think about adding data url support for inlining fonts?

http://robert.accettura.com/blog/2009/07/03/optimizing-font-face-for-performance/

I already have this for images (inline_image function) so it shouldn't be that hard to adapt.

chris

[Eric Meyer]

I like the idea. How do you propose the UI for it works? Does it work
into the font-face mixin? From looking around some, it seems you still
want fonts declared in .eot and .woff formats first, and this just
replaces the otf/ttf and svg font calls. Is that right?

On Nov 27, 2:07 pm, Chris Eppstein <ch...@eppsteins.net> wrote:
> What do people think about adding data url support for inlining fonts?
>

> http://robert.accettura.com/blog/2009/07/03/optimizing-font-face-for-...

>
> I already have this for images (inline_image function) so it shouldn't be
> that hard to adapt.
>
> chris
>
> On Wed, Nov 25, 2009 at 5:34 PM, Chris Eppstein <ch...@eppsteins.net> wrote:
> > Re: web-font directory I don't know what are the common practices around
> > them or if there are any. So I don't have any official opinions other than
> > the interface itself which seems reasonable.
>
> > But one thing I would point out is that there's a sass function called
> > "stylesheet_url"
>

> >http://github.com/chriseppstein/compass/blob/edge/lib/compass/sass_ex...

>
> > Like image_url, it allows you to refer to assets stored in the css
> > directory and it will work using the relative_assets mode or via http
> > transparently. I think you'll need this to make the assets be relative to
> > your generated stylesheet in either case since the mixin doesn't know where
> > it'll be in the site hierarchy.
>
> > Chris
>

> > On Wed, Nov 25, 2009 at 4:47 PM, Eric Meyer <eriii...@gmail.com> wrote:
>
> >> Others for a web-font directory? I'd place it directly inside the CSS
> >> directory if we go that direction.
>
> >> In other news: I think we have a full list. Well played, everyone.
> >> It's a longer list than I first expected. Throw feedback at me if you
> >> have it. Otherwise this might just be what we take to print.
>

> >>http://github.com/ericam/compass/tree/edge/lib/compass/frameworks/com...

> >> <compass-users%2Bunsu...@googlegroups.com<compass-users%252Buns...@googlegroups.com>

[Brandon Mathis]

What do people think about adding data url support for inlining fonts?

http://robert.accettura.com/blog/2009/07/03/optimizing-font-face-for-performance/

At first I thought, this isn't a good idea considering the css bloat and how few browsers currently support font-face. In the article Robert recommends putting the inline data in a separate css file so it won't be a burden to browsers that can't read it, and so that it can prevent lag in the rendering of the core site components. A commenter suggests that it is then no better than having them download another file for the fonts, since the http request count will be the same.

I'd like to hear some good use cases where the technique achieves the goal of reducing http requests, and isn't rude to other browsers.

All in all, it sounds like it'd be useful and it's up to the use to decide if they're abusing it. I wouldn't want to be a gatekeeper, just curious what others think about this.

- Brandon Mathis

[Divya Manian]

On 11/27/09 5:15 PM, "Brandon Mathis" <ima...@me.com> wrote:

> All in all, it sounds like it'd be useful and it's up to the use to decide if
> they're abusing it. I wouldn't want to be a gatekeeper, just curious what
> others think about this.

One person told me that they are using this for Stylish skins (user styles
for Firefox). It does make sense when the size you are dealing with is low.
I also think it will be useful in situations when you cannot have anything
but text associated with a page (like a simple blogger theme).

But I am trying to find use cases too, since this was the first time I heard
of data uris and inline data for CSS use.

[Karl Guertin]

On Fri, Nov 27, 2009 at 8:15 PM, Brandon Mathis <ima...@me.com> wrote:
> I'd like to hear some good use cases where the technique achieves the goal
> of reducing http requests, and isn't rude to other browsers.

The Cappuccino guys did a blog post on CSS spriting and getting in IE
support through MHTML [1]. I haven't looked into exactly how they're
getting that hack working, but if it's generic base64 resource support
then it should be possible to get it working in IE.

[1] http://cappuccino.org/discuss/2009/11/11/just-one-file-with-cappuccino-0-8/

[Chris Eppstein]

I've merged eric's branch into my edge branch and pushed it to github.

Regarding fonts, I've added full support for fonts as an asset type like javascripts and images. This means:

• Extensions can ship fonts and install them into projects.
• Projects can configure where fonts are kept both on the local filesystem and via http using the fonts_dir and http_fonts_path configuration attributes.
• Within a sass file, you can create a reference to fonts kept in the font directory using the font_url() helper function.
• You can inline font files using data urls via the inline_font_files helper function which has the same api as the font_files helper function.

We really need one or more example files (html + sass) for the css3 module that shows off the css3 support compass offers. Can I get someone to volunteer to make a beautiful example page for us? Everything I design looks like it is from 1994.

Chris

[Chris Eppstein]

I did spend a few hours today getting an example page started for the css3 module:

http://github.com/chriseppstein/compass/tree/edge/examples/css3/

It looks like this:

http://img.skitch.com/20091130-xuq8rri11cyaxr2qnucubb6ded.png

chris

[Brandon Mathis]

I did spend a few hours today getting an example page started for the css3 module:

http://github.com/chriseppstein/compass/tree/edge/examples/css3/

It looks like this:

http://img.skitch.com/20091130-xuq8rri11cyaxr2qnucubb6ded.png

Very nice job although you're not explicitly mentioning the font-face stuff you're doing.

- Brandon Mathis

[Chris Eppstein]

Oh. It's not done... A few hours was enough to get it started.

--

You received this message because you are subscribed to the Google Groups "Compass" group.
To post to this group, send email to compas...@googlegroups.com.

To unsubscribe from this group, send email to compass-user...@googlegroups.com.

[Steven Garcia]

Dont know how far along you guys are, but here are some handy mixins,
CSS3 and other goodies I consistently use:

http://pastie.textmate.org/729046

You have a working rotate mixin in there (good in IE too)

I also took a different approach to round corners, which is more
flexible design-wise

+round-corners(!radius) = all rounded
+round-tops(!radius) = topleft and topright rounded
+round-lefts(!radius) = topleft and bottomleft rounded
+round-rights(!radius) = topright and bottomright rounded
+round-bottoms(!radius) = bottomleft and bottomright rounded
+round-corner(!x,!y,!radius) = round one corner of your choosing

I have more, but they need serious debugging before I post em

[Chris Eppstein]

I think we have most of those already.

The min-height mixin is something that I saw suggested the other day and wouldn't mind adding to the core library. Would you like to contribute a patch for that one?

chris

--

You received this message because you are subscribed to the Google Groups "Compass" group.
To post to this group, send email to compas...@googlegroups.com.
To unsubscribe from this group, send email to compass-user...@googlegroups.com.