Oooh, Pretty!

In the great battle between whether to start implementing Socket.io or making things pretty, I decided to start with getting my fancy on.

The reason? Honestly, it just comes down to the fact that I’ve been staring at a really bland-looking site for the last several weeks and I’m interested in seeing a bit of eye candy. I’m not talking about fancy images (yet), just basic layout.

And so far, it looks great!

To aid me in my moving of boxes, I’ve been using the 960 grid system. The Internet is full of people who are die-hards (both for and against) CSS frameworks, so if you’re interested in hearing both sides of the argument, please feel free to ask Google. But my major goal, at the moment, is to get a quick prototype up and running. For that purpose, a framework like 960.gs is exactly what I need.

If you know enough about CSS to understand how classes, ids, and divs work, then that’s really all you need. I love how, in the span of an hour, I was able to get a really simple wireframe of my whole site. (Word to the wise: use the outline property, instead of border. That way when you get rid of the lines, your entire site won’t end up shifting like crazy.)

In addition to 960.gs, I’ve also been playing around with the Stylus CSS scripting module. The beauty of Stylus is that, instead of dealing with all the idiosyncrasies of punctuation, etc., you can just get to the part where you’re making your site look awesome. Yes, you have to watch your indentation.* But honestly, if it’s between lots of nasty punctuation and a few tabs here and there, I’m going to pick tabs, every time!

Plus, with Stylus, you can do math! And use variables! And write functions! I can say, for example,

[css]height h = 40px
padding-top (h / 2)[/css]

Tell me that’s not beautiful and I will call you a liar.

And I’ve just read about another module called nib, which plays with Stylus. The point of Nib is that it does “Stylus mixins, utilities, components, and gradient image generation.” Basically, it’ll just make Stylus even more awesome. Updates to come as I figure them out :-)

Oh, and I got authentication working, as well - I’m using mongoose-auth, and I will write a more thorough post about that later.

Happy Coding, Y’all!

  • Maybe it’s because I prefer Python over most other languages, but whitespace and I get along really well. Semicolons, on the other hand, are the bane of my existence.