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!
Related
Webdev beginner here. I have been working on a website for a couple of weeks, and I want to start using the Bulma CSS framework and sass now.
I cloned Bulma https://github.com/jgthms/bulma into my project folder, and I see that Bulma has it's own css and sass folders.
Am I supposed to:
-put all my css, php, html, js into the Bulma folder and have it essentially become my new project folder?
-or should I just access Bulma's files through the Bulma folder, in my project folder.
I could not find any straight forward information online about how Bulma files/folders integrate into existing projects.
Here is my project folder currently:
I don't really know the best way to organize web projects, especially now adding frameworks. I can see the potential of things getting hairy, and I want to make sure I won't be slowly building a sloppy project pile that's gonna screw me over in the future, or moving folders and messing up relative addressing etc.
Thank you for your time,
Best
-Joe
Between the two choices you mention, the second is the appropriate one.
Best Practice to Organize Javascript Library & CSS Folder Structure
Web project's folders/directories structure - Best practices
There are many ways people structure their project folders. Google something like "website folder structure" and read resources like the above links to get a general idea. The two common ones are grouping files by type and by module/library. The second way is what I would recommend and is what your second choice does.
If you just need default Bulma, all you need to do is load bulma.min.css in your web pages from wherever you've chosen to put it. So out of the entire package, that file is really the only necessary one to keep if you like (and perhaps the LICENSE file since it requests that you do).
If you are customising Bulma, you will need to create your own sass file that should live outside the bulma folder, and then follow the customize Bulma documentation. It would be very similar to an answer I wrote for a Bootstrap question.
I am using a CSS framework, which has documentation for user-created extensions. But these extensions are all written in SASS files on GitHub.
Now this framework is only a single CSS file. But for the extensions they are requiring to use NPM, or clone the entire GitHub project, and start using SASS commands, which I'm unfamiliar with.
Is it possible that I keep the current configuration: I.e. only have the main framework CSS file, and somehow convert each extension SASS file to CSS file and add that to my /css folder? Or that's not possible?
**Edit: It's the Bulma CSS framework, and this is the link to the Extensions repository: Wikiki
If the number of files are not too much, you could convert them manually using an online sass compiler
SassMeiser is my goto choice for online Sass compilers.
Maybe if you could provide a link to the repo, we'll have more clarity on how we could deal with it.
Edit: I just went through the repo. They already have the .min.css file for each extension in dist dir. You're better off just downloading the .min.css file rather than converting it yourself. Remember, you need the .min.js files also for the extension to work.
I'm a bit new to Symfony and I'm don't know what to use for my static file management. I have read about Assets component and the Assetics bundle.
I know that Assets just includes the files and Assetics is a bit smarter as it can combine files and compress images. But I already use compass to minify and combine the css files so therefore Assetics is not really required.
Version control so the url of the static files change to by pass browser cache, is done by both.
Assetics is removed from 2.8 or higher, does this mean it is not best practice anymore?
I need to generate urls on three places:
Twig -> Easy to do with both
Controller -> Found only a way to do this with Assets
In css files -> Believe it is with both not possible
Wat would be the best to use in my case, any advise?
Assetic can be seen as a way to easily apply filters and compile your assets. The asset component basically is used to manage URL generation. As you said, both nicely are integrated in Twig via extensions, and controllers via the services.
Our application uses compass too, but Assetic makes sure that the compiling happens at the right moment without the need of compass watch at the commandline.
Think most of your questions are answered on:
http://symfony.com/doc/current/cookbook/assetic/asset_management.html
and
http://symfony.com/doc/current/components/asset/introduction.html
I've been using the RjFrontendBundle to run the front-end CSS/JS build, and also copy other static content into place from Bower/NPM/local sources. It provides a VersionStrategyInterface for the Assets component that creates, and uses unique filenames in production (renaming the files with an embedded hash, via the GulpJS rev-all package). In dev, it uses the normal filename.
Within CSS files, you can still reference CSS/JS, via a url() function, and the pipeline will rename them appropriately in dev and live.
The GulpJS build tool is used to minify and otherwise prepare the plain files. It comes with a setup console command to build the initial gulpfile.js and can also watch and rebuild files, updating the browser as they are changed, which helps with front-end development workflow.
The trend is to use standalone front end tools such as gulp/grunt/sass instead of assetic. The reasons are (probably) as follows:
gulp / grunt are independent from the framework, providing the same workflow for the front end guy no matter what underlying framework is used for the backend.
assetic has a different workflow than most of the modern tools. It assumes that you will write your script/css includes in the templates. Migrating from assetic to gulp could be a pain for large project.
as your project grows, assetic can become kind of slowish... As that happens, you will stop pulling your assets from the controller and start generating them the way gulp or grunt does. In this scenario, gulp and grunt are just better tools.
assetic lacks some important features, such as including processed assets into HTML code (inline). Because of the way assetic works (twig tags), it might be difficult to overcome this.
As for generating the URLs: assets are just files in the filesystem. Write a function or twig extension to generate URLs to those files.
As I continue to make progress on my app my stylesheets folder has quickly become overrun. I've read the rails guide on the asset pipeline, and scoured the internet for a reputable source and am still at a loss on the "rails way" to keep everything tidy.
Before I go and try and develop a system by myself I was hoping to get some suggestions from you guys.
Is there a well known "best practice" when it comes to asset organization? If not, what has worked well for you?
As of now my setup is this:
app/assets/stylesheets >
application.css, application-RESPONSIVE.css
any code specific to the body, containers, navbar, footer
controller.scss, controller-RESPONSIVE
*any code specific to that controller
lib/assets/stylesheets >
reset.css
in application.css i use
*= require reset
*= require_tree .
*= require_self
To get all the styles however I've also been wondering if its better to set self before tree as a means of overriding the main styles if need be?
Is there a well known "best practice" when it comes to asset organization?
Organization of assets:
In Rails, pipeline assets can be placed inside an application in one of three locations: app/assets, lib/assets or vendor/assets.
1) app/assets is for assets that are owned by the application, such as custom images, JavaScript files or stylesheets.
2) lib/assets is for your own libraries' code that doesn't really fit into the scope of the application or those libraries which are shared across applications.
3) vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks.
Is it better to set self before tree as a means of overriding the main styles if need be?
application.css is what is called a manifest file. Now, it wouldn't particularly make any difference by switching self with tree, but it would change it's position in the loading sequence. Consider this...
Once you’ve placed your assets in their logical locations, you can use manifest files to tell Rails (via the Sprockets gem) how to combine them to form single files. These manifest files contain directives - instructions that tell Sprockets which files to require in order to build a single CSS or JavaScript file.
Additional info:
One other thing that Rails does, is generate stylesheets for you when you run the rails generate command in the terminal. On creation of a new controller, you'll see a stylesheet with the controller's name in your assets. It'll look something like app/assets/stylesheets/newcontroller.css.scss
Also, what steve klein said.
Hope this helps you out.
UPDATE:
I've tried looking for examples on github but all of the apps I have found have been too simple and havent shown any advanced organization for a large amount of files.
I encourage you to check out Open Source Rails website. I have looked at some projects there and they seem complex enough for you to be interested enough. Especially, look at the Discourse app. Discourse was co-founded by Jeff Atwood, co-founder of Stack Overflow. That I suppose speaks for itself ;)
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!