I started using foundation-rails in a project and I would like to know how can I include only the needed javascript files instead of all of them as I'll be using only a couple of things and loading all the javascripts of all files seems a bit unnecessary.
I'm using foundation-rails 5.5.2 and I have this in my application.js
//= require foundation
Thanks
That line just requires the foundation.js file in gem vendors/assets/javascripts which in turn just requires the individual files. If you take a look at that file you can just copy paste the individual requires to pick what you need and replace the //= require foundation that it automatically put in your manifest.
Related
I'm very new to scss and css so please bear with me. I've done some research but found conflicting information.
I have 2 freelancers working on my project. Both freelancers make changes to:
style.css
style.css.map
style.scss
Everytime I merge their work I break the frontend. How can I merge their work without breaking everything?
I read online that these files should not be included in GIT? I also read that I should used GULP or LESS? Apparently, I should compile the merged code before committing? Seriously confused with the research.
How do I handle these files?
The .css file is generated from the .scss files.
Your developers should commit only in the .scss files.
In the most cases the .css file is not added to the repository at all. And you should not modify the .css file directly because it will be replaced with the next compilation of .scss the files.
GULP is just the tool that compiles the .scss files and create the css from them. Basically when using GULP you can create some functions where you can specify the input location(.scss), output location(.css) and additional rules, etc.
There are also other tools that can do this. Like Koala, Webpack.
You probably should not store generated files in git. In this case, the generated files would be the .css and .css.map files that compass (I'm assuming you use compass because of the tags) generates for you. You should store the .scss file in source control, and compile it to .css afterwards.
If the freelancers are making direct manual changes to the .css files, they should know that at each recompile those changes will be lost.
I would like to ask how to use .less files in a Rails application if they are placed under assets but in a separate folder (let's call the folder "myless") from stylesheets. Another way to term this is that the myless folder would be side by side the folders, "images", "javascript" and "stylesheets" which are under the assets folder.
How do I import them to application.css or to a .CSS file? What lines of code would I use?
Do I have to add a method in environment.rb?
What gems do I have to use?
Any insight would be superb. Note that I am fairly new to Rails and are studying different tutorials on it. The different implementations in different versions of Rails is confusing me and there's not really a clear tutorial I can find online. I am currently trying to implement a bootstrap template, this is why I ask this question. I got the JavaScript and the CSS down but realized that the template uses .less files. Help?
You can enable your app to support LESS by including the appropriate gem(s):
gem 'therubyracer'
gem 'less-rails'
Then run bundle install. Assuming you have the appropriate stylesheets included in your stylesheets manifest, you should be good to go!
There's also the rails-less-bootstrap gem if you want a simpler way of including Bootstrap in your project.
Note: it's a good idea to keep your stylesheets together. Instead of having the myless directory be on the same level as images, javascripts, and stylesheets, you should consider moving it inside of your stylesheets directory.
Hope it helps!
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!
I have a set of css files which I use in almost all projects.
I would like to create a gem which has a generator inside it.
I managed to write some code using the tutorial given here http://guides.rubyonrails.org/generators.html
However i am not sure about how to move this to a gem and use a command like device install ....
There are actually two ways of doing this (and both involve a Rails Engine afaik).
You create a engine that contains a generator for your file
You create a engine that bundles the CSS file so you can require it without having it present in your code repository. (Similar to the jQuery gem).
To create an engine just follow this guide: http://edgeguides.rubyonrails.org/engines.html.
Just without the mountable option and anything you put inside your app/assets/stylesheet directory will be available through require inside your CSS manifest.
The relevant part in the guide is in 6.4 besides the general boilerplate setup you have to do.
For a generateor the same applies, you just have to put the generator in the generators directory as you would with the app and can then run it from there with the engine prefix.
I'm using SquishIt and have a .less file which I add to a CSS bundle with the following line
.Add("~/content/styles/dev.less")
This compiles as dev.less.debug.css when I build the solution, however I'd like to be able to just save the .less file and it automatically compiles the css (so I see the change instantly in my browser as I would with a traditional CSS file).
I have looked at a number of extensions to achieve this (such as LessExtension and LessCssForVisualStudio) but these require the file to be added to the bundle as dev.css rather than dev.less. Mindscape Web Workbench does not compile LESS files in its free version so I do not know if it also requires dev.css.
I can't change the link to the file as the project will be worked on across teams, where some won't install an extension and will be happy to build the solution to compile.
Is there and extension that automatically compiles LESS that is built to work with SquishIt?
If you use it on non-production site, I would suggest using less.js (It will render css with js on client-side).
Squishit uses dotless under the hood, so you could use that directly.. either set it up so that you request the less file and a handler returns CSS or you can use the exe to compile on build and also the watch mode... I'm not sure what's best for you, but you can find more information on the dotless wiki (https://github.com/dotless/dotless/wiki/Using-.less)
Web essentials does this job perfectly and its free.
http://vswebessentials.com/