[jenius]

For those who enjoy sass:

    =triangle($direction: up, $size: 10px, $color: #000)
      width: 0
      height: 0
      @if $direction == up
        border-left: $size solid transparent
        border-right: $size solid transparent
        border-bottom: $size solid $color
      @else if $direction == down
        border-left: $size solid transparent
        border-right: $size solid transparent
        border-top: $size solid $color
      @else if $direction == left
        border-top: $size solid transparent
        border-bottom: $size solid transparent
        border-right: $size solid $color
      @else if $direction == right
        border-top: $size solid transparent
        border-bottom: $size solid transparent
        border-left: $size solid $color

[jacobr]

I normally use SCSS, but this should work as well.

    =triangle($direction: top, $size: 10px, $color: #000)
      width: 0
      height: 0
      border: $size solid transparent
      border-#{$dir}-color: $color

[diminish]

css, sass and scss rocks. all those ideas should have their place in css3 or later.

[sil3ntmac]

Check out stylus, it's pretty neat too: http://learnboost.github.com/stylus/docs/js.html

My favorite features:

- auto-insert vendor prefixes, even IE filters (no need for css3 'mixins', which are most of the mixins the avg dev will need)

- can even rasterize linear-gradient backgrounds and serve as image for more pre-css3 browser support. This one I haven't tested but it sounds awesome

Edit: paragraph formatting

[jenius]

Yeah I actually prefer stylus to sass personally, sass is just more popular (and rails default) and less magical for people that don't work with css as often.

My favorite feature actually is that it can grab properties out of parents, as demonstrated here: https://gist.github.com/2563746

[rralian]

While that's cool, it's not quite what the OP achieves. Using this mixin will turn whatever you apply it to into a solid-color triangle with the passed-in options. The triangle will need to be its own element.

OP adds two triangles to whatever it is applied to, one for the border color, another to cover it up with the background color. And it doesn't require any additional elements... it just adds these to whatever you are applying it to.

[jenius]

You're totally right. I have a mixin that makes a bubble like that too, but it's built from a few different mixins that each build on each other and I didn't want to post a buttload of code in a comment. You can see an example of how mine looks if you hit this page (http://roots.carrotbeta.com/docs/) and scroll down to the UI section

[rralian]

That's a pretty groovy framework, thanks for sharing. Nice work.

[jenius]

thanks! it's closed and not yet public right now because the docs aren't finished yet - but this is how they look. I plan to have every section be live customizable and reflect implementation with a live code example to the left as is the case with the typography section. once the docs are done I'm planning on open sourcing it. If you want to use it and/or test it out, hit me on twitter @jescalan