How to use a CSS Framework with Yesod?

Question

I want to use the Blueprint CSS Framework with Yesod. Are there any best practices?

Because Yesod uses templates for CSS, it looks to me that I cannot use the .css-files directly? Do I have to rename them to .lucius-files?

How do I add the CSS to the defaultLayout?

Answer 1

One approach would be to rename them to .lucius files, which should work perfectly. (If it doesn't, it's a bug in Lucius and you should report it.) But you could also store the CSS in the static folder and reference it with an addStylesheet call; this is the approach I took with the Yesod Wiki, for instance.

Answer 2

The yesod wiki has an article about this. The solution is basically to put a copy of blueprint in your statics folder, then you can in a type safe way reference to blueprint like this (in your templates/default-layout-wrapper.hamlet, before ^{pageHead pc}):

<link rel=stylesheet media=screen href=@{StaticR blueprint_screen_css}>
<link rel=stylesheet media=print href=@{StaticR blueprint_print_css}>