Finally getting around to learning front-end development with sass and I'm using bootstrap-sass-official (installed via bower) in an AngularJS project. Id like to try out AngularStrap in this project as well but it's dependency on bootstrap's CSS means I am loading both the standard CSS version as well as the SASS version of bootstrap. Can I use AngularStrap with bootstrap-sass without also requiring the standard CSS?
Bower will require the standard bootstrap.css with the installation of angularstrap. Once it is installed, remove the reference to it from your index.html file and you're all set. Thanks to Remco Haszing for the answer!
Related
I am new to bigcommerce stencil theme.
Any one have any idea about how to integrate bootstrap in stencil theme for local development. is it possible to integrate custom css and js to stencil theme ?
This is frankly pretty complex but the starting direction you should work with is to remove #bigcommerce/citadel and foundation-sites packages. Delete ./assets/scss directory if you are willing to rewrite rather than refactor existing scss. Refactoring would be necessary due to dependence on Citadel.
You'll need to install some dependencies to work with bootstrap in conjunction with webpack.
npm install bootstrap-loader bootstrap-sass url-loader imports-loader --save-dev
bootstrap-loader
bootstrap-sass
url-loader
imports-loader
For bootstrap to use jquery and to allow babel to polyfill stencil-utils and the asset directory, you will need to modify the webpack.config.js file.
You may also want configuration option which bootstrap-loader can provide and you'll need to ensure dependencies are properly imported to .js files.
You can get some partial details here: https://medium.com/#victorleungtw/how-to-use-webpack-with-react-and-bootstrap-b94d33765970#.85qo3a7dr
Go to storefront > Footer scripts and add your bootstrap script there. It will work fine.
I am using Bluehost hosting for a WP site using a Foundation 5 theme called JointsWP, and have been using compass to try and compile the .scss styles. It shows as compiling and initially made a few changes in relation to the body styles of the site, but once I started to modify the header styles, it seemed to no longer work. I have tried uninstalling and reinstalling the gems, downgrading to lower versions of both Sass and Compass, and I can't get it to work.
It sounds like you are attempting to compile Sass on a server - this won't be possible. When working with Sass you need to work locally and then push your updates to the server.
I am new to composer.
I am trying to add CSS booststrap tp my laravel 5.1 project
To download the framework This is the command that I used
composer require twbs/bootstrap
But I can't find the css files in my laravel project.
Is there another step that I will need to make the CSS booststrap part of my project?
Maybe this has changed since Laravel 5.0, but bootstrap is included by default in the default app.blade.php view.
That may help you, but if you want the css files to also be local, check in the /vendor directory or public/css one.
My understanding is that Bootstrap 3 is compiled using LESS. Meaning, if I want to customize Bootstrap's theming/look-and-feel, I would modify the variables in the various LESS files, and then compile my custom Bootstrap lib.
My understanding is that Grunt is a build system for JavaScript, that does things like minification, uglification, etc.; and that it has a pluggable architecture for defining custom behaviour.
My understanding is that Bower is a dependency management tool that can run standalone (from the shell) or as a Grunt plugin.
If anything I have said so far is not true or is mislead, please begin by correcting me!
Assuming I'm more or less correct with my understanding, then my question is:
How could I use LESS, Grunt and Bower together for creating a customized Bootstrap-based app? Would I use LESS for the custom Bootstrap, then use Bower to pull that custom Boostrap into my app as a dependency, and then use Grunt to compile/minify my app's JS/CSS resources? Or am I way off track and completely off-base here?
I think you are right.
Start by downloading Bootstrap's master.zip, also make sure you have installed Node.js and npm.
Than run:
npm install
grunt dist (which recompiles Boostrap, CSS and Javascript)
Now you can inspect Bootstrap's Gruntfile
and find out how to configure the Grunt task to build and extend Bootstrap.
Bootstrap does not use Bower for front-end package management (although you can install Bootstrap with bower too), but the Roots Wordpress theme does use Bower:
Roots uses Bower for managing Bootstrap, jQuery, Modernizr, and
Respond.js.
You can install any package with bower install --save <package-name>
Bower uses the .bowerrc file to install these packages.
I am working on a rails app and I would like to include some custom css files inside my rails application. I would like to separate out the css from bootstrap and the css that I wrote. Could I just put the custom css files inside vendor/assets/bower_components folder in my own css folder?
Is there anything else that I need to do for my css files to be picked up?
There are several ways you can achieve bower functionality in a Rails application.
Although having said that, I'm not sure about your wanting to use it on your custom.css file. The file itself will work just as well if you keep it in your app/assets/stylesheets folder, which will concatenate it to the asset pipeline
Bower-Rails
You'll may wish to consider using bower-rails, which seems to just give you the ability to use bower within your Rails app. This seems to be specifically for helping you keep your dependencies up to date:
Dependency file is bower.json in Rails root dir or Bowerfile if you
use DSL. Check out changelog for the latest changes and releases.
RailsAssets
Another amazing piece of functionality we found recently is "RailsAssets"
This works really well (we use it in production), as it keeps your dependent assets completely up to date. You can use it very simply:
#Gemfile
source https://rails-assets.org
gem 'rails-assets-BOWER_PACKAGE_NAME'
#app/assets/javascripts/application.js
//= require BOWER_PACKAGE_NAME
When running bundle update, this will then give you the ability to update your assets in line with your app!