I want to remove Bootstrap entirely from my meteor app because I use Thoughtbot's Neat and Bourbon as a responsive css framework. So I made sure I have no Bootstrap packages installed, but when I start the application and check the CSS, I see Bootstrap styles in the CSS file.
So I assume Bootstrap is enabled and loaded by default by Meteor?
Is it possible to remove it?
If you've removed all the bootstrap packages, meaning you can't see any when you do this
meteor list --using
That means you don't have any external bootstrap files included in your project. You can have them however from other sources like your own CSS files or anything you have put in yourself.
Meteor doesn't include bootstrap in projects by default.
Related
Is it possible to specify the css rules for only the angular-bootstrap modules that I'm using in my application? For example I'm only using the dropdown, datepicker and tooltip modules from angular bootstrap. However the entire bootstrap css file is required for these three modules. I'm not using bootstraps css in the rest of my application so I think importing the entire css file is overkill.
Webpack has a built in treeshaking function, which will be the easiest option if your project is already done or way ahead in development.
I have also found this treeshaking that manually compiles Bootstrap and uses Gulp to do the treeshaking in the mean time. I found it to be way harder and possibly outputing the same result, but make yourself comfortable.
I am using a Bower package with Bootstrap and a theme in an ember app. The theme is called admin lte, and it looks like the it's loading adminlte.css and then bootstrap.css.
The problem is that Bootstrap is supposed to be first, according to the examples of the theme. How do I affect the CSS loading order?
You should be able to app.import them, and the ordering will be preserved.
See the see Ember CLI guides section on style for information on this.
I have a web application that uses Bootstrap 3. I'm using webpack, so I npm installeded bootstrap, and I'm referencing it like so:
import 'bootstrap/dist/css/bootstrap.css';
This works well. But now I want to use a different bootstrap theme (Slate), that only changes the css file.
I can think of two options of doing this.
Replace bootstrap.css inside the node_modules directory. Since node_modules is not a part of our source repo, we will need to do this repeatedly. This is clearly not a good option.
Don't use npm for bootstrap at all - put all the bootstrap files in a folder and reference that instead. This will work, but we won't get updates if a new version of Bootstrap is released.
Is there a way to reference bootstrap.css from one place, and all the other bootstrap files from another place? Can webpack do that?
I am trying to use angular, yeoman, and sass at the same time, also I only wanted some css components in twitter bootstrap, so I tried scaffolding my app like this
yo angular --coffee
And answered yes for the following questions,
would you like to install twitter bootstrap & would you like to use compass sass blah2x.
I answered yes,
Now the application is ready to go, but I have few concerns.
it loads all twitter bootstrap components, I actually wanted only the normalize.scss
How do I selectively use an scss component, because it builds all files, making my codebase super big because of unnecessary imports.
Thank you.
It sounds like you may need yeoman install yeoman-normalize.scss and then inside your main.scss file add a import line to correctly add normalize.scss
So:
#import "../components/yeoman-normalize.scss/yeoman-normalize";
I want to set up bootstrap like that Twitter Bootstrap Customization Best Practices
I want though the responsive version. I found this thread Twitter Bootstrap responsive css is not generated form the less files
but it's not clear to me how can I set up bootstrap files so I can customized it using the responsive version ?
If you are wondering how to use less to customise the bootstrap css and then use this in your project, then there are basic approaches.
You can combine your customisation into the base bootstrap css files and import this into your project, or you can leave the bootstrap files untouched, create a second css file for your customisation and import this into your project as well, after the bootstrap css.
Overwrite vs override.
From the first link you give, you can see that both approaches have their supporters.
I've usually used the first method, and this is what I've done.
Download a copy of the less files, here is one source, and add to your project files
Open the bootstrap.less file. You'll see that it orchestrates everything and imports the individual less files
Create theme-variables.less and theme-css.less files and save to this less folder
You need to import these files in the right sequence. Adding the variables file at the end of the Core variables and mixins block with #import "theme-variables.less"; and the theme file at the end of the Base CSS block with #import "theme-css.less"; works for me. Depending on what you are customising, you may need to play with this a bit
That's basically it. Edit your custom files, compile bootstrap.less, and import the resulting bootstrap css file(s) into your project.
Naturally at the start you want to keep good backups incase something goes wrong, and likewise when you upgrade Bootstrap.
Good luck!
First download form https://github.com/twbs/bootstrap less version
How to use Less and less compilers
http://lesscss.org/
http://winless.org/
Bootstrap tutorial
http://www.w3resource.com/twitter-bootstrap/tutorial.php