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";
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 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 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 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