Announcing SurfaceBootstrap library

olivermt

Without further ado: GitHub - surface-ui/surface_bootstrap · GitHub

Some TODOs:

Get it up under https://bootstrap.surface-ui.org and get it linked from main surface docs
Some utility classes for rows and grids, just need to think a bit more on how to make it oppinionated enough to be useful in saving time but also allowing the insane amounts of permutations you need to do to full flexbox stuff
Tooltips and popovers coming soon ™

I hope this library will seriously lower the bar for people to start using Surface and be able to pump out pages using the Comic Sans of the internet

Thanks a dozen to all my sparring partners on the Slack in getting this out: @msaraiva @paulstatezny @Malian and many more.

Open issues for any bugs or feature requests!

7 comments

#library #liveview #surface

19 1783 7

2021-06-23 10:55:21 UTC

Showing Posts 1 to 7

Show Best Posts
Show All (oldest first)
Show All (newest first)

the_wildgoose

This looks fantastic! Huge fan of Surface! (If anyone hasn’t tried it, then give it a whirl!)

One thought: I had a colleague struggle with integrating a modal popup and I took a glance. It seems like at least the modal can be emulated fairly simply without the bootstrap JS? It appears to just hide/show the modal div + cover the whole page with an inserted overlay. I wonder if there is another route to integration here without the hooks? Just a thought?

Post #1

olivermt

Hey!
Thanks for the feedback.

I spent almost two full days trying to make it work well without the hook approach, but the Bootstrap CSS just isnt built in a way that it works nice.

For example to get the proper coloring on the backdrop (the darker shade thing) you need to add a class to the body etc. What you could do is just follow the tutorial on how to make a Modal that is included in Liveview itself and then combine that with a Card or similar to get something more or less visually the same.

I do have a long term plan to release a bootstrap-looking “NativeModal” component, but I want to get breadcrumbs, my navbar redesign and the accordions / collapsibles in place first.

Post #2

olivermt

Also @the_wildgoose it would be tremendously helpful if your colleague could make an issue at GitHub - surface-ui/surface_bootstrap · GitHub with what he felt was hard / not good about it so I can track feedback

Post #3

olivermt

Small maintenance release 0.1.1.

Upgraded to bootstrap 5.0.0-beta3. PR #4 - Thanks @joerichsen
Fix module name nesting in docs PR #3 - Thanks @mbuhot
Relax Ecto version PR #2 - Thanks @dustinfarris

Coming up in next few days is:

Total NavBar rework (old api too oppinionated to make sidebars etc and I misunderstood how collapsible should work)
Accordions and Collapsibles in general
Toast notifications (that survive live redirects)

Post #4

olivermt

v0.2.0 released!

Migrate to Surface 0.4.1 (atoms not auto-cast anymore), has to be 0.4.1 or above because 0.4.0 swamps with compiler warnings due to a change in LiveView
[BREAKING CHANGE] Completely rework NavBar, look at examples to see how to use NavBar. It has been moved to only implement the outer and main components as I was unable to find a proper middleway for all the permutations. This is a BREAKING CHANGE because the old NavBar was naively done and could not support sidebars, and it also did not implement the collapser properly.
Added a naive tooltip implementation, injects a with random ID, so it might provoke rerenders.
Exposed a hook you can simply use with :hook={{ "Hook", from: SurfaceBootstrap.Tooltip }}. This requires you to put a unique HTML ID on your component, as this is a requirements for hooks to fire.