Announcing SurfaceBootstrap library

Your Libraries & OS Mentoring Libraries
,
1

Without further ado: GitHub - surface-ui/surface_bootstrap

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 :slight_smile:

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!

19 Likes
2

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?

3

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.

4

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

5

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)
5 Likes
6

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.

1 Like
7

v0.2.3 (2021-06-22) released!

  • Upgrade to surface 0.5.0 (thank you @escobera (github username for PR)).
  • Add more fine grained sizing and color styling to Icon.
  • Add values prop to Button that passes on to :values directive.
  • Add opts prop to Button to pass on as attrs on <button>
1 Like
8

v0.2.4 (2021-06-23)

  • Yank 0.2.3 due to bug in Button aria properties
  • Fix said bug

v0.2.5 (2021-06-23)

  • Add Breadcrumb