Posts Tagged: css

Reveal.js

This is a really cool, CSS3 and Javascript based slide presentation library. If you’re looking for a web based alternative to the usual Keynote and Powerpoint styles, check this out.

Degreees

I dig really small, specialized web tools that do one job well. Degreees, a new temperature app, nails that pretty much perfectly. Nice job by the Finely production team here. Just head over and allow the site to scan your location. You’ll get the forecast for your area rendered with lovely CSS3.

Say no to faux bold

Another A List Apart, another strong article on CSS. Author Alan Stearns dives into “faux” font styles and why they should be avoided.

The vendor prefix predicament

A List Apart’s Eric Meyer interviews Mozilla lead Tantek Çelik on his plan for Firefox to support webkit prefixed CSS properties. After reading, I’m even more puzzled on what Mozilla’s plan is long term here. So, Mozilla is targetting Webkit CSS prefixes in Firefox, but only “specific ones”? Then they may utilize Webkit prefixes on just mobile Firefox, but not necessarily the desktop?

Meyer hits on a huge point later in the interview:

The promise of vendor prefixes was that implementations could be tested in the wild and problems corrected before behavior was formalized. That paid off handsomely with gradient syntax, for example, where totally incompatible syntaxes were tried out, and eventually a unified syntax was found. This plan seems like it imperils that ability—that, once vendors start supporting each others’ prefixes, we may as well drop prefixes altogether.

The ‘Learn HTML & CSS’ book

Perhaps you’re reading this post, don’t know much about HTML and CSS, but want to start. Many if not most would recommend some sort of online tutorial. Based on the sample chapter I’ve read and reviews elsewhere, check out this book first. Gorgeous work and $15 on Amazon.

Granted it’s true 99% of technical books out there are outdated within seemingly a day after their publication. Yet the raw basics of HTML and CSS – markup, attributes, layout – are fairly timeless. I expect this book, for this reason and with its shallow learning curve, will last on shelves a lot longer.

Home scalable and modular architecture for CSS

Jonathan Snook is a very smart, respected web developer and speaker. So why the hell didn’t I check out his SMACSS style guide earlier? Pretty brilliant stuff. SMACSS (pronounced “smacks”) is loose architectural framework for CSS. It’s a way to organize large, complex websites (e.g. my day job) in ways that maximize flexibility and reusability.

It’s effectively here in free html form which you should read pronto if CSS is important to you. If you enjoy it, go the extra mile and buy an e-book. My company has, and I’ve already easily gotten the $15 sticker price back in value about an hour of usage.

On Responsive images

I liked developer Chris Coyier’s approach here; step back and examine how to serve up responsive imagery from a high level perspective. Chris touches briefly on all the proposed solutions, from creating new elements to client side Javascript.

On the not so cool side, Chris avoids taking a stance on which solution he’s siding with. I personally prefer a new image element or HTML5 based custom data attributes that the browser interprets to render the properly sized image. The other cross browser methods are admirable but ultimately make too many http requests for me to be comfortable with.

Everything you never knew about CSS floats

Excellent primer on floating elements from the Design Shack team. Floats can be a hard concept to visualize, yet author Joshua Jonson does a good job of laying the basic rules out. The experienced should file this as reference material; it’s an article best suited for CSS newbies.

Serving responsive images with simple CSS and a spacer PNG

There’s a lot of proposed solutions to the problem of serving different resolution images for different sized devices: small for mobile, big for widescreen and iPad Retina displays, and everywhere else somewhere in between. Unlike many other CSS or JS based solutions, Matt Stow’s doesn’t feel hacky and is widely compatible with a wide variety of browsers (IE8 and older excluded.)

CSS sprites revisited

Like the author suggests, when deadlines are tight I can get lax on proper CSS sprite usage. Author Niels Matthijs helps remedy this problem with some best practices. I’m not entirely onboard with this article, as there’s heavy usage of LESS and Sass, two CSS preprocessing languages I have decidedly mixed feelings about. Nevertheless, I really liked the first section of this article which deals with splitting out the sprite in Photoshop, and the LESS/Sass material later on at least gets one thinking about sprites more programmatically.