I have a template, one of those you could buy, with many css/js/images, very beautiful.
But I have to control these pages with Ruby on Rails, which I am still learning.
The template files have many directives for other files and folders.
I am trying to understand the Assets Pipeline and I am feeling that it looks not good.
There are dozens of css files, with the directives for many images that are placed in other folders.
I am very scared to be straightforward.
I am not the project owner, I just have these two requirements:
Use this template
Build the system in Ruby on Rails
Could someone indicate me the correct way to get along with this situation.
Thanks a lot.
There is no direct solution to this, but may be this can help: install_theme gem. I haven't used it but the link shows how to use an html/css/js theme in rails application.
Friends,
There is a solution for dummies!
I am feeling so fool.
Inside Rails folders, there is a folder called public
We just have to put our css/js/images inside this folder.
For example, in my template, the index.html was in the same folder then a folder called assets which has sub folder css, js, images
So, the files need for index.html were (relatively to it) in assets/css/... or assets/js/...
Thus, all I had to do was copy my whole folder assets to inside the public directory below Ruby on Rails files.
I found it here:
The Asset Pipeline
I am sorry for the dummy question.
Thanks a lot!
Related
I still have some problems to handle my assets in symfony. The best practices say, I should store my assets in web/.
But I dont like to store my raw sass files there, because its a public folder and I think only compiled or static files should be stored there.
Thats why I store them (js and sass) currently in app/Resources. And my assetic.read_from is app/Resources. But then there are some bundles, that are symlinked by assets:install to web/bundles/.
And now, when I want to include this bundle-assets in my twig files, I have to go there by ../../web/bundles/.. in the stylesheets block. That doesnt look very clean, so I did a symlink app/Resources/bundles->web/bundles/ and that works.
But I still think its too much fiddle and I would like to know if there is a cleaner way that better collects my assets in one place.
Don't use AsseticBundle, it was even removed in default symfony-standard 2.8. Managing frontend assets with php is workaround for someone who really don't want to use "the right tools"
I personally keep my source files in /assets/ and with Grunt JS I compile them to /web/assets/ which later is served from assets.somedomain.com through CDN
2 years ago I wrote post about managing assets with symfony, it's still valid and up to date. You might want to check it out.
http://konradpodgorski.com/blog/2014/06/23/better-way-to-work-with-assets-in-symfony-2/
I should extend post by things I learned since then but always not enough time :)
I don't see why you can't use web/ folder for your assets.
I often work with less and other file format which are afterward processed and minified.
The solution to your problem seems simple to me: Use two folder in the web/ folder.
The first folder would be your source/ folder. In which you would place all your sass files. You will add a .htaccess file to this same folder, and deny all access (you can copy from the .htaccess file in the src/ folder).
Then a second folder, lets call it assets which will hold all your compiled and minified assets.
That should do the trick... ;)
You may be interested in this topic as well. It may help to hide futher the existence of your source/ folder. ;)
If you really don't want to have your sources files in the web/ folder, then loot at this, it should help you place your sources files in your bundle.
My less style sheets are located in my /public folder for now. I'm trying implement them on my meteor app but to no avail.
This is the error I get:
The stylesheets are located in the /less folder, which is inside the public folder, so the URL should be correct. By the way, all those files that are in the screenshot above are files that import dozens of other variables located deeper in the folder.
I also checked and I have the latest version of less installed. Any help would be appreciated.
The public folder isn't the right place to store the files. Files stored in a “public” folder are served to visitors. These are files like images, favicons, and the “robots.txt” file. So they get served 'as-is', not processed by LESS and served as CSS.
More about Meteor folder conventions.
After discussion in the comments, it seems something is not working right in your less compiler, the less file should not be in the public folder, as already mentioned, and you should not need to include it with a script tag. You can follow these steps to create a new app and test less and see if you can find a difference between this and your current app.
Create a new meteor project
meteor create test
Add less
cd test
meteor add less
Start your server
meteor
add a file sytles.less to the top level folder with this...
.fun {
color: red;
}
Update the test.html file to add the fun class to the text output...
<div class="fun"><p>You've pressed the button {{counter}} times.</p></div>
Load the page, the text should pick up the class and become red. No link to the styles.less file needed. You can try moving it around to different folders, it worked fine from client for me as well. Look around and see what else might be different.
If you still have issues, try providing more information on how the project is set up.
I am new to bootstrap. I downloaded a wrapbootstrap theme and is trying to include that in my website. In the downloaded theme, there are several folders under a folder called assets, like bootstrap, css, js, icons, img. Under bootstrap folder there are again subfolders called css, fonts and js. Can anyone please tell me where exactly in the project should i add these files? In case of a simple theme, I know we need to add the bootstrap css under Content folder and the bootstrap js under Scripts folder and we need to add it in BundleConfig.cs. But here, since there are different css files and js files, where can I include them?
Thanks in advance.
Where the files are located is really irrelevant so far as your application is concerned. The ~/Scripts and ~/Content folders are just a default convention that Visual Studio uses with the templates.
However, nothing is preventing you from moving them. When working with a template, you have one of two choices.
Leave the files as they are, and simply reference them, or include them into bundles in the paths they are located in.
Determine which CSS and JS files you need, and re-shuffle everything to suit your particular projects needs.
The first option makes it easier to upgrade the template in the future, while the second option makes your project files more coherent because they follow a similar structure.
At the end of the day though... it's all just a resource location for you web server to resolve. Do whatever makes sense for your project.
We got a wrap bootstrap theme call ace admin. We are trying to integrate the theme into meteorjs.
The structure of the ace admin files folder is:
assets
avatars
css
fonts
images
img
js
build
demo
files
lib
several javascript files here (*.js)
dist
avatars
css
fonts
images
img
js
By following the tutorial here
I moved all the static content such as images, fonts, etc to client folder, javascript related folders - (assets, build, dist and all the related content) to public folder.
The problem that I am facing it - Meteor is not loading the javascript files inside the public folder.
Could someone help? Thanks.
Edit:
Ok. Finally. Thanks to #Ethaan. After spending almost 2 days figuring out what the problem- its with the javascript loading dependencies. If anyone is facing similar problems - make sure you load all the dependencies first and then load other files.
Do everything in the link provided in the above url that I mentioned and then move all the js folder files to client.
You should know some things about meteor structure, You can read docs
/lib folder its where you put the code you want to share between server/client, code like Routes,Collectios or other code ho is available on server/client(if you put code which use "window" object you will have issues, since windows objects its undefined to the server.)
/publicfolder here is where you put the images, logos, fonts, etc (you get the idea)
/client folder here is where you put the code which will be available only to the client
/server here is where you put the code only available on the server
I recommend you to read the docs, this was just a quickly explanation.
In my webdesign process i use jade, sass, coffe etc. to generate static files via a GruntJS watch task into a dev folder. And most of the times after the build process is done, a cms comes along and want some templates to work. Thats usually html files with some php/ruby/python tags in it. Let´s say it´s a Wordpress Theme.
The Problem is:
i have to modify my generated files in the dev folder directly
when im modifing my source jade, html, coffee - files, the dev folder would be overwritten
if i clone the static files and move them into the theme folder, i have to apply manually every change i made to the src/dev folder to the cloned theme template files.
that´s very odd. So i´am in need of a grunt task that maybe...
generate the templates for me out of the static files (via a json mapping file)
generate the templates directly from the src files via special attributes, comments or something similar
There´s just one thread i found where the user tries to accomplish the same with jsdom.
Can someone help me to find a existing tool that accomplish such a task or do i have to build it on my own?
Thanks, Robert
Check out grunt-usemin
Replaces references to non-optimized scripts or stylesheets into a set of HTML files (or any templates/views)