Using CSS transitions on auto dimensions
A selection of possible workarounds for animating CSS values with auto keywords (e.g. height, width, etc.). Not a huge fan of the Flexbox option, but the max-height trick is a very useful one to […]
Archives
Alternatives to absolute positioning
Ahmad has put together some really interesting examples of where modern CSS techniques can replace traditional use-case for absolute positioning. I'd be really interested to know how some of them […]
Grid-ish Flexbox or Flexible Grid?
The new dominant layout methods in CSS – grid and flexbox – have solved a lot of issues. Still, sometimes the ideal layout is somewhere in the middle: a flexible grid-like mashup. With a bit of outside-the-box thinking, you can there from either angle.
Pitfalls of card UIs
A great breakdown from Dave as to why the typical card UI pattern has some inherent issues. Some elements – like making cards all the same height and dealing with responsively collapsing card lists […]
Lists with Hanging Indent and Custom Counters
Customising HTML lists often means sacrificing standard browser typesetting bonuses, like hanging indents. But with a little bit of modern CSS, you can get them back again, whilst still getting to use custom counters – like emoji 🚀
Welcome to the Grid [#43]
There are a lot of new web technologies emerging at the moment which really feel like we're entering a new era. Over the last decade, the likes of HTML5, ES6+, flexbox etc. have brought the web, and […]