7 people like it.

CSS EDSL in F#

F# to CSS compiler (CSS EDSL in F#) <+> inspired by Clay and FAKE - https://github.com/Cynede/Failess

  1: 
  2: 
  3: 
  4: 
  5: 
  6: 
  7: 
  8: 
  9: 
 10: 
 11: 
 12: 
 13: 
 14: 
 15: 
 16: 
 17: 
 18: 
 19: 
 20: 
 21: 
 22: 
 23: 
 24: 
 25: 
 26: 
 27: 
 28: 
 29: 
 30: 
 31: 
 32: 
 33: 
 34: 
 35: 
 36: 
 37: 
 38: 
 39: 
 40: 
 41: 
 42: 
 43: 
 44: 
 45: 
 46: 
 47: 
 48: 
 49: 
 50: 
 51: 
 52: 
 53: 
 54: 
 55: 
 56: 
 57: 
 58: 
 59: 
 60: 
 61: 
 62: 
 63: 
 64: 
 65: 
 66: 
 67: 
 68: 
 69: 
 70: 
 71: 
 72: 
 73: 
 74: 
 75: 
 76: 
 77: 
 78: 
 79: 
 80: 
 81: 
 82: 
 83: 
 84: 
 85: 
 86: 
 87: 
 88: 
 89: 
 90: 
 91: 
 92: 
 93: 
 94: 
 95: 
 96: 
 97: 
 98: 
 99: 
100: 
101: 
102: 
103: 
104: 
105: 
106: 
107: 
108: 
109: 
110: 
111: 
112: 
113: 
114: 
115: 
116: 
117: 
118: 
119: 
120: 
121: 
122: 
123: 
124: 
125: 
126: 
127: 
128: 
129: 
130: 
131: 
132: 
133: 
134: 
135: 
136: 
137: 
138: 
139: 
140: 
141: 
142: 
143: 
144: 
145: 
146: 
147: 
148: 
149: 
150: 
151: 
152: 
153: 
154: 
155: 
156: 
157: 
158: 
159: 
160: 
161: 
162: 
163: 
164: 
165: 
166: 
167: 
168: 
169: 
170: 
171: 
172: 
173: 
174: 
175: 
176: 
177: 
178: 
179: 
180: 
181: 
182: 
183: 
184: 
185: 
186: 
187: 
188: 
189: 
190: 
191: 
192: 
193: 
194: 
195: 
196: 
197: 
198: 
199: 
200: 
201: 
202: 
203: 
204: 
205: 

    pasteNewLine <- false
    let menuStyle = [ 
        // Modules
        Display.block
        TextDecoration.none
        WhiteSpace.nowrap

        // Strings
        backgroundColor -- "#465c71"
        color           -- "#dde4ec"

        // Values
        lineHeight      -- em 1.35
        padding         --- pxx [4; 20]

        // Custom
        Border.set (px 1) Border.Solid "#4e667d"
        ]
    CSS "D:\....\Styles\Site.css" [
        "/* DEFAULTS\n--------------------------------------------*/"
        body-|[
            background  -- "#b6b7bc"
            fontSize    -- em 0.80
            fontFamily ---- 
                ["Helvetica Neue"; "Lucida Grande"; 
                "Segoe UI"; "Arial"; "Helvetica"; "Verdana"; "sans-serif";] 
            ]
        a <+[
            %visited >< %link @ color -- "#034af3"
            %hover -| [ TextDecoration.none
                        color -- "#1d60ff"
                        ]
            ]
        p -|[
            marginBottom    -- px 10
            lineHeight      -- em 1.6
            ]
        "/* HEADINGS\n--------------------------------------------*/"
        [h1; h2; h3; h4; h5; h6]=|[ 
            FontVariant.smallCaps
            fontSize    -- em 1.5
            color       -- "#666666"
            ]
        h1-|[
            fontSize        -- em 1.6
            paddingBottom   -- px 0
            marginBottom    -- px 0
            ]
        h2-|[
            fontSize    -- em 1.5
            fontWeight  -- 600
            ]
        h3 @ fontSize -- em 1.2
        h4 @ fontSize -- em 1.1
        [h5; h6]=|[ fontSize -- em 1.0 ]
        "/* this rule styles <h1> and <h2> tags that are the \n first child of the left and right table %umns */"
        [   & "rightcolumn"  .> h1;
            & "rightcolumn"  .> h2;
            & "leftcolumn"   .> h1;
            & "leftcolumn"   .> h2]=|[
            marginTop -- px 0
            ]
        "/* PRIMARY LAYOUT ELEMENTS\n--------------------------------------------*/"
        &page-|[
            width -- 
                match style with
                | styles.Full       -> prc 100
                | _                 -> px 960
            backgroundColor -- "#fff"
            margin ---
                match style with
                | styles.Full       -> pxx [0; 0; 0; 0]
                | _                 -> [ px 20; auto; px 0; auto ]
            Border.set "1px" Border.Solid "#496077"
            ]
        &header <+ [
            -  [Position.relative
                margin      -- px 0
                padding     -- px 0
                width       -- prc 100
                background  -- "#4b6c9e"
                ]
            +h1 -| [
                color       -- "#f9f9f9"
                fontWeight  -- 700
                margin      -- px 0
                border      -- Border.None
                cursor      -- Cursor.Default
                lineHeight  -- em 2.0
                fontSize    -- em 2.0
                padding     --- pxx [0; 0; 0; 10]
                ]
            ]
        &main-|[
            padding     --- pxx [0; 12]
            margin      --- pxx [12; 8; 8; 8]
            minHeight   -- px 420
            ]
        &"left%"-|[
            padding     --- pxx [ 6; 12]
            margin      --- pxx [12; 8; 8; 8]
            width       -- px 200
            minHeight   -- px 200
            ]
        &footer-|[
            color       -- "#4e5766"

            padding     --- pxx [8; 0; 0; 0]
            margin      --- [px 0; auto]

            textAlign   -- TextAlign.Center
            lineHeight  -- LineHeight.Normal
            ]
        "/* TAB MENU\n--------------------------------------------*/"
        div <+ [
            &"hideSkiplink"-|[
                backgroundColor -- "#3a4f63"
                width -- prc 100
                ]
            &"accountInfo" @ width -- prc 42
            &menu <+ [
                - [padding --- pxx [4; 0; 4; 8]]
                +ul <+ [
                    - [
                        listStyle   -- ListStyle.None
                        margin      -- px 0
                        padding     -- px 0
                        width       -- auto
                        ]
                    +li ++ a <+ [
                        - menuStyle
                        %visited -| menuStyle
                        %hover-|[
                            backgroundColor -- "#bfcbd6"
                            color           -- "#465c71"
                            textDecoration  -- TextDecoration.None
                            ]
                        %active-|[
                            backgroundColor -- "#465c71"
                            color           -- "#cfdbe6"
                            textDecoration  -- TextDecoration.None
                            ]
                        ]
                    ]
                ]
            ]
        "/* FORM ELEMENTS\n--------------------------------------------*/"
        "fieldset" <+ [
            - [ margin --- [em 1.0; px 0]
                padding -- em 1.0
                Border.set <| px 1 <| Border.Solid <| "#ccc"
                ]
            +p @ margin --- pxx [2; 12; 10; 10]
            &"login" & "inline" @ display -- Display.Inline
            &"login" ++ label 
                >< & "register"         ++ label 
                >< & "changePassword"   ++ label
                @ display -- Display.Block
            ]
        "legend"-|[
            fontSize    -- em 1.1
            fontWeight  -- 600
            padding     --- pxx [2; 4; 8; 4]
            ]
        Border.set "1px" Border.Solid "#ccc" 
        |> fun borderForInput ->
            input <+ [
                &"textEntry "-|[
                    borderForInput
                    width -- px 320
                    ]
                &"passwordEntry"-|[
                    borderForInput
                    width -- px 320
                    ]
                ]
        "/* MISC\n--------------------------------------------*/"
        &clear @ Clear.both
        &title-|[
            Display.block
            Float.left
            ]
        &"loginDisplay" <+ [
            - [ fontSize    -- em 1.1
                padding     -- px 10
                Display.block
                TextAlign.right
                Color.white
                ]
            +a <+ [
                % link     @ Color.white
                % visited  @ Color.white
                % hover    @ Color.white
                ]
            ]
        &"failureNotification" -|[
            Color.red
            fontSize -- em 1.2
            ]
        &"bold" @ FontWeight.bold
        &"submitButton"-|[
            TextAlign.right
            paddingRight -- px 10
            ]
        ]
val menuStyle : obj list

Full name: Script.menuStyle
val set : elements:seq<'T> -> Set<'T> (requires comparison)

Full name: Microsoft.FSharp.Core.ExtraTopLevelOperators.set
union case Option.None: Option<'T>

More information

Link:http://fssnip.net/h0
Posted:11 years ago
Author:Heather
Tags: f# , css , dsl

This web site is created using F# and Suave web server. It is hosted on Azure and the source code is on GitHub. Contributions are welcome!

The first version of fssnip.net has been created by @tomaspetricek back in 2010. This web site is a new, open-source and contribution-friendly version.