In a previous post on using Sass with the 1KB CSS Grid I reviewed in depth the concept of using Sass and Compass to remove unnecessary classes from your HTML markup and use mixins instead. After using this grid on my own projects for the past year I’ve finally created a Ruby Gem for called compass-grid-plugin and I’ve updated the GitHub repository to include a fluid grid option as well. For now I’m calling it “Grid” because that’s what I’ve been calling it. The fluid grid will be documented in-depth below.

• Grid on Github
• Grid on Ruby Gems

Like many things involving open source development, the jQuery project is designed to be worked on in a Unix-like environment such as OS X. Most regular people have a Windows machine (around 90%) but developers aren’t regular people. Regardless, I primarily develop on Windows and I recently wanted to work with the jQuery code base and found the instructions for setting up your environment on Windows to be a little outdated. Thankfully the open source world is getting much friendlier for Windows developers. This article covers the official jQuery instructions and my preferred setup.

When creating JavaScript libraries, it’s difficult to support the full range of units and most developers settle on just supporting pixels. CSS supports several units for length as explained in this MDN article but supporting them with JavaScript can be tricky. This post explains the basic technique for converting units and the inherent browser bugs that need to be overcome. This post also introduces a new Units library I’ve created and posted to GitHub.

If you have some weird reason to handle arbitrary units in your JavaScript library, the code demonstrated below should offer the most complete solution possible in the smallest possible package.

In a previous post exploring rounded corner methods, I covered a technique using absolute positioning for faking rounded corners in browsers greater than IE6. One issue with faking rounded corners is the amount of HTML markup required as well as the hassle of crafting the accompanying CSS. I have created a jQuery plug-in for adding the required markup and a complementary Sass/Compass @mixin for generating the required CSS. The markup generated utilizes jQuery UI theming for the CSS class names. The code is available on GitHub

A challenge all web developers face is converting Photoshop documents into real, functioning web pages. Often this is a simple matter of measuring things and picking colors but in the case of drop shadows recreating them in CSS3 can be challenging. For some reason I have yet to find a tool that will simply translate the settings from the Photoshop Layer Style Drop Shadow dialog into proper CSS3 — so I decided to create one in Compass. I created a Sass @mixin that relies on Compass to easily create CSS3 box-shadows from the values found in Photoshop.

UPDATE: a Github repo and Ruby Gem have been created.

Since the release of Internet Explorer 9 earlier this year, the browser landscape has continued to change rapidly. In early 2012 Internet Explorer 10 will be released — the second IE release in about a year — with a number of important advancements. Firefox will have fully adopted the same release cycle as Google Chrome with version 6 and 7 due by years end. Firefox 6, due August 16th, will be the third version of Firefox released this year! Browsers are getting released early and often and upgrades are now automatic in Chrome and Firefox, often without the user’s knowledge.

Often overlooked in the hype over the browser wars is the role that the OS plays in all of this. Windows 7 is now the most popular OS in the United States; it passed Windows XP in April. It’s set to become the number one operating system in the world sometime in October or November this year. Many commentators chastised Microsoft for not releasing a version of IE9 for Windows XP but that doesn’t seem to have been a bad strategy for Microsoft. IE9 is already making impressive market share gains although Windows XP is likely to be a major operating system on the worldwide market for some time, it will likely still have around 30% market share by the time of the 2012 presidential elections. That means that the long tail of decline for the older IE versions is likely to be kept alive by the stubborn decline of Windows XP.

jQuery has a really strong animation library built in that makes it very easy to animate a CSS property with very little JavaScript. However, it’s not well suited to animating complex things that are not directly related to CSS. In particular, tweening an element along a curve or animating a canvas — which doesn’t use CSS at all — is more difficult.

To solve these issues I’ve created two new jQuery plug-ins: jQuery Tween and jQuery Curve.

CSS3 introduced a new text-shadow property that allows for, well, shadows to be placed on text. As of February 2011, text-shadow is only supported in 48% of browsers in use. Internet Explorer 8 and below do not support text-shadow; surprisingly Internet Explorer 9 doesn’t either. Because the majority (90%) of non-IE browsers already supports text-shadows natively, it’s most interesting to try and polyfill IE. I’ve created a Textshadow jQuery plug-in for just this purpose. Read below for an overly thorough explanation of hacking IE filters to get a convincing text shadow.

Theres no shortage of techniques for achieving cross-browser rounded corners. Most of the techniques involve taking an otherwise simple box and adding markup and CSS until all browsers (IE 6+, Firefox, Safari, Chrome) agree to round the corners. Of course the great hope today is to use CSS3 techniques such as border-radius or multiple backgrounds and of course those approaches won’t work in Internet Explorer 8 or below. Ironically, one of the best places to find some of the old school CSS solutions is on the MSDN page describing border-radius . For modern browsers, the border-radius property will do a good job of rounding corners. To support all browsers some clever techniques will need to be used.

The 1KB CSS Grid is a simplified grid system and is one of many dozens of different grids available. I started using a personal variant of this grid system recently because it seemed like a very simple code-base to understand. A common complaint about CSS grids is that they require classes in the markup that aren’t much different that simply hard-coding widths in a style attribute. Of course SASS can help remove that complaint and makes grids even more flexible. Here’s a tour of the 1KB CSS Grid, modified to suit my tastes and rewritten in SASS.