Skip to content

Happstack: CSS Generation

Philip Kukulak edited this page Feb 20, 2015 · 1 revision

Generating CSS with Clay

The file CssGen.hs is responsible for generating style sheets. Previously, it contained functions that created CSS for every page we've got so far. Since it seems to be sticking around, the sensible thing to do is maintain it properly.

The idea is to have separate modules for each response.

CssGen.hs

CssGen.hs should only contain the top-most level of style sheet generation. For example, at this moment we can see the following block of code in this file:

{-# LANGUAGE OverloadedStrings #-}
module CssGen where

import Clay
import Prelude hiding ((**))
import Data.Monoid
import Data.Text.Lazy
import System.Directory
import Constants
import CommonCss
import GraphCss
import TimetableCss
import AboutCss

All constants are defined in Constants.hs and the style sheets corresponding to each page are generated in their respective files:

styleFiles :: [(String, Css)]
styleFiles = [
    ("../style/common/common.css", common),
    ("../style/graph/graph_styles.css", graphStyles),
    ("../style/grid/timetable_styles.css", timetableStyles),
    ("../style/common/about.css", aboutStyles)
    ]

Constants.hs

Constants should be defined in Constants.hs. If you wish to add any constants, there are some categories that should remain grouped together. Otherwise, please ensure that constants have their types clearly indicated and are commented with a brief description of their purpose.

*Css.hs

For pages that require their own CSS, their style generating files should be named PageCss.hs, where Page is the name of the page. It should be named consistently and concisely. Please ensure that their module declarations follow this general template:

{-# LANGUAGE OverloadedStrings #-}

module PageCss.hs where

import Clay
import Prelude hiding ((**))
import Data.Monoid
import Constants

...

Please leave comments describing each function in the file.

Corresponding changes should also be made to CssGen.hs. Specifically, the module should be imported and an entry should be added to the dictionary styleFiles.