Working with 960.gs
posted May 6, 2008 by JR Patten

There’s been a lot of talk in the intarwebnets recently about the benefits of CSS frameworks. I insist on hand-coding, but I really don’t like working with CSS (particularly haggling with a certain 6th edition browser that starts with Internet and ends with Explorer) so I’ve always like the idea of a structure to make it easy for me, like a GUI framework for desktop apps. I’ve looked into some of the more popular, like Blueprint and YUI, but haven’t liked/used either for whatever reason, though I’ve always liked the concept.

Then, I decided to make this site, and I didn’t use any framework. I started with a pre-made theme and smashed, manhandled, sliced, and diced it until it was something kind of like what I wanted. I had floated div’s, crazy margins, and all manner of other hacks for whipping the stylesheet into submission. I got it working and I wasn’t really with how messy it was, but I didn’t have time to do anything about it with final projects and final exams taking up all of my time. Now that the semester is over, I decided to re-do it.

I decided on 960.gs after reading a blog post about it (wish I could remember where, so I could send some link love). I looked into it and found a professional, well-developed framework that had some good ideas that I was interested in, so I decided to give it a try. Boy am I glad I did. It took only a little more than 2 hours, and it looks better than it did before. Here’s a quick overview of how to use it:

Downloading and Installing

There really is no “installation”. You just download the ZIP file, and extract it into your CSS directory (or your theme’s CSS directory if you’re using WordPress). Presto! Working framework. I changed the folder paths around a little bit, but you can really use it without changing anything.

The ZIP file comes with a lot of stuff to help you design with the 960 system, including “PDF grid paper, templates for Fireworks, OmniGraffle, Photoshop & Visio, and CSS framework with demo HTML”. I only used the CSS files, which is all you need for coding your site. The system comes with 3 CSS files.

  1. 960.css – Sets up the grid system, the 12-, and 16-column containers, alpha, omega, and prefix. This file is necessary to the grid system.
  2. reset.css - “Initializes” the system so that all margins and paddings are 0, outline is 0, etc… This file is necessary to the grid system.
  3. text.css - Sets the font sizes including headers, adds margins to lists, etc… This file is not technically needed for the system, as far as I can tell.

Also, the CSS files are very lightweight, and won’t add any significant loading time to the page, which is something that other frameworks struggle with.

Using it

The system is based around a 960 pixel-wide grid (hence the name). The grid system is a great way to produce good designs without a lot of overhead (Smashing Magazine’s got a great article about grids). You have the option of dividing the 960 pixels into 12 or 16 columns. 960.gs uses the following classes to structure the page:

  • container_XX is used in the outermost box to determine how many columns. You can use container_12 or container_16.
  • grid_XX is the bread and butter of the system. XX is for how many columns you want the block to be. For example, grid_10 will be 10 columns wide. The exact pixel width is determined by how many columns you’ve divided the grid into.
  • prefix_XX allows you to add in blank columns before a block. XX specifies how many blank columns you want.
  • alpha is for if you have children blocks. If you do this, you’ll want the first child to have no margin on the left side. alpha makes that happen.
  • omega is similar to alpha, except that it gives no margin on the right side. Use it for the last child.

That’s it. All you have to do is apply classes to boxes. It’s that simple to use. In the outermost container, decide how many columns to use. Then, all you have to do is add classes to your elements to lay them out on the page. It couldn’t be any easier.

Some gotchas

The padding problem: This isn’t really a problem with the framework. It’s just standard CSS, but it’s good to know. If you want one of your grid_XX cells to have padding, you can’t apply the padding directly to the cell, since that padding will add to the width of the cell, throwing off the grid. The way to pad the grid cells is to add another, non-grid_XX cell inside it and pad that one. The sample code uses <p> for that purpose, but I’ve used <div>. It doesn’t really matter.

The width problem: What if you want your grid to be more or less than 960 pixels wide, or you want it to be fluid? You choose another framework. The framework is named 960 for a reason. It’s 960 pixels wide, and short of hacking the CSS, there’s nothing you can do to change that. However, as detailed on their site, 960 pixels is a great width. From the site:

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.

Summary

I’m very impressed by how easy the system is to use, even for a CSS-klutz like me. The class-based layout design makes it extremely easy for me to translate the ideas in my head into CSS code without having to fiddle around with fragile floating and margin-ing.

I haven’t used the system in the most ideal or pure way (see the sidebar in particular), but the overall layout of the site is done totally with 960.gs. It worked perfectly. I didn’t have to hack their files to get it working like I wanted it to. It just worked as advertised, and made me happy.

I didn’t use the other files that came with the package, like the Photoshop template or the PDF paper since I already had the site designed, but I’ve looked at them, and they allow you to design exactly how the page will look, and when you code the site, I’m sure you’ll see it stays true to the design.

Thanks, Nathan Smith, for the great CSS system. You’ve made my life easier, and I appreciate it!

Posted in Web Design | Tagged , , | 13 Comments

Freelancers Are Like Session Musicians
posted May 5, 2008 by JR Patten

There seems to be two ways to make money working for yourself doing development, and they have parallels in the music industry (bet you never would have guessed).

The first way is to start a company. Get a co-founder or two, find a great idea, do some magic, then become fabulously rich. It’s just like starting a band, really. Find a couple of other musicians, create a great sound, do some magic, then become fabulously rich and famous. If it works, it’s awesome. You get rich, you get famous, and it’s all a piece of cake. Except your chances are slim to none. The chances you’ll found a tech company worth billions are about the same as your chances of founding a #1 rock band.

The other way to make money on your own doing development is by freelancing. Chances are, you won’t make a billion dollars doing freelancing, just like the chances are you won’t be world-famous being a session musician. However, there’s much less risk, you control your destiny, and you make a reliable and good living.  And if you want, you can grow your freelancing until it becomes a good-sized business or consulting firm.  You’ll be sustainable in the meantime, and you’ll start making the big bucks with a few years of hard work instead of one or two living in a box wishing on a star.

Then again, you might even turn your freelancing business into a billion-dollar company. After all, Jimmy Page, Luther Vandross, Duane Allman, and Slash started out as session musicians. It wouldn’t be too bad to end up like them (minus the drug addictions and crazy clothes/hair), would it?

Got something to get off your chest? Leave a comment!

Posted in Freelancing | Leave a comment

How to be Great
posted May 1, 2008 by JR Patten

You can do it!So you want to be the next Michael Jordan? Pablo Picasso? Bill Gates? Béla Fleck? Yoda? In the last article, I talked about the importance of having something in your life that you strive to be great at. I also promised that I’d tell you how you could go about improving at whatever it is that you’ve chosen. Well, here we go…

There are a ton of things you can choose to do, and I can’t give you a formula on how to be an expert at all of them (actually almost any of them). But, there are a few things you always do when starting out, and some ways to keep improving that apply to almost everything. I’m just trying to get you pointed in the right direction, hand you a map, and maybe help you bum a ride.

The number one way to get better at something is to DO IT!

Besides that, there are a couple of ways to get better at something:

  1. Learn about it. How can you get great at something if you don’t know anything about it? You will learn a lot by doing, but there are some things you can’t teach yourself (or won’t know to teach yourself).
  2. Get cultured. Whatever it is you’ve chosen to do, there’s most likely (read: most certainly) someone else who’s doing it too. In fact, there are probably a lot of people doing it too. Every activity, no matter its popularity, has a community, and this community has its own culture. This culture is invaluable for quickly getting yourself up to speed (and making great friends).

The culture surrounding an activity is a fantastic way to dive in and get your mind tuned to what it is you’re trying to do. The best way to get involved in the culture is to go to events (be they jams, races, etc…) and joining clubs. Any time and place you can find a group of people interested in the same thing is a great time and place to start getting cultured.

Mostly, though, I want to discuss where to find knowledge. You’ve got two main sources of information for new topics (besides people themselves): books and the internet. Books are usually more professional but can be pricey, while the internet makes no guarantee of quality but it’s (mostly) free, and there is a ton of great information.

Books are the classic way to learn about things. You’ve probably used books to learn about things your whole life, and there’s a reason for that. They’re great! They contain tons of information, they’re well-organized, and they’re professional. If you’re willing to spend a little money, you can get great information from a book. Plus, there’s something you just don’t get from looking at a screen that you do with a book, where you are literally holding knowledge in your hands.

The best place to get books about anything is Amazon. They literally have books on every topic you can think of. Want to paint, play banjo, play tennis, learn to program computers, run a marathon, or invest in stocks, or learn to do everything? Amazon’s got you covered. A quick search should turn up a great list of books.

There’s also the For Dummies series that covers a lot of common topics and is very good.

The internet is a phenomenal resource. There is an immense amount of information at your fingertips if you know where to look. Where might that be, you ask? List time!

  • Wikipedia The online free encyclopedia contains pages about literally everything you could wonder about, and then some. Check the bottom of the pages for links to external sites to dig deeper.
  • Google Google knows everything. If there is knowledge on the internet, you can find it with Google. I mean it. Everything.
  • Forums Do a google search for “[insert topic here] AND forum” and you’ll find the online hangouts for the community you’re interested in. People post questions, get answers, complain, praise, and generally talk about whatever it is you’re trying to learn.
  • Blogs Blogs are fast becoming great authoritative sources of information about niche topics. There are several great places to search for blogs about specific topics, in addition to appending “blog” to any Google query, but the best way to discover new blogs on a topic is to follow links in the blogs’ “blogrolls”. These are usually the author’s favorite blogs, and usually lead to great stuff. Within 2 levels or so into this “link network”, you’ll probably know about all the major blogs in your niche. Subscribe to their feeds to get great information on a regular basis.
  • Social Networks A big trend on the internet is social networks that target niche interests. Find one in your topic area, and you’ll have a great network of people to learn from.
  • Social Bookmarking Sites These are sites where users submit links to various things that usually get voted on. Search one for your topic. Often, the most popular posts are mega-lists of resources on a certain topic. The best ones are: del.icio.us, Digg, and Reddit. del.icio.us is likely to contain a broad range of interests, whereas Digg and Reddit will be slanted toward technology topics.
  • EDIT: MIT OpenCourseware is a phenomenal place to learn about new things. MIT has published a large amount of free lecture notes, exams, and videos for a lot of the classes they teach. It’s like going to MIT from home, and not having to worry about passing! If what you want to learn is something they teach, you really can’t beat this content, besides actually enrolling at MIT. I can’t believe I left this out when I first posted this, but now you know!

Using books and the internet, you can learn just about everything there is to know about whatever you’re trying to learn. But, again, the best way to get good at something is to do it, do it some more, then do it until you dream about it.

Did I forget any great places to get information? Are there better ways to start getting great? Want to get something off your mind? Let me know in the comments.

Here’s to being great!

Posted in Self-Improvement | Leave a comment

You’re Improving or You’re Dying
posted April 17, 2008 by JR Patten

You can’t stand still in life. You’re moving in one direction or the other. Either you’re improving yourself, or you’re slipping into apathy and letting yourself die. It is impossible to be at a halt in life. Your body, mind, and spirit will constantly decay unless you actively do something to stop and reverse them. This concept of always striving to better yourself is called “constant improvement”.

Before we go any further, let’s clear up the definition a little bit. From just the sound of the phrase, it may seem like I am suggesting spending every spare moment training, practicing, or otherwise pro-actively working at something. That’s not the case. Constantly improving does not mean you can’t take time to hang out with friends, play video games, watch movies, or just otherwise slug it. You can and should! Heck, look above. Right on this very page I call myself a “relaxation connoisseur”. I don’t mean you have to spend every waking minute working. What I mean is this:

There should never be a moment in your life when you don’t have at least one worthwhile thing you are trying to make yourself great at.

Note the emphasis there. If you are trying to be great at whatever you’ve chosen, you’re guaranteed to be putting full effort into it, and getting the most you can back out of it.

There are lots of reasons to be in a state of constant improvement:

  • The effort and passion you put into getting great at one thing will automatically raise the level of effort and passion you put into everything else in your life. That’s a free bonus. It’ll just happen. Once you begin really going after something, that passion and focus will spill over into the rest of the things you do. It’s a mindset. You couldn’t stop it from happening if you wanted.
  • Your life will be more fulfilling. If you are dedicated to gaining this new skill, you should be making short-term goals to measure your progress. Each time you achieve one of these goals, you’ll feel great, and looking back to see how far you’ve come provides an amazing sense of accomplishment. You’ll soon begin to feel like you can do anything, which leads me to the next reason…
  • You’ll realize you can do anything. Once you see yourself succeed again and again by your own merit and hard work (and succeed you will, I promise. Just don’t give up.) you’ll quickly begin to realize that there is nothing, absolutely nothing you can’t do if you put your mind to it. It sounds cliché, but trust me, it’s the absolute truth. A year and a half ago, I couldn’t run 3 miles without stopping. Now I run ultramarathons for kicks. And you can too, if that’s what you want to do!
  • You’ll enjoy it! Phrases like “hard work” make it seem like you’ll be toiling away under the oppressive whip of self-improvement, but it’s not so! Learning new things and becoming great at them is a blast. Chances are, if you’ve chosen something to pursue, you like it and you’ll only start liking it more. Plus, if you take the time every once in a while to reflect on all you’ve done and accomplished, you’ll realize that not only are you be for your efforts, you’ve had a great time and made fantastic memories along the way.

At some point, you’ll get interested in something else, and you’ll find you’ve switched gears and are focusing a lot of energy on that. Great! That’s exactly what should happen. As you repeat this cycle of learning new things, after a while you’ll have compiled quite the arsenal of skills and talents, built up a huge new group of great memories and stories, and met tons of interesting people. Those last 2 alone are worth the effort and work you’ll put in.

Hopefully, I’ve now convinced you that it’s worth your time to spend time really putting effort into becoming great at something. But what should that be?

It can be just about anything! The important thing is to pick something and get started. Quit putting it off.

Let’s clear up one more thing here before we move on. You can choose almost anything you want, and you will benefit from the effort you put into it, but some things are inherently better than others. For instance, learning to play guitar or photograph wildlife is going to enhance your life much more than learning how to best nap on the couch. You don’t have to choose something traditional, but you should choose something that’s actually going to make you and your life better.

Now, for some things to choose from, if you don’t already have 100 ideas in the back of your head.

  • Sports are fantastic things to focus on. They’ll get you active, and get you working out your body and not just your mind. But that’s not all. Exercising physically actually helps your mental health as well. I even find I think more clearly on the days when I get to exercise in the morning. Along with getting in shape, sports will help you tone down and look great, which is a big confidence booster.
  • Traditional Art, in all its forms will enhance your mental acuteness and open up your mind to creativity. Music, painting, sculpting, etc… are just the surface. There are thousands of ways to express yourself artistically and creatively. Find one that interests you.
  • Photography is a fantastic way to bring out your artistic or journalistic side and have some fun while you’re at it. With the cost of high-quality cameras dropping, it’s easier than ever to get started.
  • Computer skills are a great thing to have in this day and age. Particularly programming skills will help you to think more clearly and logically. Once you “learn to think” you’ll find that you can apply the skills you learned in the rest of your life – making decisions clearer and helping you to think logically. Not only that, you will have added a very marketable skillset to your resumé. The computer industry is red hot.

There are plenty of other things you can learn to do, but the most important thing is just pick something! Choose something you’re interested in or you think you’ll enjoy. If it turns out it’s not for you, you’ll realize it quickly and you can pick something else.

Don’t put it off. If you don’t have something in your life you are actively striving to be great at, find something now. You’ll find yourself enjoying the rest of your life more, you’ll be happier and more productive, and you’ll lead a much more fulfilling life than if you simply drift through existence.

In the next article, we’ll discuss how to go about getting better at something once you’ve picked it out and decided you are ready to dominate it. Everything you need to excel is easily available to you, and a lot of it is free, if you know where to look. Stay tuned!

Cheers! A better life awaits.

Posted in Self-Improvement | 2 Comments

The Greatest Commercial I’ve Seen…
posted April 5, 2008 by JR Patten

… in a very long time, at least. I can’t even remember the last time I saw one better. But, there has to be one, right? I mean, it’s just a Pontiac ad. I should like the Budweiser frogs better, right? Or the 1984 Apple ad. Wrong. Have I no respect? The new Pontiac G8 commercial is quite possibly the best commercial I’ve ever seen. Check it out below. Continue reading →

Posted in Advertising | 2 Comments

Jott is Awesome
posted April 4, 2008 by JR Patten

I don’t have a fancy phone. I mean, it can take pictures and video, which I consider very fancy, but it’s really not. I don’t have a data plan. I can’t check my email on it. I can’t browse the web, zoom in and out, or control it by touching the screen. But I can, however, make phone calls (wonder of all wonders) and send text messages. In the past, if I’ve wanted to take a note of something to remember later, I text message it to myself, then forget to check my inbox later and end up forgetting it anyway. But it seems I have found a way to take notes and remind myself of things while I’m out and about, and I don’t even have to have a fancy phone! Continue reading →

Posted in Web Services | Tagged , | Leave a comment

First!
posted March 30, 2008 by JR Patten

let\'s get it started, huh!Alright, after no ado, we have J.R.’s blog and home on the web. Soon enough, the homepage of this site will be http://www.runningskull.com The site is off the subdomain, and runningskull.com is now live!, and you’ll go to a homepage of sorts instead of this blog. I’m also going to update the pages linked to above, so that they’ll be more than a gaping gray screen when you click on them. I’m also going to get a nice footer down there at the bottom. Footers are cool, m’kay.

Why a blog/website? I think that a blog is fast becoming a great supplement to/replacement for a resumé, and it’s about darn time I started one up. I’m a geek and such anyway. I also am going to use the site as a sort of professional homepage. I do freelancing work and entrepreneurial-based side projects, so I’d like to advertise my services and products here. Plus, I think this whole internet thing could take off.

I also used to like to write a lot. Then I came to tech, where code > prose, and I’ve lost some of that love for language. Time to get it back.

It’s not going to be all professional, though. I like a lot more stuff than just computers, and in order to really get a feel for me, you’re going to have to listen to me ramble on about running, hiking, kayaking, playing banjo, camping, cooking, being in college, my all-knowing and controversial insights into humanity, travel, sports, incredibly witty satire and whatever else pops into my mind late at night when any sane person is asleep. If I thought it might smell good, I’d call it potpourri.

And best of all, no one is ever going to read this post! Yipee ki yay!

Oh, and also, I can only test this in Firefox (linux), Firefox (Vista) and IE7 (Vista). If you notice something looking funky, please let me know, and let me know what browser/OS you are using. Screenshots are gold, but if you see something stupid and don’t feel like putting in all that effort, just reply to this post. Thanks.

Posted in About the Site | Leave a comment