Well known designer Craig Mod shares an interesting solution for revamping the default Twitter.com look with a combination of a Fluid app instance and lots of custom CSS. There’s a chance that Craig broke down and settled on a native app like Tweetbot or Twitterrific since his post; I doubt any power user (including yours truly) would ever be fully satisfied with what the plain site has to offer. But for casual users it’s a really simple workflow, one that’s especially appealing to those that already mostly view Twitter through the website.
As usual, Chris Coyier over at CSS Tricks writes a fairly comprehensive post on the pros and cons of using SVGs. I’m generally a fan of the format – for my day job we tend to use a mixture of both 1x + 2x pngs and svgs to serve up retina-friendly images.
Louis Lazaris offers a fairly novel approach for trying to write more modular, SMACSS like CSS code with media queries. Louis pushes for a lot of small, repetitive media queries that can be paired visually close to the original non-media declaration. I see what he’s after, though I still think in the end I favor the more traditional move to keep all the media queries shoved at the bottom. The article is still worth a read and may click with your workflow better than mine.
Chris Coyier is a genius when it comes to CSS, yet this article I think illustrates some of the limitations for Flexbox when it comes to modern web design, at least for sites with a broad audience. Flexbox is an awesome property, but it clearly requires a lot of vendor specific CSS for coverage, and the lack of IE 9 or lower support isn’t great.
I found the details here a bit overkill – something about the amount of mixins dependencies gives me some mild concern about code bloat. But once I started paging through the raw CSS logic there’s a lot of great ideas here, from a non uniform line height to not using pure black and a custom look for ampersands.
CSS3 is an essential tool of my web development workflow, but I often determine a lot of syntax specifics outside of my page in progress. Usually I jump to a hodgepodge of different sites where I adjust sliders and check things out visually, ending with a quick copy and paste job back into my development code.
The annoyance is that contextual back and forth. Why can’t I just rely on one tool, vs. multiple web sites to nail down my CSS3 data? That’s what makes CSSMatic so awesome. Just one source with basically all the CSS3 resources I’d ever need: gradients, border radius, noise and box shadow.
Steven Bradley of Vanseo Design examines how exactly auto in the context of CSS offset works. It’s an issue that can easily mess up the location of absolutely positioned elements, especially, as Steven highlights, for drop down menus and popups. Worth a read for almost anyone who works with CSS and page layout regularly.
Ask almost any front end web developer: once you get deep in a complex, ongoing project with a lot of CSS, unused selectors can be a problem. We’re naturally inclined to keep on bulking up our projects with cool CSS3 transformations and responsive media queries, but it’s decidedly unglamorous to prune what’s no longer needed.
That what makes this little Firefox plugin such a good start. It’s far from comprehensive – you only can really search for unused selectors in the immediate scope of the page you’re on – but it has come in handy.
There are many excellent guides and references online for basic, “core” HTML and CSS. But for more intermediate and advanced topics like media queries and CSS3 based transformations, most great articles tend to be comprehensive yet very narrow in scope. This extended tutorial guide set up by developer Shay Howe and others is different; you’ve get a really nice starter introduction to a broad range of HTML and CSS topics.
One small quibble though; I’d argue the second lesson on “detailed positioning” is content that should be in a basic or starter tutorial, not a guide labeling itself as advanced.
Author David Bushell’s work tutorial here for Smashing Magazine is notable, not for hitting the usual responsive design notes but his restraint. There’s a legitimate smaller scope with his example: the emphasis is on progressive enhancement and heavy lifting on CSS3 where possible, not flashy jQuery plugins. That’s a good thing.