Branch | Status | Artifact |
---|---|---|
master |
A ClojureScript library of UI components for Reagent.
Re-com provides:
In short, re-com attempts to provide the kind of UI basics you'd need to build a desktop-class SPA app.
The entire layout side of this library plus a few of the widgets rely on Flexbox
Pretty much every modern browser that you probably care about has support for Flexbox so this is probably a non-issue these days, unless you need to support old versions of IE.
We build desktop-class apps to run in controlled browser environments like Electron. So, we know we're dealing with Chrome.
We can also confirm that none of the components have been designed with mobile in mind, and that there's no attempt to handle media queries. We said we had a desktop app focus, right?
Neither have we been worried too much about code size because other design goals have
taken precedence. To give you some idea, our main demo app which includes every component, plus all demo
code and plenty of yadda yadda explanatory strings, comes to about 167K compressed when
using :optimizations :advanced
(700K uncompressed).
That number includes ReactJS plus the ClojureScript libs and runtime. So, everything.
Start by looking at the demo.
When you are running the demo app, you'll see hyperlinks, to the right of page titles, which take you to the associated source code. That's a convenient way to navigate to either the components themselves or the demo code.
When browsing more generally, look in the src
directory or this repo, you'll notice
two sub-directories:
Getting The Repo
git clone https://github.com/day8/re-com.git
cd re-com
Compiling And Running The Demo
lein watch
This will run the demo, by doing:
Wait until [:demo] Build completed.
is displayed in the console indicating
the dev HTTP server is ready.
Now you can open http://localhost:3449/
in your
browser.
Run The (erm, modest) Tests
lein ci
This will:
Run or Debug the tests:
lein watch
Deploy The Demo App To S3 bucket
This will only work if you have the right credentials in your env:
lein deploy-aws
re-com is available from clojars. Add it to your project.clj dependencies:
You should now be able to require the re-com.core
namespace, which exposes all of the API functions documented in the re-demo
example app.
You'll then need to include these asset folders in your app: https://github.com/day8/re-com/tree/master/run/resources/public/assets
As far as your index.html
is concerned, take inspiration from here:
https://github.com/day8/re-com/tree/master/run/resources/public
In particular, you'll need bootstrap (assumedly via a CDN):
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
And a reference to these two CSS files (make sure re-com.css
appears after bootstrap.css
):
<link rel="stylesheet" href="assets/css/material-design-iconic-font.min.css">
<link rel="stylesheet" href="assets/css/re-com.css">
And a reference to the Roboto fonts (but this can be overridden relatively easily):
<link href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300' rel='stylesheet' type='text/css'>
Reagent comes bundled with a matching version of ReactJS, so you don't need to include it explicitly.
If you decide to use re-com, consider also using re-frame (an MVC-ish framework).
Although both re-frame
and re-com
can be used independently of each other, they dovetail well.
See re-frame-template.
When creating new components, we have found it useful to use the CSS from existing JavaScript projects (assuming their licence is compatible with MIT) and then replace the JavaScript with ClojureScript. Reagent really is very nice.
Also, please refer to CONTRIBUTING.md for further details on creating issues and pull requests.
Copyright © 2015-2019 Michael Thompson
Distributed under The MIT License (MIT) - See LICENSE.txt
Can you improve this documentation? These fine people already did:
mike-thompson-day8, Gregg8, Isaac Johnston, Daniel Compton, Mike Thompson, Gregg Ramsey, ken restivo, paintparty, blak3mill3r & Colin YatesEdit on GitHub
cljdoc is a website building & hosting documentation for Clojure/Script libraries
× close