Using the YAML CSS Framework in ASP.NET

I've written the same CSS code at least a million times-- center the body, float the navigation, fix IE6--but I'm never going to do it again. Why? Because recently I've stumbled upon CSS Frameworks. Amazing stuff!

What is a CSS Framework?

Its kind of like a set of web page building blocks. Remember playing with Lincoln Logs as a child? They were great. However, imagine if instead of all that pre-cut goodness you had to fashion your own pieces. You'd be missing fingers! (Who gave that kid a knife?) Or bare minimum, trading play time for work time! Strangely enough, developers do just so. Essentially they are ignoring the vast amount of browser-specific tweaking that web design necessitates. Aren't there other areas of your project you'd rather be working on (like the ones that actually demand originality)?

The YAML CSS Framework

The folks over at YAML.de have run their product through the browser-specifc gauntlet. Emerging unscathed is a solid, well-thought, and well-documented package that you can quasi-drop into your web application. I need to reiterate the "well-documented." In fact, if I was teaching a class on web design I would use the framework's free pdf as it's textbook. Don't know what a float is? Or why they're not working in IE6? Any CSS novice should check it out. Unfortunately I did just write quasi-drop...

The Downside of the YAML CSS Framework

It's not all roses. In fact, its rather intimidating to jump into. The first time I downloaded it I felt as though the css files had been arranged by Stephanie Toppin(art featured). After consulting the documentation I was finally able to see the method through the madness. To elaborate on said madness:

1. The framework relies heavily on CSS imports-- an Ajaxian no-no.
2. The ultra-cool form styles rely on setting the <form> tag's class. (You know, that thing in ASP.NET that usually surrounds the entire page.) That is also a no-go.
3. The folder structure makes me want to pull my hair out. I'm serious.

Making it Work in ASP.NET

To start out, lets put all the files in one place. Not only does this remove our CSS import issues, but also will decrease our HTTP requests and therefore improve our page's performance. So, that means:

1. Taking YAML's base.css, content.css, form.css, and print.css and putting all their contents into one file. Done and done. Situation=averted. You will still need to reference the IE-specific fixes page separately, however.
   
2. In order to rectify our form tag issues, all we need todo is change all the code that says form.yform to just .yform. Easy! Now us .NET-ers can wrap our wannabe forms in a div.yform and reap the rewards of all of YAML's pre-styled goodness.

I tend to keep all of my custom css classes in a section at the bottom of my concatenated YAML document.

Get Back to Work

... on things that deserve your attention!