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: 

#r @"FakeLib.dll"
#r @"FailessLib.dll"
#r @"Heather.dll"

open Fake
open Failess
open Heather

Target "Build" /> fun () -> 
    trace " --- Building CSS --- "
    pasteNewLine <- false
    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-|[
                color -- "#1d60ff"
                TextDecoration.none
                ]
            ]
        p -|[
            marginBottom -- px 10
            lineHeight -- em 1.6
            ]
        "/* HEADINGS\n----------------------------------------------------------*/"
        [h1; h2; h3; h4; h5; h6]=|[
            fontSize -- em 1.5
            color -- "#666666"
            FontVariant.smallCaps
            ]
        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 columns */"
        [   (^)"rightColumn"    <>> h1;
            (^)"rightColumn"    <>> h2;
            (^)"leftColumn"     <>> h1;
            (^)"leftColumn"     <>> h2]=|[
            marginTop -- px 0
            ]
        "/* PRIMARY LAYOUT ELEMENTS\n----------------------------------------------------------*/"
        (^)page-|[
            width -- px 960;
            backgroundColor -- "#fff"
            margin ----
                [ px 20; auto; px 0; auto ]
            Border.set "1px" Border.Solid "#496077"
            ]
        (^)header * [
            (@)[position -- Position.Relative
                margin -- px 0
                padding -- px 0
                background -- "#4b6c9e"
                width -- prc 100
                ];
            (+)h1-|[
                fontWeight -- 700
                ]
            ]
        (^)main-|[
            padding ---- pxx [0; 12]
            margin  ---- pxx [12; 8; 8; 8]
            minHeight -- px 420
            ]
        (^)"leftCol"-|[
            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 <-> div<^>menu ++ ul ++ li ++ a<%>visited -|[
                        backgroundColor -- "#465c71"
                        Border.set "px1" Border.Solid "#4e667d"
                        color -- "#dde4ec"
                        display -- Display.Block
                        lineHeight -- em 1.35
                        padding ---- pxx [4; 20]
                        textDecoration -- TextDecoration.None
                        whiteSpace -- WhiteSpace.NoWrap
                        ]
                    (+)li ++ a * [
                        (%)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 "-|[
                    width -- px 320
                    borderForInput
                    ]
                (^)"passwordEntry"-|[
                    width -- px 320
                    borderForInput
                    ]
                ]
        "/* MISC\n----------------------------------------------------------*/"
        (^)clear-|[clear -- Clear.Both]
        (^)title-|[
            display -- Display.Block
            Float.left
            ]
        (^)"loginDisplay" * [
            (@) [
                fontSize -- em 1.1
                Display.block
                TextAlign.right
                padding -- px 10
                Color.white
                ]
            (+)a * [
                (%)link     -|[ Color.white ]
                (%)visited  -|[ Color.white ]
                (%)"hover"  -|[ Color.white ]
                ]
            ]
        (^)"failureNotification" -|[
            fontSize -- em 1.2
            Color.red
            ]
        (^)"bold"-|[FontWeight.bold]
        (^)"submitButton"-|[
            TextAlign.right
            paddingRight -- px 10
            ]
        ]

"Build"; RunParameterTargetOrDefault "target" "Build"
val set : elements:seq<'T> -> Set<'T> (requires comparison)

Full name: Microsoft.FSharp.Core.ExtraTopLevelOperators.set
union case Option.None: Option<'T>
Next Version Raw view Test code New version

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.