‘CSS’ - Category Archive

 

Building up from WordPress

October 6th, 2009
Current WordPress logo

WordPress logo

WordPress, now on version 2.8-point something is a work of open source art. You can’t go wrong with building your blog or your website from the beautiful framework of WordPress. So that is where I started. But this is how I ended up with this designed theme.

1. 960 grid

The 960 grid makes life so much easier. Starting from here I could easily visualize my layouts, work within specific column widths and build a grid layout for all my elements. To make this intergration even easier, I started with a clean slate theme built by Troy Dean from down under. His 960bc theme basically cleared out all the wordpress default styles, added the 960 grid and defined the basic theme templates. Besides renaming the “colour.css” to “color.css” I modified the footer and header a bit to get exactly what I wanted, but this was a great starting point.

2. Typography

After spending over a year working at a full-service advertising agency I quickly learned the aesthetic value of what great type can do for any design. And while I was constantly forwarding Teri the safe web fonts resource page, she was teaching me to reconsider the web font problem. I already knew about sifr, but there were some limitations. It was only recently, in my constant web deconstruction (step 1 is ctrl+u in firefox) that I discovered cufon.

So for my site, I added the necessary cufon script, my generated font, which happens to be the old Japanese font, Kosuka, and the extra bit of code to the header.php file. The code looks like this:

  1. <script src=”/scripts/cufon-yui.js” type=”text/javascript”></script>
  2. <script src=”/scripts/Kozuka_Gothic_Pro_OpenType_500.font.js”></script>

3. Setting the Type

I had recently read an article forwarded from my buddy Ryan Brandle that talked about having all your type sit perfectly on the baseline.

With a wonderful visual example of how the final output could look, I was hooked. I wanted to put this idea to use immediately. I set my line-height to 18px and instead of using a single font size for easy scaling, I agreed with Wilson Miner’s comment,

“At some point as designers we have to strike a balance between creating pixel-perfect layouts and infinitely flexible ones. When you get down to it, resizable text is primarily an accessibility feature, not a design feature.”
– Wilson Minor

The math required to keep the line heights functioning like I wanted became cumbersome, so I just decided to declare the 18px height throughout my css document. In the future, I would love to have global css variables so I could declare the line-height in just one place and have it cascade down. If I ever wanted to change the height to say, 20 pixels, it would be one quick change. The balance for me is that I know if I ever wanted to adjust this height, it would just be in my css document.

4. Background Images

I wanted to do a couple of this with this site. First, I wanted to make use of a blur effect on top. I like the new vista graphic element in which the background blends thru the top of the application header, so I employed this idea to create my two image header. The first image is the top background slice repeated. The second image is the actually image I created to create this semi-opaque effect. I also added a top band to pull the side off from the tabs and browser interface. I repeated this concept for the footer, adding a soft gradient to anchor the site. I used a different blur image to constrast the top header, but kept the same color scheme.

5. 100% height

For me, this is a must. I want to take advantage of the browser’s real estate afforded to me. In order to get my 100% height working properly, I just visit this trusty example.

6. Colors

I wanted to have a refreshing site, lightweight and inspiring. I also wanted to have more than one main color. Finally, after working on a site with a great designer friend, Melissa, I decide to compliment her fresh squeezed lemon with a bit of lime. I ended up with a cool collection, soft and comfortable, which I think helps highlight the content over just the site design while still being inspirational and crisp.

Website color scheme

Website color scheme