4 ms·

For those who enjoy sass: =triangle($direction: up, $size: 10px, $color: #000) width: 0 height: 0 @if $direction == up border-lef

by jenius 14y ago

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 14y ago
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 14y ago
  css, sass and scss rocks. all those ideas should have their place in css3 or later.
  - sil3ntmac 14y ago
    Check out stylus, it's pretty neat too: http://learnboost.github.com/stylus/docs/js.html 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 14y ago
      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 https://gist.github.com/2563746
rralian 14y ago
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 14y ago
  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/ http://roots.carrotbeta.com/docs/) and scroll down to the UI section
  - rralian 14y ago
    That's a pretty groovy framework, thanks for sharing. Nice work.
    - jenius 14y ago
      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

by jenius 14y ago

jacobr 14y ago

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 14y ago
css, sass and scss rocks. all those ideas should have their place in css3 or later.
- sil3ntmac 14y ago
  Check out stylus, it's pretty neat too: http://learnboost.github.com/stylus/docs/js.html 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 14y ago
    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 https://gist.github.com/2563746

rralian 14y ago

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 14y ago
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/ http://roots.carrotbeta.com/docs/) and scroll down to the UI section
- rralian 14y ago
  That's a pretty groovy framework, thanks for sharing. Nice work.
  - jenius 14y ago
    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