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: 
206: 
207: 
208: 
209: 
210: 
211: 
212: 
213: 
214: 

open Failess

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

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

        // Values
        lineHeight      -- em 1.35
        padding         -/ px2 4 20

        // Custom
        Border.set (px 1) Border.Solid "#4e667d"
        ]
    CSS "..\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       -> px4 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 -| [
                border      -- Border.None
                cursor      -- Cursor.Default
                color       -- "#f9f9f9"
                fontWeight  -- 700
                margin      -- px 0
                lineHeight  -- em 2.0
                fontSize    -- em 2.0
                padding     -/ px4 0 0 0 10
                ]
            ]
        -.main-|[
            padding     -/ px2 0 12
            margin      -/ px4 12 8 8 8
            minHeight   -- px 420
            ]
        -."left"-|[
            padding     -/ px2 6 12
            margin      -/ px4 12 8 8 8
            width       -- px 200
            minHeight   -- px 200
            ]
        -.footer-|[
            TextAlign.center
            LineHeight.normal
      
            color       -- "#4e5766"

            padding     -/ px4 8 0 0 0
            margin      -/ [px 0; auto]
            ]
        "/* TAB MENU\n--------------------------------------------*/"
        div << [
            -."hideSkiplink"-|[
                backgroundColor -- "#3a4f63"
                width -- prc 100
                ]
            -."accountInfo" @ width -- prc 42
            -.menu << [
                +.[padding -/ px4 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 -/ px4 2 12 10 10
            -."login" -. "inline" @ display -- Display.Inline
            -."login" ++ label 
                >< -. "register" ++ label 
                >< -. "changePassword" ++ label 
                    @ Display.block
            ]
        "legend"-|[
            fontSize    -- em 1.1
            fontWeight  -- 600
            padding     -/ px4 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
                ]
            ]

        -."bold" @ FontWeight.bold

        -."failureNotification"  -|[    Color.red
                                        fontSize -- em 1.2
                                    ]
        -."submitButton"         -|[    TextAlign.right
                                        paddingRight -- px 10
                                    ]
        ]
val Site : style:'a -> 'b

Full name: Script.Site
val style : 'a
val menuStyle : obj list
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.