I found this nice Image gallery addon for Bootstrap but I am not sure how to integrate it on my rails project.
https://github.com/blueimp/Bootstrap-Image-Gallery
I figured I could use Rails (3.1) vendor's folder.
So that's what I did. I cloned those files in the vendor/assets folder:
git clone https://github.com/blueimp/Bootstrap-Image-Gallery.git
Ok now it's there, how do I use it?
How do I load these resources in my application?
my current application.js:
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require bootstrap
//= require dzscalendar.js
//= require dzstooltip.js
//= require bootstrap-datepicker
//= require gmaps4rails/gmaps4rails.base
//= require gmaps4rails/gmaps4rails.googlemaps
my current application.css:
/*
*= require_self
*= require_tree .
*= require bootstrap-datepicker
*/
#import "bootswatch/cerulean/variables";
#import "bootstrap";
#import "bootswatch/cerulean/bootswatch";
#import "dzscalendar.css.scss";
#import "dzstooltip.css.scss";
#import "gmaps4rails";
#import 'font-awesome';
I tried diverse things, but it looks like I don't understand what I am doing just now.
Hope I can find some guidance here. Cheers
Ok, time to take advantage of the asset pipeline here, there may be a better way of doing this but for now i would just copy the css, images and js into your existing project (keep them seperate for now like in the example)
Then in your view you are free to add your html (like in the example)
See https://github.com/kristianmandrup/bootstrap-addons-rails, it's a ready-to-use gem that you include in your Gemfile, so you can require Image Gallery using asset pipeline.
Related
I want to use bootstrap (v.5) navbar for a Gatsby project. In principle, it is possible to load components that only belong to the navbar. However, I can't find any information about which components belong to the navbar.
So far these I have these imports but not yet working unfortunately:
global.scss
#import "../../node_modules/bootstrap/scss/functions";
#import "../../node_modules/bootstrap/scss/variables";
#import "../../node_modules/bootstrap/scss/mixins";
#import "../../node_modules/bootstrap/scss/_nav";
#import "../../node_modules/bootstrap/scss/_navbar";
Has anyone done this before? Do you know which components need to be imported to make it work?
Thanks for any help!
I importing it to gatsby-browser.js. Shouldn't it be here?
Yes, that's one option. As well as importing it in the Layout component as the Standard Styling with Global CSS Files suggests.
The problem I guess is the path you're using. From the gatsby-browser.js there's no ../.. path hence the route and the asset is broken.
Try playing around with the path but I bet you can do directly something like:
#import "bootstrap/scss/functions";
#import "bootstrap/scss/variables";
#import "bootstrap/scss/mixins";
#import "bootstrap/scss/_nav";
#import "bootstrap/scss/_navbar";
Note that ./ should also work in the same way so try playing around with the relativity of the paths.
I have been using #import to pull in external stylesheets (animate.css, for instance) into my main, .scss stylesheets for quite some time.
I now discovered that #import is being deprecated and has been replaced with #use. However, I am unable to find a proper example of the syntax #use is expecting when importing external files.
With #import, I would have something like this:
#import url('../assets/css/animate.css');
The above would go grab the animate.css file in my /assets/css/ directory, and embed it into my main .scss stylesheet.
From the documentation here, https://sass-lang.com/documentation/at-rules/use, I see that #use is expecting modules to be loaded via their namespace, and to create a namespace from an external resource, I should use:
#use '<url>' as <namespace>;
So I tried the following:
#use '../assets/css/animate.css' as animation;
However, that actually causes an error when compiling, and even if it did not, what am I supposed to do with 'animation' once it is a namespace?
Should I just go back to including separate, individual stylesheets in the <head>, or has someone out there figured out how to make #use work in the way I was using #import before?
Like many developers I am using SASS as a preprocessor. I want to edit my stylesheets in Chrome. I've setup Source Maps to do this, and I know Chrome now supports SASS.
I have a SASS file, style.scss, used to create style.css used on the page. It's mainly just imports of other SASS files. Eg:
#import "colors";
Clicking an imported SASS file, like _colors.scss, it shows a green 'active' icon and shows it is linked to a source map.
However when I edit a SASS variable - like the $dark-blue in the screenshot below, where I've made it a red instead - the file doesn't change, nor does the page update.
How do I edit an imported SASS file in Chrome DevTools?
Edit: note the 'Linked to' on the imported file doesn't seem correct. The only way _colors.scss is used is part of style.scss which is turned into style.css. I suspect this is the cause of the problem. I've opened https://github.com/gulp-sourcemaps/gulp-sourcemaps/issues/349 to see if this is the case.
I'm using Koala for Win64 to compile sass (with lot of partials) to css with no problems, but Koala auto compile function is only runs when there are updates in root scss file, so I need to open Koala and press 'compile' button every time when I made changes to included partials.
Is there any way to configure scss auto compile to watch for changes in sass partials?
So came across this as I was having problems myself. Just documenting...
1st thing I did
was to create a style.scss or global.scss (making sure to setup "Auto Compile" in Koala) and only fill it with imports:
#import 'layout'; //_layout.scss
#import 'layout_modules'; // _layout_modules.scss
#import 'modules'; // _modules.scss
#import 'theme'; // _theme.scss
When I would work on the partials (partials will have a _ in front of the filename) and save I would get an autocompile confirmation (Koala Settings > General > "Notification when compile is completed")
But _layout_modules.scss would not trigger autocompile on save. If I switched over to another partial and saved, it would autocompile and Koala would still throw helpful errors for _layout_modules.scss.
2nd thing I did
then, was to remove the extra underscore in the filename - so it would just be _layoutmodules.scss (make sure to update your #import on style.scss) and worked as expected.
(I've been using Sass for all of 5 days.)
Short answer:
add _ before partial files and import them to the main file.
Thanks to #philtune
I'm using SASS to load stylesheets in a Rails 3.1(sass-rails 3.1) app. For example, sass partials in app/assets/stylesheets are loaded using #import in application.sass -
#import "pages/common"
#import "pages/**/*"
#import "jquery-ui.css"
Now, I also want to load vendor/assets/stylesheets. Note that I'm not using require vendor, as #import pages/* seems to be the sass recommended way of doing it. Files here will be css, and not sass or scss. I cannot use #import ../../../vendor/assets/stylesheets/* as it works only for sass and scss files.
Is there any way of doing this ?
Update
What I have now is this.
application.css.scss
//= require_tree .
//= require vendor
//= require_self
This includes all the sass partials mentioned above. The require vendor in
vendor/assets/stylesheets/vendor.css looks like
//= require_tree .
A caveat of this approach is that sass mixins(user defined & plugins) and common variables are not available in all partials. What I have now is a _common_imports.sass which I #import first thing in all partials.
common_imports.sass
#import "colors"
#import "compass/css3/gradient"
#import "compass/css3/border-radius"
#import "compass/css3/box-shadow"
Importing common_imports in all partials feels very repetitive.
If I'm understanding you correctly, I think this might help.
Add the following to config/application.rb, inside the class Application < Rails::Application block:
config.sass.load_paths << File.expand_path('../../lib/assets/stylesheets/')
config.sass.load_paths << File.expand_path('../../vendor/assets/stylesheets/')
I've just added the above to an app, and the following directives are now both working:
Import Sass:#import 'grid' in app/assets/stylesheets/application.css.scss finds the file vendor/assets/stylesheets/_grid.scss;
Import regular CSS:#import 'background', again in application.css.scss, finds vendor/assets/stylesheets/background.css.
Does that help? Sorry if I've misunderstood the problem!
Note that you'll need to restart rails if you created any new vendor/* directories (e.g. vendor/stylesheets). If you're seeing this in Rails 3.2 or later, this is probably the most likely culprit.
Try changing the extension to .scss for your vendor stylesheet.
Once I did this, SASS was able to find the required import.
You can use bellow path in order to load assets files from vendor/assets.
Put below line into your application.css file, that will work great.
*= require_tree ../../../vendor/assets/stylesheets/.
same thing can be done for Javascript assets.
Hum, I'd say you're using the asset manager in a strange way.
Everything in app/assets/, lib/assets/ and vendor/assets/* are mapped at the same place in /assets/ so, on the web side, it seems like they're all in the same folder.
What you should do, as you're in rails 3.1 is not use css/sass #import but sprockets require.
You should have at the top of your application.sass :
// require pages/common
// require_tree ./pages
// require jquery-ui
// require_self
so that sprockets put everything in the same file in production and you don't have to load a bunch of files.
When you are using engines, this get more tricky. A quick monkey path is to include the engines vendor path in the SASS_PATH Environment-variable. This is what worked for me in the engine.rb:
ENV['SASS_PATH'] = "#{ENV['SASS_PATH']}:#{File.expand_path('../../vendor/assets/stylesheets/')}"
From that point on, you could always put this into a method to DRY it up when you're including multiple engines in your project.