Check out Do Lectures. Looks like some interesting content (kind of like TED Talks), but that’s not why I’m posting. Take a close look at how they handle re-sizing the window. As you change width, the screen goes through a series of at least 4 seamless transformations to adapt to the new format—hiding secondary elements, re-sizing things, re-positioning. Very impressive flexible layout. (Via UIE podcasts.)
“I’m going to begin with a provocative claim: I believe CSS is one of the most difficult-to-master computer languages we have. … Simply put; it’s a styling language. A language for designers, not developers. Some of the most experienced programmers I’ve worked with struggle to comprehend CSS for this very reason.”
Having just had to explain the concept of “specificity” to an experienced developer, this quote resonated with me. From an article by Chris Sealey on Better Semantics with CSS Combinators and Selectors.
“CSS is the weakest link in the web developers toolbox. The problem goes deeper than CSS’s lack of variables. Unlike the “function” in programming, CSS has no fundamental building block.”
Chris Eppstein, the author of Compass writes up a solid argument for the need of abstraction in stylesheets. I’ve been toying around with Compass and the Sass language over the past few weeks and things look very promising.
In a bizarre flood of memories this morning, I recalled one of the very first websites which pointed me in the direction of using CSS for layout. Whoever you are, BlueRobot, thanks.
Handcrafted CSS, a new book from Dan Cederholm and Ethan Marcotte, looks to add to the smallish pile of useful CSS books on my shelf. The others are in a large pile in the community library at work.
“This book will show how craftsmanship can be applied to flexible, bulletproof, highly efficient and adaptable interfaces that make up a solid user experience.”
Many in the world of web application design desire to make their web-based software look and feel more like a desktop application. I’m a fan of making the web experience as rich as possible, and I recently learned how to add something more to my designs: click-action buttons.
Yes, it’s true. I love buttons. To me, the button is quite possibly the most important element in an interface. They should be designed and implemented with a lot of thought since they are the invokers of action and the committers of data.
Firescope is a free Firefox add-on from Sitepoint that puts a Reference tab into Firebug. This tab gives an overview of the level of browser support for a selected element and any styles applied to it, plus a link to more information on Sitepoint about elements and attributes. Looks very handy for troubleshooting… Download took about 3 seconds, plus a re-start of Firefox.
It looks like you can use XHTML and CSS to wrap and flow text just like you would do in InDesign. I don’t know how useful something like this would be, and I haven’t looked at the cleanliness of the code, but it’s nice to know this is programmatically possible (and in IE6, no less). Check it out.
Please note, this tutorial is for those who are familiar with jQuery and CSS. No basics taught here. Also nerd alert.
So the other day Tadd linked up some work in progress code which hinted that we are using the Blueprint CSS framework in some of our sites under development.
This decision went through many heated debates internally where some were excited for it, and others were repulsed.
So what were the reasons behind the need for looking into a framework?
The wbr tag saved my bacon today when a long email address was breaking a narrow column layout. This looks like another HTML tag I hadn’t ever used, but probably should have. I looked all around for a non-java-script CSS solution, but this little non-validating tag was the best I could do. See the linked Quirksmode article for a nice discussion of the “incompatibility soup” of solutions to this problem.
“i feel dirty every time i use ”!important” in a css file…”
“Bobthecow” on Twitter
A question came up today that when floated around to a few people we didn’t have a good answer, so I thought I’d toss it out to the interwebs. Is there any rhyme or reason for the separation of CSS properties that start with FONT and those that start with TEXT (including a few others like color, line-height, etc). For reference here is W3C’s pages on font and text.
Since we don’t have a method for easy response at the moment I’ve created a NorthTemple twitter account to provide your abbreviated responses. As an aside, several of the team here have started twittering recently, and so we may use this NorthTemple account for other stuff in the future. Follow us and wait in eager anticipation for that future day =)
Why haven’t I seen this?
If I read my own blog I would have seen this. A fantastic article on Elastic CSS Layouts
, and another link today for Jon Tan
Another great article on CSS layout techniques (fixed, fluid, and elastic) with viable pros and cons for each.
“Using same corner radius setting for both outer and inner rounded rectangles will create a “lump” corner like an eaten mice in snake’s stomach.”
Adam Betts, on Rounded Rectangle Borders
Eric Meyer’s updated baseline style sheet, essentially a “reset” along the lines of YUI’s reset.css. “I don’t think [YUI reset.css] goes far enough in some areas, and a little too far in others,” Eric says. “So here’s my version.”