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 ;)
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 finding old CSS code on my browser instead it has the new code in server files. I can see the minified CSS code on browser when application gets loaded up.
My team is using Liferay framework which seems to minify the CSS files. I am noob in liferay.
I found portal-ext.properties under liferay-portal-6.1.10-ee-ga1/tomcat-7.0.25/webapps/ROOT/WEB-INF/classes/ but didn't found any parameter for minifying the CSS files?
You shouldn't just update any CSS code you find deployed on the server. Instead, update your theme, build it (it builds to a web application) and deploy it to the server. This will take care of minification and updating caches. Just changing random files in the realm of the webserver will not.
For this you'll have to find the source files for your theme (or a whole plugins-sdk, which might contain that theme). Look at your organization's source control system, which is where I'd expect it.
Explaining how to update and build themes goes well beyond the scope of a single answer here, if these are really your first steps it might be worth getting some help from someone who has some experience with Liferay.
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.
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!
if you're familiar with Liferay you'll know that when you make an itsy-bitsy change to a css file you shall rebuild the theme and redeploy it.
As for redeploying I made a symlink (mind you I'm on Windows: for the curious creating a symlink on Vista is just a matter of issuing mklink /d dir1 dir2).
But what about rebuilding the stuff with maven? I'd rather skip that step. Basically what it does is combyining and packing all CSS in one everything_packed.css. Is there a sort of config variable to tell liferay just to include the raw files and skip redeployment alltogether?
Thanks
Guys I found the solution myself.
You should have a file called portal-ext.properties file in
$TOMCAT_DIR/webapps/ROOT/WEB-INFO/classes
Or more specifically for my win setup in
C:\liferay\webapps\ROOT\WEB-INF\classes
The file would hold the value
theme.css.fast.load=false
This will prevent liferay to be looking for the everything_packed.css and so you're free to modify your stuff without rebuilding and CTRL-R to refresh the page and see the changes.
Just for completeness, as this question is somewhat old and the problem already solved: There's a lot more along these lines, e.g. javascript, layouts etc. that can be used uncached. This is documented in either the Liferay Wiki (as Developler Mode) or the Development Guide, available from the documentation site (though currently it's not there for the last version - if it's still not there when you're reading it, look for it (PDF) in the older versions.
It's advisable to use these settings only in development, not in production, as putting all css and javascript in as few files as possible results in a huge performance impact.
to include all those settings, just can also just add the following line into your portal-ext.properties file:
include-and-override=portal-developer.properties
this will include all the developer specific settings, and when you want to remove them, you can just comment out this line.
you can edit the css files of your theme from Webapps{your theme}\css
And can see the changes directly.
You can edit almost every file which doesn't require compilation.like .jsp files but not .java files