John Korpi's Golden Grid System, rewritten in Garden. This is just a first draft, and excludes the CSS reset and normalizations. Garden: https://github.com/noprompt/garden/

ggs.clj

(ns com.metablu.www.ggs
  "Joni Korpi's Golden Grid System.
   http://goldengridsystem.com/"
  (:require [garden.def :refer [defstyles]]
            [garden.stylesheet :refer [at-media]]
            [garden.units :refer [em percent percent*]]))

(def line 24.0)
(def column (percent (/ 100.0 18.0)))
(def font-size 16.0)
(def one-em 16.0)

(defstyles simple-fluid-media
  [:figure {:position "relative"}
   [:img :object :embed :video {:max-width (percent 100) :display "block"}]]
  [:img {:border 0 :-ms-interpolation-mode "bicubic"}])

(def small
  {:font-size (em (/ (* font-size 0.8125) one-em))
   :line-height (em (/ (* line 0.75) (* font-size 0.8125)))})

(def normal
  {:font-size (em (/ font-size one-em))
   :line-height (em (/ line one-em))})

(def large
  {:font-size (em (/ 26 one-em))
   :line-height (em (/ (* line 1.5) 26))})

(def huge
  {:font-size (em (/ 42 one-em))
   :line-height (em (/ (* line 2) 42))})

(def massive
  {:font-size (em (/ 68 one-em))
   :line-height (em (/ (* line 3) 68))})

(def gigantic
  {:font-size (em (/ 110 one-em))
   :line-height (em (/ (* line 5) 110))})

(defstyles zoomable-baseline-grid
  [:body normal]
  [:h3 normal]
  [:h2 :h1 large])

;;
;; Four-column grid active
;; ----------------------------------------
;; Margin   | #  1   2   3   4   |   Margin
;; 5.55555% | %  25  50  75  100 | 5.55555%
;;

(defstyles four-column-grid-active
  [:header :#twoway {:margin [0 column]}]
  [:h1 :h2 {:margin [(em (/ 24 26)) 0 (em (/ 36 26))]}]
  [:h2 {:font-weight "normal"}]
  [:h3 {:margin [(em (/ 24 one-em)) 0 (em (/ 24 one-em))]}]
  ;; Simple elastic gutters
  ;; Note: box-sizing will not work in IE6-7
  [:.wrapper {:padding [0 (em (/ line 2 16))]
              :-webkit-box-sizing "border-box"
              :-moz-box-sizing "border-box"
              :-ms-box-sizing "border-box"
              :box-sizing "border-box"}])

;;
;; Fixes for IE6-8
;; http://jonikorpi.com/leaving-old-IE-behind/
;;

(defstyles ie-fixes
  [:.ie
   [:body {:width (em (/ 640 one-em))
           :margin [0 "auto"]
           :font-size (em (/ (inc font-size) one-em))}]
   [:h1 huge {:margin [(em (/ 48 42)) 0 (em (/ 24 42))]}]]
  (at-media {:screen true :min-width (em 40)}
    [:body {:font-size (em (/ (inc font-size) one-em))}]
    [:h1 huge {:margin [(em (/ 48 42)) 0 (em (/ 24 42))]}]))


;;
;; Eight-column grid active
;; ----------------------------------------------------------------------
;; Margin   | #  1     2     3     4     5     6     7     8   |   Margin
;; 5.55555% | %  12.5  25.0  37.5  50.0  62.5  75.0  87.5  100 | 5.55555%
;;

(defstyles eight-column-grid
  (at-media {:screen true :min-width (em 45)}
    [:body {:font-size (em (/ font-size one-em))}]
    [:#twoway [:.wrapper {:float "left" :width (percent 50)}]])
  (at-media {:screen true :min-width (em 55.5)}
    [:body {:font-size (em (/ (inc font-size) one-em))}])
  (at-media {:screen true :min-width (em 61.5)}
    [:body {:font-size (em (/ font-size one-em))}]
    [:header :#twoway {:margin [0 (percent* column 3)]}])
  (at-media {:screen true :min-width (em 75)}
    [:body {:font-size (em (/ (inc font-size) one-em))}])
  (at-media {:screen true :min-width (em 87)}
    [:body {:font-size (em (/ font-size one-em))}]
    [:header :#twoway {:margin [0 (percent* column 5)]}])
  (at-media {:screen true :min-width (em 105)}
    [:body {:font-size (em (/ (inc font-size) one-em))}]))

;;
;; Sixteen-column grid active
;; ----------------------------------------------------------------------------------------------------------------------
;; Margin   | #  1     2     3     4     5     6     7     8     9     10    11    12    13    14    15    16  |   Margin
;; 5.55555% | %  6.25  12.5  18.75 25.0  31.25 37.5  43.75 50.0  56.25 62.5  68.75 75.0  81.25 87.5  93.75 100 | 5.55555%
;;

(defstyles sixteen-column-grid
  (at-media {:screen true :min-width (em 117)}
    [:header :#twoway {:margin [0 (percent* column 1)]}]
    [:header [:.wrapper {:width (percent 37.5) :margin-left (percent 25)}]]
    [:#twoway [:.wrapper {:width (percent 25)}]]
    [:#twoway [:.wrapper:first-child {:margin-left (percent 25)}]])
  (at-media {:screen true :min-width (em 130)}
    [:body {:font-size (em (/ (+ font-size 2) one-em))
            :max-width (em (/ 2560 one-em))}]))

(defstyles ggs
  simple-fluid-media
  zoomable-baseline-grid
  four-column-grid-active
  ie-fixes
  eight-column-grid
  sixteen-column-grid)

(comment
  (spit "resources/stylesheets/ggs.css" (garden.core/css ggs))
  )