Lookbook is a set of utility styles built with use for React Native in mind. It allows you to easily compose styles for your components. You can see it as Basscss for React Native. All static styles will be pre-compiled during Clojurescript compilation for maximum performance.
Drop the dependency in your build.boot or project.clj:
[co.iamfy/lookbook "0.1.0-SNAPSHOT"]
Require in namespace:
(:require [lookbook.core :as lookbook :refer-macros [s styles]])
Use in view:
[view {:style (c :bg-red :full-height {:width 30})}]
;; c outputs {:background-color "#ff4136" :height 700 :width 30}
Lookbook is currently approx. 50% compatible with Basscss. We took the liberty to change somethings to be more useful with React Native.
Things which are different:
- raw pixel values for layouting instead of Basscss's 4 steps.
:p15ispadding: 15 - some of the naming around flexbox is different
- no
h1,h2, etc, but:t10till:t18in increments of 2 pixels.
Things which are still missing:
- borders
- typography
- buttons
- forms
We're planning to add some helpers to aid screen size dependent styling which is currently hard to do in React Native. See the open issue.
Currently Lookbook's slick syntax is only supported by Clojurescript, but it shouldn't be hard to make a small api to make it work (without pre-compilation unfortunately) for Javascript as well. Not planning to do this unless there's enough interest.
Fy uses a slightly modified (different colours) version of this library in production and actively maintains it. Pull requests and contributions are more than welcome!