Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I customize bootstrap in a meteor application?

Meteor is great, and supports bootstrap using a 'smart package' that can be included like this:

meteor add bootstrap

and then the css, javascript, and images are magically included at runtime in the browser. That's great, but I'd like to customize bootstrap to not look like every other bootstrap site on the net. Ordinarily I'd use the bootstrap customize functionality, but that's not available here. What's the best way for me to apply customizations to bootstrap in a meteor context?

It would be particularly ideal if I could generate a LESS file from the Bootstrap customizer, plop it into my directory, and have done with it. It turns out that Bootswatch generated CSS messes up fluid layouts, and besides, any third party is going to be out of date sooner rather than later.

like image 581
javajosh Avatar asked Nov 15 '12 20:11

javajosh


2 Answers

Well, it seems that the solution is just as simple as it coule be. I was able to override the defaults by simply including a css file in the root of my meteor app. I happened to use a canned css file from Bootswatch, but I presume one could roll this up by hand as well.

like image 67
javajosh Avatar answered Oct 26 '22 16:10

javajosh


I ended up removing the meteor bootstrap package altogether and install it as a git submodule within packages.

I made my own custom packaged git repo meteor-bootstrap to which I also added a package.js file with instructions on which files I want to use. (See the branch meteor-packaged).

I did this to be able to change Bootstrap variables and use the LESS mixins freely, and not to include every single Bootstrap JS-file.

like image 33
Jonatan Littke Avatar answered Oct 26 '22 16:10

Jonatan Littke