CSS-only fluid grid with fixed-width gutters

1-Nov-2012

It has been a few days (cough*months*cough) since my last post, so I'll make this a good one. I have seen lots of sites use CSS grid systems that are simply overkill for the majority of them. I've never been a fan of grids because a lot of them simply weren't responsive-friendly.

Then the mighty Chris Coyier (one of my favorite CSS gurus ever) released a little article called Don't overthink it grids. Which was what got me thinking about this in the first place. His grid was so crazy simple it actually made me start thinking that maybe grids aren't evil after all. There was one flaw in that simple grid system though that prevented me from using it:

If you don't add padding to the container, then the columns are NOT equal width!

The reason being is that all of the columns are a fixed percentage width minus the width of the gutter, but the last item doesn't have a gutter. Thus, it is longer than the others - As shown here

So away I went researching (googling) and trying a whole bunch of ideas. I came onto one answer on Stack Overflow that looked very promising (being the accepted answer with a whole bunch of up-votes), but then the very last little “gotcha” - it doesn't work in Safari! So much for that one. Now I'm throwing one out to the world for criticism with the hope that maybe it'll help others! So please, try it out and let me know what you think!

See Demo

Rotating Content

28-March-2012 7:17pm

It seems like every project I take on always has some sort of rotating content. A lot of the time it’s the main banner on the home page. Other times it is a sidebar section of ads. At first I used other people’s jquery plugins. Then I tried some raw javascript with the “setTimeout” function. It seemed like every time I had some banners to do, they had different requirements. Some had pagination controls, others didn’t. Some had forward & back buttons, others didn’t. I got tired of evaluating different plugins every time a new project came on.

So I finally wrote my own javascript class to handle any type of rotating content. Click here to see.

There are still some improvements I would like to add (like different types of slide transitions), but so far the options it handles are:

• Pass in the parent id and all children elements become slides
• The delay between each slides
• Whether or not so show the previous or next controls
• Whether or not to show the pagination controls
• Whether or not the slides should auto advance on a timer

Anywho, I’m still figuring out the CMS on which I’m going to build this blog. For now I still update it manually, which isn’t a big deal since I can write HTML as quick as I can type normal words! :)

Pixel Perfect

26-March-2012 11:19pm

“Pixel Perfect” is a fairly common buzz word in my line of work. Some designs are definitely more flexible than others, but the concept is to make a web page look exactly the same as the design (normally a PSD file). In fact, one job I applied to had me first complete a “Pixel Perfect Test” to see how well I could do. Here were the requirements:

• Pixel-perfect quality level (Mac and Windows).
• All text to be real text.
• Sprite images where possible.
• No inline styles unless absolutely necessary.
• All containers must be vertically expandable.
• Modal must be able to open from orange button on right side, and close from right hand top “X”.
• Cross browser compatibility (ie7+, FireFox 3+, Safari 4+, Opera 9+, Chrome)
• Download the PSD here

This is actually a smart way to filter out potential candidates. Firstly, since it would take a couple hours to code the PSD, only those who were really interested in the job would complete the task. Secondly, it is a good measuring tool to analyze a candidate’s skill sets.

You’ll notice the simple fade effect for the modal. The other important piece is that all of the images on that page are contained in a single CSS sprite. The only exception to this is for small gradient images that are only used in older versions of Internet Explorer. I still go back and forth between IE’s proprietary filters vs fallback repeatable images...

My coding can be seen here.

Zooming in & out with CSS3

12-March-2012 7:17pm

CSS3 is awesome. The psuedo-selector “:target” allows you to handle simple style changes by changing the hash tag in the URL.

Here’s an example of how to zoom an image in and out just with CSS3.

Once again, I realize this isn’t very specific; this is just a blog to help me remember some of the cool things I’ve seen or learned. Works better than bookmarks, since a lot of sites I link to eventually go down.

A Simple CSS3 Apple

10-March-2012 9:23pm

So here I am, writing my second blog entry. If you’re reading this now, you’re probably either a friend (or maybe even a potential employer...) and the only thing I have to offer you in thanks for visiting my site today, is an invitation to click on this special apple:

Seriously, click on it! This was an absolutely unnecessary little project where I recreated one of the original Apple^® logos just out of CSS3. No images at all. Check out the page source!

I’ll definitely write up at least a few more actual useful entries soon.

Welcome to My Blog for Myself

9-March-2012 11:23pm

I made this blog basically just so I have a place to record new tricks I learn. I don’t really know how much time I'll actually put into it. I just know that there have been several occasions where I thought to myself Man, I really wish I had a blog so I could write this down.