For PureScript users with minimal web development experience (or minimal desire to spend much time tinkering with CSS) what are some recommended component libraries?
Something like bootstrap would be ideal. It can be partially used in PS, but there are lots of gaps for components with JS dependencies (like dropdowns). Is there any interest in a port of either of these Elm libraries to PS?:
Here’s what I found so far in the ecosystem:
- Halogen
-
Ocelot - looks like this was recently updated to halogen5. Uses Tailwind CSS, and you can just start with CitizenNet’s customizations.
- Options where you customize rendering, and bring your own CSS:
- For making typeahead, dropdowns, etc.:
-
Formless - for making forms
- React-basic
- CSS only
-
Bulma PS bindings:
-
sectore - Older, but more complete. Class strings created via composition. Has tests.
-
Unisay - No re-wrapping required for Halogen (uses their
ClassName). Class strings hardcoded. Missing some features (dropdown), no tests.
This summary of CSS options by @thomashoneyman is really great. If we ever create an FAQ page, this content should be on there.
Looks like Formless and Select are on the cusp of being updated for Halogen Hooks. Wondering if there’s a good opportunity to use those with a bootstrap port.
4 Likes
A material components port would be really cool!
I think porting them to halogen would mostly mean calling some ffi code in the Initializer and Finalizer actions (and making all the attributes typesafe and stuff), so when I’ll have more time I might give that a try
I wouldn’t actually recommend Lumi Components for general purpose use, especially for beginners. When the project started there were no published component libraries so we open sourced it mostly to show how we were approaching certain problems, but it’s never been a high priority to make it a great general purpose library. Components are sometimes very specific to our needs and we haven’t spent a lot of time cleaning out old components using approaches we no longer recommend. I hope someday this story is a bit different, but it isn’t very beginner friendly at the moment.
4 Likes
Added a link to Bulma in the top post. I found it a lot easier to work with than Bootstrap because it expects you to handle all behaviors, rather than supplying you with an accompanying .js file.
Here’s a dropdown example with Halogen Hooks.
It may be nice to setup a storybook showing how to add behaviors to all components. This could be a combined showcase for Halogen Select too.
I’d say the same thing about Ocelot (which did exist as a component library pre-Lumi Components, but for Halogen instead of React Basic). It’s not really meant to be imported and used, but rather to demonstrate how we were solving particular problems in our UI using Halogen. It’s also got some old code in there I’m not sure I (or the folks at CitizenNet) would recommend.
1 Like