CSS

Sass for Designers

For more on Sass, read The Sass Way and follow @TheSassWay on Twitter.

Note: Throughout this post, when I say “Sass” I mean “Sass and Compass.”

This is not a post saying…

“If you’re still building websites without Sass, you’re doing it wrong.”

This is a post saying:

“If you haven’t tried Sass/Compass, please do before dismissing it.”

• Read more about Sass for Designers

Formalize CSS

Formalize CSS | View demo | Download | GitHub repo

Formalize CSS — Dress up your forms!

• Read more about Formalize CSS

960 Grid System

If you use the 960 Grid System, check out the companion JS file: Adapt.js

• Read more about 960 Grid System

Accessible Display: None

Note: This post is outdated. Instead, read this article: Now You See Me.

• Read more about Accessible Display: None

PNG Overlay

PNG Overlay: Example | Download (44 KB)

Have you ever run into the problem of creating a site with pictures given by the client, only to find later after they update their photography the original look and feel is not retained? For instance, you might add a drop-shadow, rounded corners (maybe both) or some other graphical effects applied to the images.

• Read more about PNG Overlay

Clearing Floats

If you are already a seasoned CSS veteran, feel free to stop reading now. That being said, from time to time via email, in-person conversations, or on the Godbit forum, the question of how to clear floated elements is a reoccurring one.

• Read more about Clearing Floats

Consistent Form Styling

Well, there’s only about an hour left before I leave for Gospelcon, and I am gitting a bit nervous about giving my presentation. I am sure it will go well, and have my Apple Keynote slideshow all prepared. I will be posting that after I present, as I might be adding slight tweaks here or there as I think of them.

Anyway, I just had a thought that I wanted to share real quick, and that’s styling form elements consistently. By default, this is what the input and textarea look like for most browsers.

• Read more about Consistent Form Styling

Hoverbox IE7 Fix

Okay, so now that Internet Explorer 7 is pretty much solidified in how the CSS rendering will perform, I figured it was high time I respond to all these emails I keep getting about Hoverbox not working. I fiddled with the CSS for a bit this evening, to no avail.

• Read more about Hoverbox IE7 Fix

Styling HR

I did not ever stop to think that styling horizontal rules with CSS could pose much of a problem, until I saw this article over at the newly launched Bite Size Standards website, entitled Styling horizontal rules with CSS. While Nathan Pitman’s solution certainly is creative, it is pretty much unnecessary.

Now, I say this not to knock or make fun of his talent or proficiency as a web designer, but felt I should share a simple way to do it, that works in cross browser situations.

• Read more about Styling HR

Solving the Image Float

This is so simple, I’m wondering why I hadn’t thought of it before. Chances are, someone out there already has, but I thought I would share it here. Awhile back, though I couldn’t seem to find his post, Bryan Veloso was bemoaning the fact that in order to have nicely presented articles with images, it required adding a class name to the image. This created a problem, because if you re-design or change your naming conventions, you have to go back through and clean up your articles.

• Read more about Solving the Image Float