EDNCSS; A small library for easy styling in React Native in combination with Clojurescript. Loosely based on Basscss, excluding functions not supported by RN. Would be super useful in combination with hiccup's .style classnames, will write a wrapper for this. Might also make this js compatible. Still incomplete!

styles.clj

(ns edncss)

(def colours {"transparent" "transparent"
              "black" "#222"
              "green" "#3DF2AC"
              "blue" "#147DEF"})

;; TODO more colours

(def base 5)

(def custom {:futura {:font-family "futura"}})


;; UTILS

(def directions {""  ""
                 "l" "-left"
                 "r" "-right"
                 "t" "-top"
                 "b" "-bottom"
                 "y" "-vertical"
                 "x" "-horizontal"})

(defn gen-variants
      ([name abbrev values]
        (apply merge (map #(hash-map (keyword (str abbrev (key %)))
                                     {name (val %)})
                          values)))

        ([name abbrev value dirs]
          (apply merge (map #(hash-map (keyword (str abbrev (key %) value))
                                       {(str name (val %)) value})
                          dirs))))

;; COLOURS & OPACITY

(def colours-map (apply merge [(gen-variants :background-color "bg-" colours)
                               (gen-variants :border-color "br-" colours)
                               (gen-variants :color "" colours)
                               (gen-variants :underline-color "ul-" colours)
                               {:transparent {:opacity 0}}
                               {:muted {:opacity 0.5}}]))



;; WHITESPACES

;; Paddings (e.g. px5 = padding-horizontal: 5px, steps of five)
(def paddings (apply merge (map
                             #(gen-variants :padding "p" % directions)
                             (range 0 (* base 7) base))))

;; Margins (e.g. ml10 = margin-left: 10px, steps of five)
(def margins (apply merge (map
                            #(gen-variants :padding "p" % directions)
                            (range 0 (* base 7) base))))



;; TYPOGRAPHY

(def typograpy {:bold         {:font-weight "bold"}
                :italic       {:font-style "italic"}
                :underline    {:text-decoration "underline"}
                :align-center {:text-align "center"}
                :align-right  {:text-align "right"}
                :align-left   {:text-align "left"}})

;TODO font-scale

;; BORDERS

; width
#_(def borders (apply merge [
                           (gen-variants "border-radius" "brradius"
                                         (range 0 (* base 6) base))
                           (gen-variants "border-style" "br" ["solid" "dotted" "dashed"]) ]))


;; LAYOUTING

(let [{:keys [width height]} (js->clj (.get (js/require "Dimensions") "window") :keywordize-keys true)]
     (def layout {:relative    {:position "relative"}
                  :absolute    {:position "absolute"}
                  :bottom-0    {:bottom 0}
                  :top-0       {:top 0}
                  :right-0     {:right 0}
                  :full-width  {:width width}
                  :full-height {:height height}
                  :half-width  {:width (/ width 2)}
                  :half-height {:height (/ height 2)}
                  :left-0      {:left 0}}))

;overflow enum('visible', 'hidden')


;; FLEXBOX

(def flex
  {; Parent
   :f-column   {:flex-direction "column"}
   :f-row      {:flex-direction "row"}
   :fit        {:flex 1}
   :f-wrap     {:flex-wrap "wrap"}
   :f-center   {:align-items "center"}
   :f-baseline {:align-items "baseline"}
   :f-stretch  {:align-items "stretch"}
   :f-justify  {:justify-content "space-between"}
   :f-start    {:align-items "flex-start"}
   :f-end      {:align-items "flex-end"}

   ; Child
   :f-first    {:order -1}
   :f-last     {:order 1024}
   :f1         {:flex 1}})

(def s (merge colours-map typograpy (comment borders) margins paddings layout flex custom))