The following is a guest post by David Clark. I think David's new Sass library "Scut" is pretty interesting. It's like a design utility library, which is distinct from a design pattern library in that it enforces no particular structure or particular visual design. I've always found this kind of thing fascinating, largely because I've never been able to pull it off in a way that feels good to me. I always end up leaning too far into visual design, or too abstract to the point of it not being all that useful. I think David just might be on the right track here. I'll let him explain in detail.
Speaking of books, Dan Cederholm's new book on Sass is out. Forwarded by yours truly (!).
Say you add some new element to the page and it pushes things around. That can happen instantly, but it helps your brain understand what just happened if the elements that were pushed away animate to their new position. Enter Alex MacCaw and his new magicMove jQuery plugin:
The library works by appending a separate and hidden clone of the element you’re transitioning to the page. Any DOM manipulation you do is actually manipulating that clone. Then, when you’re finished, the library looks at the difference between the element’s current position, and the clone’s position, and animates between them (using CSS transitions).
The vast majority of websites out there use a grid. They may not explicitly have a grid system in place, but if they have a "main content area" floated to the left a "sidebar" floated to the right, it's a simple grid.
If a more complex layout presents itself, people often reach for a grid framework. They assume grids are these super difficult things best left to super CSS nerds. That idea is perpetuated by the fact that a lot of the grid systems they reach for are very complicated.
Here's how I build grids. It's not hard or complicated. Even making them flexible is no big deal.