I spent a few days trying out UI libraries, and ended up just going with good old Bootstrap classes. I’m still a noob dev, but it works and is really easy. Very few components end up needing custom css, at least on the projects I work on.
Here’s a TitleBar component w/ collapsible nav (sry I use React, className=class):
export default TitleBar = ({ children, title }) =>
<nav className="TitleBar">
<TitleLinks title={title} />
<h1 className="TitleBar__title">{title}</h1>
<div className="TitleBar__collapse" id="navbarSupportedContent">
{children}
</div>
</nav>
And the css:
.TitleBar {
@extend .navbar, .navbar-light, .navbar-expand-lg,
.bg-secondary, .text-dark, .shadow;
display: flex;
justify-content: space-between;
}
.TitleBar__title {
@extend .serif, .mx-3;
font-display: swap;
}
.TitleBar__collapse {
@extend .collapse, .navbar-collapse;
display: flex;
flex-wrap: wrap;
flex-basis: 100;
justify-content: space-around;
}
@media (max-width: 600px) {
.TitleBar {
flex-direction: column;
}
}
Not a lot of code, and keeps the markup pretty clean. I use scss @extend
to use bootstrap classnames. Getting it setup is a matter of this:
meteor add fourseven:scss # scss is cool!
meteor npm install bootstrap # downloads bootstrap src to node_modules
# in client/main.scss:
@import '{}/node_modules/bootstrap/scss/bootstrap'
It will complain that jquery and popper.js are peer deps, and you need them if you want interactive features of Bootstrap:
meteor npm jquery popper.js
# in client/main.js:
import 'bootstrap/dist/js/bootstrap.bundle.min';
I’m not thrilled about including jquery and popper, but bootstrap is great. I haven’t noticed any performance or build issues… but I’m pretty clueless . Hopefully someone more experienced than me can share their UI strategy.
Bootstrap has good docs and probably isn’t going to drop off the map any time soon. If you need mature and long lasting though, Meteor is probably your biggest concern. Docs or forum posts or packages from 2 yrs ago are basically irrelevant. I see 2017 and don’t even bother clicking.
Just a noobs 2c, maybe I’m just not good enough to adapt the old solutions. Good luck!