search

kzima / vuestrap-base-components

Web components that extend Bootstrap 4 - http://kzima.github.io/vuestrap-base-components/#/accordion
MIT License
253 stars 42 forks source link

Component css overrides and nav item link #18

Open ghost opened 8 years ago

ghost commented 8 years ago

Seems that a lot of the css added through this package actually breaks bootstrap. I find myself constantly needing to reset them (nav being the worst offender). I really find no benefit to any of the css included through the package (have not tried all components yet though), only makes it harder to work with. Only action I would say is removing the need for the css added in with nav, or scope it.

A real issue is that the link attribute (in navItem) does not really work with vue-router it can work if you just do a plain path, but if your using route names you cannot pass an object. This is a simple fix if it allows string and objects in the prop, or even have 2 separate props, may do a pull request for this but wanted to bring it up first (since its simple but has a few ways to resolve).

Those are the main issues but here is some general feedback.

So far I am really liking this, but there is quite a large barrier to entry. You cannot really load the components by source, since webpack needs to use es6 and to do that you need to allow babel to scan the node-modules folder. This led my compiled file to go from a few hundred kb to well over 1mb (so can't use source for large projects, but I think that's more npm's fault). This also makes it pointless to use the theme loader, since it does not need to compile the components.

One solution to this might be to allow browserify support, tried to use this with browserify but had to give up since it could not even see the package to import. Also a really technical exclude on the babel loader might work, but i suck at regex so could not quite get it to work as I wanted (still bloated the file). Though even saying that, I could never get the application to even load if if I included any of the components by source, the above is just notes on the debugging I managed to do before I gave up and used the compiled version.

Also naming is a bit inconsistent, when compiled it is normal (navbar, nav, navItem) and when from the root source (vuestrap-base-components/src/components) it is vsNavbar, vsNav, vsNavItem. Yet when straight to the component (vuestrap-base-components/src/components/navbar) it is back to normal. The documentation does not really bring this up, so really confusing. Suggestion on that front is code examples for each component in the docs, how to include it from the compiled version, by the root source and the individual component.

Of course some of the above could be due to me just not understanding certain aspects.

kzima commented 8 years ago

@jovination Thank you for a great feedback. I will definitely take everything to account in the new version of the components.