• Stars
    star
    120
  • Rank 295,983 (Top 6 %)
  • Language
    Clojure
  • Created over 14 years ago
  • Updated over 12 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Generate CSS from clojure code with an embedded DSL

cssgen

A clojure library to generate CSS code using an embedded domain-specific language (EDSL). In plain words: generate CSS files
by writing clojure code.

You can go here to read more about cssgen.

Please take a look at the upcoming syntax in version 0.3.0, tell me what you think: 0.3.0-SNAPSHOT

Using clojure instead of plain CSS you get a lot of benefices. You can use the full power of the language to do things
like:

  • Define constants and use them in your rules

    (def width (px 960))

  • Operate with your constants using clojure expressions

    (def main-width (* width 0.62))

  • Define nested rules

    (rule "a.plain"
      :color :inherit
      :text-decoration :inherit
      :cursor :inherit
      (rule "&:active, &:focus"
        :outline :none)))

  • Define reusable CSS snippets using plain old clojure functions and vars

    (def has-layout
      (mixin
        ; This makes ie6 get layout
        :display "inline-block"
        ; and this puts it back to block
        (rule "&" :display :block)))

    (def clearfix
      (mixin
        :overflow :hidden
        has-layout))

  • Generate readable styles with better code organization

    (rule "#nav"
      (horizontal-list (px 9))
      (rule "a"
        (link-colors my-link-color my-visited-color my-hover-color)))

  • Easy CSS ‘hacks’

    (defn- float-side [side]
      (mixin :display :inline :float side))

    (defvar float-left (float-side :left)
      "Implementation of float:left with fix for double-margin bug")

    (defvar float-right (float-side :right)
      "Implementation of float:right with fix for double-margin bug")

    (rule "#secondary"
      float-right)

Installation

The easiest way to install cssgen is by using Leiningen. Just add the following dependency to your project.clj file:


    [cssgen "0.2.6"]

Usage

I’ll show some examples of use, but you should read the wiki for more details and information.

  • CSS rules: to create a simple rule you use the rule function, passing the selector as first argument, and a
    series of property pairs.

    (rule "ul.nav, ol"
      :color :black
      :background-color :#ddd
      :padding [:1px "2px" (px 3) 0])

  • Property values could be
    • keywords,
    • strings,
    • any other type convertible to string with as-str,
    • values sequences
    • special constructions like (px 9), (% 30), (col :#aaa) (more about this
      later).

If a property key must be associated with several values, you use a sequence of values, like in the padding
property above. Of course, if everything is “literal”, you could simply do :padding "1px 2px 3px 4px".

  • You can nest rules:

    (rule "#main, #secondary"
      :padding "10px"

      (rule "h1"   ; this will generate a rule for "#main h1, #secondary h1"
        :color :blue))

  • If you need the parent selector on the nested rule, you can use “&” and it will get replaced:

    (rule "a"
      :color "#00C"

      (rule "&:hover"  ; this will generate a rule for a:hover
        :color "#0CC"))

  • You can define mixins with multiple rules and properties using functions or vars. Those can later be used in other
    definitions

    (defn link-colors
      ([normal] (link-colors normal nil))
      ([normal hover]
        (mixin
          :color normal
          (if visited (rule "&:visited" :color visited))
          (if hover   (rule "&:hover" :color hover)))))

    (rule "a"
      (link-colors "#00c" "#0cc"))

  • As you can see in the previous example, nils in the properties list will be ignored:
  • You can easily define constants

    (def width (px 960))
    (def h1-font-size (em 1.5))
    (def h1-color (col :#0000ca))
    (def h2-color (col :#0dd))
    (def h3-color ($ :#0dd)) ;  $ is just an alias for col
    (def form-size (% 60))

  • And use the basic arithmetic operations on them

    (def main-width (* 0.7 width))
    (def h2-font-size (- h1-font-size (em 0.3)))
    (def h4-color (/ (+ h2-color h3-color) 2))

  • To generate a new CSS file from the current clj code do:

    (use 'cssgen.use)
    (css-ns killerapp.css.screen
      (:use (killerapp.css reset layout colors)))

    (css-file "public/css/screen.css"  ;this is the path to the target CSS file
      .......
      .......  ; all your rules
      .......)

Instead of css-ns you could use the normal (ns) call, but it gets a little tricky since we are redefining arithmetic
operations.

ToDo

  • More syntactic sugar
  • Helper functions to operate with colors and lengths
  • Helpers to define dimensions and colors
  • Methods to define rules without actually generating any CSS file
  • Watcher to re-generate css files if source changed ???
  • Property namespaces (font-*)
  • Write a sass “compiler” to migrate from sass to cssgen
  • Use that compiler to generate the whole compass tree in cssgen.
  • Document
  • Command line interface

Check the wiki for more usage information.

If you have a feature request, problem or comment, just drop me a line.

More Repositories

1

faker

Clojure library for fake data generation, port of ruby faker
Clojure
83
star
2

lein-reload

Leiningen plugin. Reload namespaces in modified files
Clojure
29
star
3

rrss

Ring Redis Session Store
Clojure
17
star
4

justlogit

Minimal clojure logging library
Clojure
15
star
5

haskell-brainfuck

Haskel brainfuck interpreter
Haskell
12
star
6

test-this

Powerful test runner for clojure
Clojure
10
star
7

resource-url

Clojure library for URL generation
Clojure
10
star
8

clji18n

Simple internationalization for Clojure
Clojure
7
star
9

enum_field

Enables Active Record attributes to point to enum like objects, by saving in your database only an integer ID
Ruby
6
star
10

hbf

An optimizing Brainfuck compiler and evaluator
Haskell
4
star
11

santander

Selenium driver script para la página del santander argentina
Ruby
4
star
12

scaladores-may-2018-talk

A talk I gave at the São Paulo Scala meetup
TeX
4
star
13

conceptual-mathematics-in-lean

Conceptual Mathematics exercises using Lean theorem prover
Lean
3
star
14

menuer

Rails plugin for tab menu creation
Ruby
2
star
15

tictactoe

Clojure Tic Tac Toe
Clojure
2
star
16

eliga

Un-agile Hipchat bot
Clojure
2
star
17

unk

A manipulable, pluggable, memoization framework for Clojure
Clojure
2
star
18

filter_attr

A rails plugin to help with model attributes mass assignment and parameter filtering in controllers.
Ruby
2
star
19

blogure

Blog generation library
Clojure
1
star
20

clj-deps

Scan files generating a graph of namespace dependencies
Clojure
1
star
21

gencssgen

Translate sass code to cssgen
1
star
22

nixosvm

Create a NixOs VirtualBox VM from the Nixos ISO
JavaScript
1
star
23

try-nomad

Test project to try HashCorp's Nomad and Consul
Nix
1
star
24

pearls-of-funct-alg-design

Reading the book Pearls of Functional Algorithm Design
Haskell
1
star
25

advent-of-code-2022

My solutions to Advent of Code '22
Haskell
1
star
26

vimconfig

My Vim Configuration files
Vim Script
1
star
27

deepconv

Generic conversion for values
Clojure
1
star
28

clojure-tic-tac-toe-presentation

Presentation about Clojure for FP newbies, using tic-tac-toe as an example
1
star