Structured design for optimal function.
CSS

In my quest to become a better RoR developer/Web Designer I have come across something that has made creating CSS for websites just that much easier. Sass is a meta language that actually allows you the developer to create cleaner CSS code.

Sass actually even adds some new functionalities to CSS. It allows you to nest tags and helps you create nice semantically meaningful code.

Also I allows you to set variables in your css files. So for instance you need to use a particular color more than once you an set a variable at the top of your sass file with that color value like so:

Although the old design had some cool features it didn't look very good in Internet Explorer. This new design allows me to show off some CSS 3 features and still look good in IE. Also this design looks decent in older versions of IE namely the aged Internet Explorer 6. The transparent pngs on the old design looked bad although the site was functional in that browser. Unfortunately it looks like even today IE6 still holds 23% of the market share, so IE6 support is still a must with any commercial web design.

I had a little project I was working on this week to fill in the portfolio section. and I thought it would be fun to turn it in to a Drupal theme. you can see the HTML and CSS in the portfolio section I named it Pink.

You can download a copy of it to use with your own Drupal blogs or projects as I am releasing it under the GPL license. I have included the psd files in the tarball in case anyone wants to change the graphics of the theme.

I finally got the site up and running and all the kinks worked out of the custom Drupal theme. It took a little longer than thought it would but Drupal despite the steep learning curve is very customizable. I was even able to get my cool stretched out carbon atom links at the top.

Syndicate content