All Posts in CSS

November 07, 2011

Convert-o-matic: A Perfect Landing Page Template

Download the project from Github or directly as a .zip file

Convert-o-matic on Github

Everyone needs a landing page for something, don’t we? For a while now I’ve seen this infographic from KISSmetrics popping up anytime I look for tips and tricks on landing page design. It’s pretty spot on.

I basically mapped the elements one-for-one to an HTML5 Boilerplate-based starter template because I wanted an easy way to create simple and effective landing pages without too much effort. All you need is a bit of basic HTML knowledge to use it to quickly validate an idea for a project or to create a landing page in a pinch that subscribes to best practices. You can use the minimal version or customize gradients and colors without too much trouble. (I’d highly recommend editing the copy.)

Download the project from Github or directly as a .zip file

November 01, 2011

SASS + Compass + WordPress

I’ve been spoiled working with SASS and Compass in the context of Ruby apps for long enough now that I forgot what life was like without them. Switching over to WordPress and PHP for a recent project painfully reminded me, but the hurt didn’t last long. Here’s what I did to soothe it, starting from the top.

Oh: if you haven’t used SASS and you plan on ever writing a single line of CSS, ever, it’s something I can’t imagine living without. I truly believe it doubles my productivity. SASS (or LESS if you want to go that route: I think they’re both great) is indisputably the business. To get started you need passing familiarity with the command line, but if you scurred this article demystifies it.

There’s A Gem For That, Sort Of

I Googled and immediately found the super-promising compass-wordpress gem. OH HELL YEAH until I found out that it doesn’t play well with recent versions of Compass (though there’s an open pull request that deals with this issue). After learning more than I ever wanted to about pessimistic constraints I figured I could just get SASS and Compass working by hand.

Installing SASS & Compass

You need Ruby to install SASS and Compass (if you’re on OSX, this is just going to work because it’s already there, and if you’re using RVM, even better). When you install Compass, you’ll get SASS too:

gem install compass

Get Your WordPress Theme Ready

I’m familiar with Thematic and usually start with a fresh child theme‘s fairly empty directory where I create a new Compass project:

compass create

Make sure that you reference the compiled CSS (at the very least you’ll probably want /stylesheets/screen.css if you stick with the defaults) in your new theme’s templates as you’re building them out.

Make Epic Blog

Open a command prompt from your theme’s directory and let Compass start automatically compiling:

compass watch

You’re off and running with SASS and Compass all up in your WordPress.

BTW: there are a couple of other WordPress tricks that I’ve started using along with SASS and Compass to make development more efficient and more joyful. Those include using Coffeescript, customizing the directory structure of the project and automating some repetitive commands with Consular, which I’ll explore in a future post.