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?

score 6 · Accepted Answer · answered Jul 03 '11 at 10:21

6

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.

answered Jul 03 '11 at 10:21

Michael Snoyman

31,100
3
48
77

In case of a CSS framework, it looks like best practice is placing them in the static folder. – davidbe Jul 03 '11 at 11:44

Tarrasch · Answer 2 · 2014-04-04T17:39:55.140

4

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}>

edited Apr 04 '14 at 17:39

answered Feb 03 '12 at 18:03

Tarrasch

10,199
6
41
57

Link to article seems to be broken. – interstar Apr 02 '14 at 04:30

How to use a CSS Framework with Yesod?

2 Answers2

Linked