css archive

scott's picture

How we made the Metal Toad site more mobile-friendly with media queries

by , Front-End Web Developer

There’s been a lot of buzz lately about Responsive Web Design, and in particular about CSS3 Media Queries. When our CEO recently asked me to make our site easier to view on his mobile phone, I jumped at the chance to retrofit our fixed-width layout using these new techniques. In a nutshell, media queries allow you to define alternate styles that are applied to certain screen sizes. The obvious example is to pass a mobile stylesheet to small screens, and your regular stylesheet to large screens. Read More…

scott's picture

How to use @font-face to avoid faux-italic and bold browser styles

by , Front-End Web Developer

Did you know that if you declare a custom font using @font-face, the browser will try to fake the bold and italic styles if it can’t find them? This is a clever little feature that avoids a scenario where a themer specifies a font and is then confused that bold and italics don’t work, but it can be very confusing if you actually have a bold or italic version of the font. In this article, I’ll walk you through how to properly load your font files to avoid the browser’s faux-italic and faux-bold styles. Read More…

scott's picture

optimizeLegibility does not work with @font-face

by , Front-End Web Developer

Recently, twitter was buzzing with news of a CSS technique called optimizeLegibility that enables better kerning and font ligatures. It's enabled by default in Firefox above 20px text, so you may have already seen it in action. I'd noticed the effect on my Talk Like Warren Ellis site (warning: possibly not safe for work language). I happily added it to my stylesheets, and was pleased to see the effect start working in Safari and Chrome as well. However, when I created the new Metal Toad site, it wasn't working. Read More…

scott's picture

Semantic Views is Awesome

by , Front-End Web Developer

Like any Drupal themer, I've done my share of grumbling about the frequently ridiculous level of nested divs with dozens of classes. I'd heard some people mention a module called Semantic Views, but I never really understood what it was for until I found this video. If you don't understand what the big deal is either, take the four minutes to watch. It's a total "ah-ha!" moment. I'm happy to say that I just used Semantic Views for the first time on a client site, and it's just as awesome as everyone says. It saved me a ton of work and let me get exactly the markup I wanted, even while working around Chuck's nested views. Read More…

Pages