search

clj-commons / cljss

Clojure Style Sheets — CSS-in-JS for ClojureScript
https://roman01la.github.io/cljss/
Eclipse Public License 1.0
454 stars 27 forks source link

Proposal: design system utilities #40

Open roman01la opened 6 years ago

roman01la commented 6 years ago

See styled-system for reference.

I think this can be useful for someone who's building design system for their project. I've pushed transformers for spacing, font size and width utilities in 660693db4.

The idea

The idea is to hide details about spacing, font size, etc. behind special attributes.

For example this

{:width     0.1
 :font-size 2
 :mx        4}

Transforms into this (based on user-defined scale, such as :font-size [4 8 16 32 64])

{:margin-right "64px",
 :margin-left  "64px",
 :font-size    "16px",
 :width        "10%"}

Possible API

Those utilities should be reusable and used to extend defstyled components. Rum-style mixins might be a good solution (I'm biased since I'm Rum user).

(defstyled Button :button <
  mixins/space
  mixins/flex
  {:color "#fff"})

(Button
  {:px    2
   :py    1
   :align "center"})

What do you think? Any ideas? I'd really appreciate your feedback.

esseswann commented 6 years ago

It would be extremely handy to specify at least a basic unit like classic html { font-size: 8px } used for rem-based grid. I'm not sure about doing it with multiple contexts but for simple cases just swapping some imported atom (reset! cljss/default-unit "8px") wolud be nice.