Here’s a quick tip on how to crop any sized image through CSS and an extra div. This technique comes in very handy when building websites for clients who don’t have Photoshop, or understand what 360px x 240px means. In an ideal world every image is edited and cropped before it’s uploaded to the site, so that it fits perfectly where it’s supposed to. Unfortunately that’s not how it works and many sites end up with squished, stretched, or highly pixellated images.

The key to this technique is to wrap the image you want to display in a container div, which we’ll give a specific height and width. We’ll then give the image a width of 100% just in case the user uses an image that’s too small. Here’s the code:

The html:

<div class=”container”>
<img src=”http://your-source.com” alt=”alt” />
</div>

And the CSS:

.container { width: 418px; height: 240px; overflow: hidden; }
.container img { width: 100%; }

The real key there is the overflow: hidden; part. It prevents any image that is larger than the crop area from being displayed. Adding width: 100%; is only helpful when the user uploads an image smaller than the are you want cropped. The image will be enlarged to fit the area – which may result in some pixellation – so if crisp images outweigh the need for them to fit correctly, just skip that part.

Happy cropping! And leave a comment.

Spigot Design

In the name of speeding up your site you may hear that minifying your CSS is both awesome and easy. I’ll agree that it’s very easy, and in the name of speed I can concede a bit to the awesomeness. But if you’re using @media or @font-face in your stylesheets, be wary of automatic minifying techniques.

I found out the hard way (Thanks Steven) that some of these techniques can strip web browsers ability to read @media or @font-face CSS code correctly, resulting in incorrect fonts being displayed, and the responsiveness of media queries rendered useless.

It turns out that I’d nonchalantly enabled the option to auto-minify stylesheets at the service I use to distribute this site, CloudFlare. Thankfully the option can be turned off and after a quick cache purge, all was well again in the Chrome world.

The lesson I’ve taken from this is that while it’s a great idea to minify stylesheets (and JavaScript for that matter), care has to be taken when doing so. Know what you are minifying. And be sure to test across all browsers to ensure that your sites are rendering as intended.

As a side-note, it was great to use old school Mini Cooper artwork for this post. I’ve loved them since I was a kid and still dream about getting one for my mid-life crisis one day.

Spigot Design

The latest release of WordPress (3.1) comes with a new ‘Admin Bar’ – a small area at the top of your site that displays (for logged in users) quick links and easy access to some of the most used portions of WordPress.

If you happen to have absolutely positioned elements that take their position off of the body tag, however, these items will not shift, while everything else is shifted down 28px, the height of the admin bar.

The Fix

Luckily it’s easy enough to fix. If you’re using a modern WP theme, the body tag will contain the
<php body_class(); ?> (If you’re using Hybrid the code will be: <php hybrid_body_class(); ?>). WordPress will use this tag to add the class: .admin-bar to the body tag – only when the Admin Bar is being shown. You can then use something like the following code in your CSS to fix it:

.admin-bar .absolutepositioneditem { top: (previous absolute position + 28)px; }

Update: If you’re using the Hybrid Core Framework (as all recent sites I’ve built do), Version 1.0.1 is not adding the class .admin-bar to the body tag. Version 1.1.1 fixes this.

Update 2:After installing the latest version of Hybrid Core, there seems to be an issue with sidebar registration – I ended up losing all sidebars. The lesson learned here is to be careful when installing code that isn’t ready for public release.

Spigot Design

Webkit is the experimental version of Safari and you can download their nightly build and essentially stay on the bleeding edge of what web browsers can do. You too can be on the bleeding edge, as long as you don’t mind daily browser updates.

With the recent update of this site, I noticed a minor bug with the way Webkit renders the a:visited {background: transparent;} style. In every other browser the background is rendered as expected: transparent. In Webkit, however, the backgrounds were rendering in pure black.

To fix the problem, I simply changed background: transparent; to background: white; and all was well.

Spigot Design

After pouring through this Top 12 list of CSS Frameworks, the two that stand out the most are Blueprint and YUI Grids. I’ve boiled it down to these two because of their wide spread popularity, and there are one or two things about each that I really like. Deciding between the two though, will be a tougher pick.

YUI

YUI has quite a few things going for it. The documentation is superb, relative to other frameworks, and they lay out their reasons for structuring their system the way they did. They combat the non-semantic argument by claiming their grid system is a microformat which attempts to define the structure.

The biggest advantage YUI offers is em based layouts. I’ve long subscribed to sizing in ems over pixels and YUI would help continue that.

Blueprint

Blueprint too, has quite a few things going for it, but the Blueprint Grid CSS Generator might be the slickest tool for setting up a flexible grid system that fits your current project. This tool will create a new version of the grid.css file that replaces the standard file downloaded with the framework. It also creates a grid.png file that can be used in Photoshop comps to help ensure everything lines up properly.

The Differences

While both have advantages, they each have shortcomings that the other just happens to overcome. I haven’t yet found a Photoshop template for use with YUI. That may be because it doesn’t use set columns for layout, but some kind of template, or directions for newbies on how best to create one would help.

Blueprint uses pixels to set sizes for layout. This makes elasticity not happening.

Conclusions?

None yet. Daily, it seems I vacillate between the two.

Do you use a CSS framework? Which one, and why?

UPDATE: After trying out both on a recent project, I’ve gone with YUI for the most part, but have swiped a couple of the css files that come with Blueprint, namely the forms.css and typography.css. These give me a nice start on forms and fonts as well as extra control.

UPDATE #2: Frustration with YUI’s stylesheets not being self hosted has made me rethink my choice. Since I’m already using some of Bluprint’s elements, I’ve decided to just use it outright.

UPDATE #3: After discovering Justin Tadlock’s Hybrid framework for WordPress, I’ve pretty much given up on grids all together. Hybrid doesn’t really replace a grid, but it turns out most of my layouts are not complex enough to warrant a grid, and it ends up adding unused elements and needless complexity.

No related posts.

Spigot Design