Thursday, October 6, 2011

Website Design : Things a programmer doesn't see

It's a bit of a misleading title, since I'm not actually going to give you a list of things that a web programmer doesn't see when it comes to web design.  That is firmly in the domain of "I don't know what I don't know", and I don't know web design.

But the chaps over at Primate do.  And I'm continually impressed with their contributions to expanding my knowledge of web design on their, for want of a better term, community site, 8 Gram Gorilla.

I've been following the gaming blog of one of the founders, Gordon, for some time, so when I saw that he'd started his own company (well, it might be a joint venture) and then put together 8 Gram Gorilla, I got very excited.  Gordon is quite an engaging blogger, and seeing that he also does web design (actual design, not just web programming code monkery*), I get a warm feeling like I'm witnessing brilliance.  If I was still working in the UK, I'd want to work for those guys.  Not sure that they'd take me with my lack of Ruby experience, but geez, it would be worth dropping tools for a few weeks, just to make a solid dent, and wrap my skull around those Ruby code blocks.

Any way, the gorilla has given me Compass/Sass this year, and now it's given me the grid system, from this article.  And not just one grid system, but two!  960.gs and 978.gs.  I didn't even know these were a thing!  The Holy Grail is nice and all, but I could have been using a grid system to position elements in a layout.

And now, having read a bit about these grid systems, and the tools that they provide for changes in CSS, particular when it comes to variable browser widths (like when you rotate your phone, and expect everything to make use of that extra width), the bubbles are beginning to form in my mind.  I've got some projects coming up, some changes to apply some of this grid system brilliance.

The question on my mind now is "What is best practice for using Compass/Sass and external CSS like 960.gs?".  Do you rename the CSS supplied by the grid system to .scss, and have it included in your Compass/Sass build?  Or do you keep the two separate, and define yourself a rule that your own CSS should never ever reference the classes supplied by the grid system.  Maybe this is a question for Stack Overflow.  But not tonight.  It's getting late, and my cockatiel has been waiting patiently on my shoulder while I read about web design and grid systems, and then blog it all.

* Monkery: Monkery is to monkey, as dickery is to dick, the type of dick that Wil Wheaton will block you from his Twitter and Google Plus for being.

1 comment:

  1. Thanks so much for the kind words and such high praise! Flattery will get you everywhere ;)

    To answer your question regarding mixing external CSS grids and Compass/Sass the way we do it is just to plonk the grid CSS in as a separate CSS file. Depending how you're set up, you shouldn't have an issue mixing and matching .scss and .css files. Maybe not the most elegant solution on the planet but it works fine. What would be great though is a pure Sass or Compass Grid :D

    ReplyDelete