I’m the kind of person that likes to do everything on my own and hates asking for help. “Yes, I see that my arm has come off, Doc. I can handle this.” It’s really pretty obnoxious.
When it comes to web design, however, deadlines and budgets have a way of interfering with my delusions of grandeur. Luckily, there are all kinds of web apps out there that make short work of some of the more mind-numbing or difficult tasks involved in styling a website. These are just a few that I use regularly:
Grid Creation
Gridpak
While I don’t need a custom grid system for every project, when I am looking for one, gridpak.com has quickly turned into my favorite resource. The interface is fantastic, you can set break points for responsive design on the fly, and when you’re finished it spits out all the CSS, LESS, and JS you need in a neat little zip file. Beautiful.
CSS3
CSS3 Click Chart
This site is a great resource for all of those CSS3 properties that aren’t exactly second nature just yet. It includes a description, code example, and browser support for each property. It also gives you links to many other generators like the ones listed here.
CSS3 Generator
I’m literally all over this site every day. Like, just as friends. It makes things like box shadows, transitions, and transforms a piece of cake. It’s especially handy considering several of these properties still require proprietary browser prefixes. Who wants extra typing just to tell Safari to do the same thing as Opera? Not this guy.
Ultimate CSS Gradient Generator
Any time I need CSS for a gradient, I come here immediately. There is absolutely no sense in trying to piece together all of the proprietary code required when there’s a tool that does it this well for you. Just dial in your (subtle) gradient on the Photoshoppy interface and copy and paste CSS. What a badass you are.
Images
Ajaxload
Despite it’s sci-fi porno name, this site is actually a great little tool. Ahem. To create your custom ajax loader image, just select the style and colors, and the generator kindly hands you your new animated .gif file.
IcoMoon
I just stumbled across this icon-generating service recently, but I’ve been using it quite a bit since. Simply select the icons you need, enter your custom size and hex color, and hit download. Out comes a set of PNGs (and SVGs) for immediate use. Most of the icons are very simple, interface-based images. However, there is one that I’m pretty sure is supposed to be dog poop.
Stripe Generator
It’s not all that often that I need a seamless striped background image. But when I first found this site, I barfed to myself a little thinking of the time I had previously wasted making patterns like this.
Of course, there are tons of great resources like this all over the place. If there are others you swear by, please share them below—I’m always looking for new kinds of lazy.
