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.
Related
New user to 3rd party bootstrap templates for Ember and need help.
I purchased the INSPINIA admin template from www.wrapbootstrap.com. The download comes with multiple pre-created projects with INSPINIA built in (e.g., Angular, Rails, etc.) but not for Ember. I reached out to the creator to see if they could include a project for Ember and they said no.
So, I am curious, does anyone know how to add INSPINIA to an Ember web application? Is it as simple as ember install bootstrap and then copy the *.css file? Note: the INSPINIA template comes with way more files than just a *.css, and I am using ASP.NET CORE 2.2 for the web API.
Any help is appreciated.
When I did the same thing a few years ago, I bought the theme just for the themed css. I used their less and integrated that into my existing ember build. Nowadays I'd use the scss but it's unimportant.
What is important is understanding that bootstrap js components will not simply work in the context of your ember application. If you want callbacks, events, binding, etc to exist in the context of ember (ie within ember's runloop and lifecycle), you will need to wrap each individual component. Luckily, ember-boostrap does exactly that for you. This addon provides the easiest way for you to pull in your bootstrap scss. This addon also does not use bootstrap's js, but rather is a full implementation of the bootstrap component's in a way that is ember-aware.
ember-bootstrap deliberately excludes bootstrap.js
because the jQuery and Ember ways of control flow and animation
sometimes don't play well together, causing unpredictable results.
This is the main motivation behind ember-bootstrap. It is possible to
import bootstrap.js from bower_components or the vendor folder. This
is NOT recommended or supported, and you will be on your own. You have
been warned!
Once you've gotten the scss preprocessing properly set up in your ember-cli-build.js file, you should be able to use their markup more or less directly. You will need to have some understanding, though, of when you're encountering bootstrap markup (stuff with data classes that will be handled by bootstrap's js). In moments like that, you simply use ember-bootstrap components instead
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.
I'm new to Cakephp and I have been developing a website for my client. I'm not satisfied with the look of the website and I've been trying to figure out how to use Bootstrap with Cakephp. I have been introduced to Sass and it seems like this is a great way to write css. So I want to use Bootstrap-sass. But after seraching a lot I still cannot find a good tutorial on how to approach this matter. Most of the tutorials are for Ruby on Rails with Bootstrap even the official Bootstrap-sass Github page https://github.com/twbs/bootstrap-sass
I would be gratful if someone could guide me through this or if this is not the way to go, which Bootstrap should I use If I want to have the sass functionality as well.
Also there is another doubt that I have:
Is it possible to overwrite Bootstrap css without using LESS or SASS?
That is more than one question.
SASS and CakePHP, easy. First of all, understand there are 2 SASS dialects. Original SASS tries to use the minimum of characters and is indent-sensitieve like Python. SASS 3 brought SCSS, which is more like CSS on steroids and easier to use. Then - outside of Ruby - you need a SASS compiler. SCOUT for SASS - Windows and Mac - is dead simple and does the job. You indicate your source SCSS folder, sits in webroot in my CakePHP, a target folder, the CakePHP CSS folder and a temp folder sitting in CakePHP/tmp for me. That is all it takes, save a SCSS file and Scout watches this and generates the CSS.
Bootstrap. Not easy to integrate in CakePHP templates. Additionally it uses some questionable JavaScript. Take a look at Compass, the same thing integrated in Scout.
If you want Bootstrap for a responsive grid, use SimpleGrid instead. As the name says simple and CSS only. Drupal is based on it.
Remember SCSS is a CSS superset; copy your CSS to your SCSS folder and start adding to it.
Good luck, André Hartman, Belgium.
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