Announcing SurfaceBootstrap library

Without further ado: GitHub - surface-ui/surface_bootstrap

Some TODOs:

  • Get it up under 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!


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?

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.

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: