There is so much that happens throughout a project. When the final bits hit the screen at light-speed, it’s hard to remember how you got there. Sure you might have a trail of sketches, PSD(s), emails, versioned files, or some other pile of nonsense to take you back down memory lane, but I wanted a little more for this project. I’ll probably forget most of this anyway, but this time I’m going to try to write some of this. I should make it clear that I’m writing for my own benefit and practice. None of my opinions or cursing represent any opinions or policy of the fine folks at Nicholls State University.

Nicholls State University will have a new website by Fall 2012. I’ve been slowly working on the pieces for at least a year. Ideas for features, nice little CSS pieces, and even a rough plain site template to start from. Nothing fancy, but all good starting points.

It needs work and is now reaching that point where I want to build  in the next features and make the design more shinny. I have no doubt I can hack away at with my text editor, but I’m intrigued by Compass, Less, Sass, and other CSS preprocessors. Reminds of the old days before good server side CMS applications when large websites were fully rendered and deployed. Looking forward while looking back is always good, just don’t trip.

Being a Ruby / Compass / Sass newbie is fun. The CSS complexities of web design are becoming more complicated than the HTML these days, so anything to speed up the design process with clean consistant (and controllable) CSS is very welcome. I’m happy to profess my ignorance about things when people ask because I really enjoy learning. If I’m learning something that will really save time and help me do my job, then I’m happy to show my noob-ness. If I keep this up you will either see my happiness with the my new found tools or my utter disgust and dispair. Stay tuned.

Compass, Susy, Normalize installs with Ruby’s Gem (too lazy to link). Oh this is all terminal stuff and requires sudo on MacOS/OSX.:

// First is this thing on? Updated?
# sudo gem update --system
// Install Compass the framework
# sudo gem install compass
// Install Susy the Hand-crafted grid framework
# sudo gem install compass-susy-plugin
// Install Normalize to create a base cross-browser starting point
# sudo gem install compass-normalize

I’ve started to shift away from the old CSS reset methods since it can make things more complicated. For this project I’m using normalize.css to create a consistant base of default element properties. I’m hoping it will mean less code since reseting everything and then styling everything can create redundant and unnecessary rules for some basic HTML elements. Although Compass can help here by using it’s own built-in reset modules, I still want reduce any re-styling.

My config.rb file for Compass now has:

require 'susy'
require 'compass-normalize'
# CSS Normalize

I’m just using the screen.css file for my first testing and I’ve added the import for all of Normalize as:

@import "normalize";

I chose Susy because it has a column and gutter approach to grids that would allow me to create the type of grid I want. I haven’t seen a PX grid framework that I liked and I’ve never been keen on using pixels for measurement anyway. Susy would allow me to do EM or percentage grids so I can devise some really weird grid ideas. My first test is a sort of golden ratio layout with the gutter as the “1” core starting object of measurement and the columns being roughly 4 to 6 core elements wide. The original gutter width is .8em so the column for the first test is 5.472. Not to shabby as the standard web page width ends up at around 989px. My little sketch explains the math better. I don’t know if this will be my final grid yet.

Once I have all this into the Compass config.rb file then the _base.scss and screen.scss files I do the Compas rendering with:

compass compile da-test

Remember “da-test” is the project directory. I’m writing about my journey here, so if you want more you should look up Compass, Sass, Susy, and the other stuff that I’ve been researching for a few weeks. I won’t come to you by osmosis.

My next steps will continue the testing for Compass and Susy. I’ll start researching best practices for responsive designs and I’ll start to merge my personal CSS libraries into the Compass project and convert my wacky CSS to Sass. Next time I might have a screenshot or two.