Web Essentials markdown preview default style for Visual Studio

The other day I wanted to write a markdown file that's part of my Visual Studio 2013 project. As majority of you have done I've also installed Web Essentials addon for Visual Studio 2013. Beside the several syntaxes it supports one of them is also markdown. The problem I was facing was that its preview window had a really basic browser style. I wanted to change that.

CSS3 cross browser SASS... no, SCSS mixins

I like automation that eliminates human factor of forgetting of doing something. Happens to me just like it most likely happens to you. Especially when we do repetitive things. That's why I've written a few posts that are direct result of me striving for automation. May it be the post about NUnit test project settings in Visual Studio that starts NUnit test runner by simply pressing F5 button or the additional file editor that automatically executes batch (*.bat) files from within Visual Studio. Never mind. This one's related to simplicity, versatility and automation. And CSS3 stylesheets of course.

Actually it's about the extended CSS syntax that we get by writing SCSS stylesheets (similar to LESS, but more on it later on). SCSS used to be called SASS with its own syntax but now uses CSS syntax hence changed its name. I will be using SCSS acronym from now on because that's what my following code example uses. If you've ever used any of these two you'll know the benefits of simplified, easier to handle and more powerful style sheets. I have been flirting with this couple for some time now, but on this last project of mine, my flirting became a serious relationship. I started using SCSS. What I will share with you here are a few common mixins that are usable to any web developer.

Cross browser headers with vertical rotated text

You've probably come across the problem of displaying these kind of tables:

• many columns
• header column at the top
• content cells display narrow data - flags (yes/no, true/false, y/n, on/off, finite states like yes/no/maybe etc.) or just icons that denote some sort of state as in feature list tables where each cell displays either a check-mark or nothing or green and empty cirles or similar...
• header cells contain much wider data than content cells - more words that take much valuable horizontal space

If you had to display these kind of tables you've probably been thinking how could you make header cells narrower but not clip their content so headers still make sense... The idea is to display header cells as tall cells with vertically displayed text so columns can stay narrow as their content cells need. This way our tables get horizontally usable and don't take much space. It's true that header row becomes higher (depending on the amount fo text that you'd like to display, but hey there's just one header row in the whole table.

Anyway. So if you did struggle with this and also wanted it to display approximately the same on all three major nowadays browsers than you did spend some time solving it. If you didn't but you think you may in the future, then just use the code I'll provide here and off you go.