Items tagged CSS

TIL that applying a stroke colour with CSS can make SVG icons look strange
Feeling pleased with myself that I got Drupal and Flexbox to play nicely together, even though an old-fashioned approach may have made more sense.
Simple slideshows without modules or JavaScript with Sass in Drupal 8
The pendulum of complexity is swinging, but Grunt and Gulp are useful tools, just like Photoshop and ProTools
Having used Sass for a while now, I’d never go back to straight CSS. Compass is also a great time-saving extension, particularly for generating sprites. Recently I came across a surprising bug in a site I was building. A solid black arrow was being converted to a janky-looking greater-than symbol.
Recently I was working on a site where the design for table rows called for the row to be highlighted on hover with a border. Seemed simple enough, but the first attempt didn't work: tr:hover { border: 1px solid #000; } The trouble with this is that it increases the height of the table. As always, someone else had already faced the same problem, so the answer was on StackOverflow.
When writing CSS for a Drupal 7 theme, it's easy to forget that core includes utility classes. Yes, there's a whole load of stuff that you might want to override, or get rid of altogether, and you might want to use a base theme, like Zen or Tao or Mothership, but it's worth remembering that there is some useful stuff in core.
I've been a fan of box-sizing: border-box ever since reading Paul Irish's article * { box-sizing: border-box } FTW I use it on most projects, and find that it really speeds things up, and makes setting out grids much easier, especially when using Sass and Compass. In a few places, though, you need to be a bit careful.