css archives

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.)

posted by ted 8 hours ago

“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.

posted by ted on Wednesday, May 25, 2011

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.

posted by john on Monday, Sep 21, 2009

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.


posted by sam on Monday, Aug 17, 2009

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.”

posted by jason on Thursday, Jul 02, 2009

case study

Click-Action Buttons

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.

Here I’ll demonstrate how to make buttons that press in when clicked, and it’s all going to happen without any JavaScript or magic.

posted by clifton on Monday, Mar 09, 2009

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.

posted by ted on Wednesday, Feb 18, 2009

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.

posted by clifton on Wednesday, Dec 10, 2008

case study

Hot and graceful jQuery dropcaps

Dropcaps are a staple of magazine and newspaper design, but aren’t always the easiest to implement on the web. Using this little jQuery and CSS tutorial, you can easily add hot little dropcaps to your web articles without bothering your developers. This method will also let you sleep at night knowing your caps will degrade gracefully, displaying just fine in browsers without CSS or JavaScript enabled.

Please note, this tutorial is for those who are familiar with jQuery and CSS. No basics taught here. Also nerd alert.

posted by jason on Tuesday, Dec 02, 2008

case study

Using a CSS Framework in a
Large Organization

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?

posted by aaron on Friday, Nov 21, 2008

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.

posted by ted on Wednesday, May 14, 2008

“i feel dirty every time i use ”!important” in a css file…”
“Bobthecow” on Twitter

posted by ted on Monday, May 05, 2008

text vs font in CSS properties

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 =)

posted by aaron on Thursday, May 01, 2008

My newest bookmark, from SEOmoz: 15 CSS Properties You Probably Never Use, but perhaps should

posted by ted on Thursday, Apr 24, 2008

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.

posted by jason on Tuesday, Mar 04, 2008

Another great article on CSS layout techniques (fixed, fluid, and elastic) with viable pros and cons for each.

posted by rick on Friday, Feb 29, 2008

posted by ted on Friday, Jan 11, 2008

For you CSS junkies, you may find this article very handy.

posted by foster on Tuesday, Jul 17, 2007

“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

posted by jason on Tuesday, Apr 24, 2007

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.”

posted by cameron on Thursday, Apr 19, 2007