Hack hack hack...

An open journal-- some of it written for you, but most of it is for me.

Cantilever Tricks

  • @extend means that the element just get a comment where the extended class was previously.

  • inline svg styling is preferred – think of it like an iframe.

  • gradients are crazy powerful: You can specify that the white area at the bottom starts at 50% from the bottom as specified here – background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.8) 50%, rgba(255,255,255,1) );. And you can repeat it to make like a rainbow effect. Really cool.

  • baseline alignment




  • if things are longer than expected -> it will overflow with abosolutely positioned
  • more predictable behavior for overflow

border box


  • nowrap