css.org

Setup

deps.edn:

garden {:mvn/version "1.3.9"}

src/xxx/views/css.cljs:

(ns xxx.views.css
  (:require [garden.core :refer [css]]))

(def website-css
  [[:body {:font-size "25px"
           :color "blue"}]])

(defn generate-and-inject-style-tag
  "Injects a style tag with the id 'injected-css' into the page's head tag
   Returns generated style tag"
  []
  (let [page-head (.-head js/document)
        style-tag (.createElement js/document "style")]    
    (.setAttribute style-tag "id" "injected-css")
    (.appendChild page-head style-tag)))

(defn update-page-css
  "Updates #injected-css with provided argument (should be some CSS string 
   -- e.g. output from garden's css fn) If page does not have #injected-css then
   will create it via call to generate-and-inject-style-tag"
  [input-css]
  (let [style-tag-selector "#injected-css"
        style-tag-query (.querySelector js/document style-tag-selector)
        style-tag (if (nil? style-tag-query)
                    (generate-and-inject-style-tag)
                    style-tag-query)]
    (aset style-tag "innerHTML" input-css)))

; Usage 
; (Assumes you've required garden in your namespace)
; (Optionally throw this in your boot-reload / figwheel reload CB)
(update-page-css (css website-css))

References

https://grid.malven.co/

basics

(def website-css
  [[:body {:font-size "25px"
           :color "blue"}]])
(css [:body {:font-size "16px"}])

Grid Layout

two columns

A	B

hiccup:

[:div {:class "wrapper"}
   [:div "A"]
   [:div "B"]]

garden:

[:.wrapper {:display "grid"
            :grid-template-columns "1fr 1fr"
            :grid-gap "10px"}]

example: 2 rows, 2 columns

A	B
C	D

hiccup:

[:div {:class "wrapper"}
   [:div "A"]
   [:div "B"]
   [:div "C"]
   [:div "D"]]

garden:

[:.wrapper {:display "grid"
               :grid-template-columns "1fr 1fr"
               :grid-template-rows "1fr 1fr"
               :grid-gap "10px"}]

row1 - one col, row2 - two cols

a
b	c

This grid has two rows first. The second row is split in half, so technically we define the table like so:

but instruct the first element to span 2 columns by specifying it’s column-start/end lines.

[[:.container {:display "grid"
               :grid-template-rows "1fr 1fr"
               :grid-template-columns "1fr 1fr"}]
 [:.banner {:grid-column-start 1
            :grid-column-end 3}]]

hiccup

[:div {:class "container"}
   [:div {:class "banner"} "A"]
   [:div "B"]
   [:div "C"]]

grid columns

How columns are numbered. Start with one (1), and number where the columns meet.

abc	def	ghi

^ ^ ^ ^ 1 2 3 4

To have a column span all three columns, like so:

abc

^ ^ ^ ^ 1 2 3 4

Lets say the div has a class called title, you would specify:

[:.title
 {:grid-column-start "1" 
  :grid-column-end "4"}]

or a shorthand:

[:.title
 {:grid-column "1 / 4"}]

Animation