Blaze Bootstrap 4 Components

[jkuester]

Hey since yesterday Bootstrap has finally released 4.2 and added awesome new features I also wanted to let you know, that I am currently working on a Blaze package that contains all Bootstrap 4 components out of the box. This was inspired by the already very famous react-bootstrap project, that achieves the same for React.

In fact, this is some sort of “half” announcement but rather a first DEMO (with a limited set of already implemented components) and I would like to hear from you

• what you think about this
• if you have any suggestions for improvement
• if you like to join me to make this a full featured package

So long story short, here is my first DEMO: https://jankapunkt.github.io/meteor-blaze-bs4/

[chansdad]

Looking good , I will definitely use it in one of my projects

[jkuester]

Thank you. It is not covering the full component set yet but it will progress with time, since I integrate the components into my own projects as well.

Feel free to open issues or ask a question here if anything is unclear, causing errors or is missing.

[chansdad]

I have an app built using blaze and used Ionic , I like blaze due to MVC . Our app is very simple , for the user but has heavy backend logic. It is still on meteor 1.2 and I am looking to upgrade to latest meteor and also see if we can revise to use the right frameworks . Back when we developed meteor Ionic css met our requirements . Wonder what are the ui frameworks that i can use present day for mobile apps when using meter and blaze . How is bootstrap 4 for a mobile app ? have about 10 pages inside the app with header and footer

[Volodymyr]

Looks great, thank you for proving that Blaze is alive.

[jkuester]

Some update: I solved a design problem which will be published in the next release 0.10.0:

consider a button template from this package:

{{> button label="click"}}

Now there are many times the use case to pass in arbitrary data- attributes and it would be very costly to implement a parameter for them all.

I came up with the idea to allow to pass in any data attribute as you want:

{{> button label="Click me" data-test="foo" data-bar="baz"}}

and filter these attributes in the incoming data.

Consider a template with an attribute helper named dataAtts:

<template name="button">
  <button {{dataAtts}} ... >...</button>
</template>

Now we want to pass in the data- atts from the example above. We read all atts with data- in the onCreated incoming data into a reactive variable:

Template.button.onCreated(function () {
  const instance = this
  instance.dataAtts = new ReactiveVar(null)
  const instanceData = instance.data
  Object.keys(instanceData).forEach(key => {
    if (key.indexOf('data-') > -1) {
      data[key] = instanceData[key]
    }
  })
  instance.dataAtts.set(data)
})

and create a helper:

Template.button.helpers({
  dataAtts() {
    return Template.instance().dataAtts.get()
  }
})

The result is like the following:

<button type="button" class="btn btn-secondary" data-test="foo" data-bar="baz">
    Click me        
</button>

This will be published for Buttons only in 0.10.0 but will be added for all components soon!

[thomastraum]

this looks really cool thanks!

[jkuester]

Another update on a recent version (0.10.1).

Today I introduced a solution to a generic item child component, that can be used either by dropdown or by lists etc.

Consider the following code:

{{#dropdown label="Dropdown button"}}
  {{> item href="#some" label="Action"}}
  {{> item href="#where" label="Another action"}}
  {{> item href="#else" label="Something else here"}}
{{/dropdown}}

Much easier to reason about than using complex html constructs, isn’t it? But how does the item know, if it should have the classname dropdown-item or list-group-item? I approached this with two options:

A - Explicitly declare the type using a parameter

This is the faster way (no parent tree traversal required) but also requires an additional type parameter:

{{> item type="dropdown" href="#some" label="Action"}}

B - Auto traverse the parent tree

Leaving out the type parameter leads to a traversal of the parentView and originalParentView properties of the Template’s view until a Template is found (which is then considered as outer parent).

This why

{{> item type="dropdown" href="#some" label="Action"}}

inside a {{#dropdown}} will find the Template.dropdown parent and the internal mapping of item will thus internally assign dropdown-item as classname to the element.

Focus more on the important stuff

Having abstracted away the meaning of the item we have also more space to focus on custom html content:

{{#dropdown label="Dropdown button"}}
  {{#item href="#some"}}<strong>Action</strong>{{/item}}
  {{#item href="#where"}}<u>Another action</u>{{/item}}
  {{#item href="#else"}}<i>Something else here</i>{{/item}}
{{/dropdown}}

I hope this pays out in the long run. Compatibility for various list-group modes is still in development but will be completed next.

If you are interested in this project please support and contribute by trying the DEMO, leaving an issue or open a PR.

[jkuester]

It’s been a month since the last update and I finally added cards which are one of the core components. I also made some updates in those components, that can be combined with the card layout, such as navs and list groups.

The version is 0.12.0 and the DEMO has also been updated.

Edit: after I realized, that the card Demo is missing the code panels, you can also read the code in the repository here until the DEMO is updated.

[jkuester]

It’s getting closer to a 1.0!

There are now list groups and collapses added and the documentation into the DEMO received many updates.

Many of the updates reduced the need for additional HTML a lot. List groups work fully with the generic (auto-resolving) {{>item}} template!

There are only ten components left:

1. Tooltip
2. Toast
3. Scrollspy
4. Popover
5. Pagination
6. Navs
7. Media Object
8. Input Group
9. Form
10. Carousel

It would be great to get some more feedback or support of some of the Blaze and Bootstrap people around here and I would love to see projects using this package in the near future

[thomastraum]

I am not using it yet but cant wait to try, just wanted to show support, I am watching this thread consistently.

[njbuch]

Looks promising, and something that we need! Thanks for starting up this work…

Do you have an ETA or more detailed plan for the rest of the work?

[adammoisa]

Commenting to follow and to show support for this project!

[jkuester]

@thomastraum @njbuch @adammoisa thanks a lot for your interest and support!

Do you have an ETA or more detailed plan for the rest of the work?

There is no specific day as ETA but I intend to publish 1.0 around the summer. The roadmap is currently the list of issues on GitHub, which mainly represent the components that are still to be done (see my last prior post for the list).

I use the components in a MVP already and they will be deep part of the project that builds on top of the MVP. Consider active development ongoing until 10/2020 as safe.

Edit: I jsut released 0.13.0 which now has tooltips implemented.

[evolross]

Following for support. Did you ever release a 1.0?

[jamgold]

No version 1.0 yet, AFAIK, but I submitted a PR for Bootstrap 4 Toasts and have been working on an implementation for form elements

[jkuester]

Hey @evolross there are components missing, which is why it’s still 0.x.y

@jamgold I try to merge the Toast by this weekend

[jkuester]

Hey guys, 0.16.0 has been published.

Toasts have been added!

@jamgold please check the documentation on the github pages, because I have slightly extended the toast, so you can debug globally as well as each created toast individually plus there are now event callbacks that you can pass to the add method.

See the recent DEMO: Meteor Blaze BS4

[jamgold]

Very nice about the events, because I just noticed the Template.events only works on the parent, so if you wanted to attach shown.bs.toast or hidden.bs.toast that would be the only place you could put it. You event method arguments solve this.