Skip to content

Instantly share code, notes, and snippets.

@scottjad
Created August 11, 2010 08:25
Show Gist options
  • Save scottjad/518689 to your computer and use it in GitHub Desktop.
Save scottjad/518689 to your computer and use it in GitHub Desktop.
;;; Example of slices
(slice site-settings [bgcolor] ; slices can take arguments
:var {default-background-color bgcolor}) ; variable for anyone that uses this slice
(slice site-settings-public ; slices don't need an arg list if they don't take args
:use (site-settings "blue")) ; what other slices this slice uses
(slice site-settings-app
:use (site-settings "red"))
(slice awesome-effects
:js (fn awesomeEffect1 [div] ; javascript code (translated with scriptjure)
(.show ($ div))))
(slice header [header-id]
:html [:div {:id header-id} "Company Name"] ; html with hiccup
:use site-settings ; automatically converted to (site-settings)
:css (rule header-id :background-color default-background-color)) ; (translated with cssgen)
(slice footer [footer-id info]
:html [:div {:id footer-id} "Copyright " info])
(slice footer-default [info]
:var {footer-id "#footer"}
:use (footer footer-id info))
(slice footer-public
:use (footer-default "2010"))
(slice footer-app
:use [awesome-effects ; all fields can take multiple
; elements, you just have to wrap them
; in vector
(footer-default "sucks")]
:dom (awesomeEffect1 footer-id)) ; js code you want to run when dom is
; ready. using clojure variable in
; js. footer-id from :var in
; footer-default.
(slice welcome-header [header-id]
:css (rule header-id ; using clojure variables in css
:display :none)
:use awesome-effects
:dom (awesomeEffect1 header-id)
:html [:p "Welcome"])
(slice rounded-corners
:clj (mixin :-moz-border-radius :5px ; css mixins part of cssgen
:-webkit-border-radius :5px))
(slice big-text
:clj (mixin :font-size "200%"))
(slice special-button
:use [rounded-corners big-text]
:clj (mixin rounded-corners
big-text))
(slice app-link
:var {id "#applink"}
:use [awesome-effects special-button] ; using css mixins and js is the
; same. (same for html, dom js, clj,
; css, clj)
:dom (.mouseOver ($ id) (awesomeEffect1 id))
:css (rule id
(mixin special-button))
:html [:div {:id id}
(link-to "/app" "App")])
(slice welcome-page
:title "Welcome" ; how you declare the title and other header info
:use [site-settings-public
(welcome-header "#header")
footer-public])
(slice app
:html "cool app",,,)
(slice app-page
:title "App"
:use [site-settings-app
app
footer-app])
(defroutes foo
(GET "/" (welcome-page))
(GET "/app" (app-page)))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment