I'm wondering what application.css is for? If I'm creating a new file for header and footer so all my pages can just include header and footer page, do I just put all common css syntax in application.css? or should I just create a new custom.css and place all the syntax that is going to be used throughout my application like body, html, ul, a, tags and stuff?
Thanks
What is application.css for? Have you read the Rails guide on the Asset Pipeline? That page alone answers your "what's it for?" question and more very clearly and thoroughly.
As for placement of your styling, the guide mentions:
The default matcher for compiling files includes application.js, application.css and all non-JS/CSS files (i.e., .coffee and .scss files are not automatically included as they compile to JS/CSS):
This means by default Rails is only going to compile an application.css file for you. Sure, you can put your styling in app/assets/stylesheets/custom.css and include it with
/**
*= require custom
*/
but your "custom" styling sounds like application styling, so it seems it'd be best to just drop it all into application.css and let Rails do what it does by default.
Related
Rails 7. New App with Bootstrap CSS, JS Bundling, and CSS Bundling. This results in structure of:
app/assets/builds,
app/images/foo.jpg,
app/assets/stylesheets/application.bootstrap.scss
and using Yarn to add Bootstrap to package.json, with ESBuild for JS build and Sass for CSS build.
It all works until I try add a simple CSS class to the application.bootstrap.scss sass file:
.bg {
background-image: url("foo.com");
}
What I really want here, is the asset in app/assets/images/foo.jpg to be referenced properly. It is a scss file, so sass. When I use the sass commands:
background-image: image-url("foo.com");
or
background-image: url(image-path("foo.com"));
nothing works in development, or production, so that my application.css build file is correct. I get errors about syntax ending in a "we found a .jpg but should be (1px 0 solid) or something like that. In other words, the sass compile is not making a valid css build.
What am I supposed to be doing here to make a simple class with an image asset be part of my delivered application.css bundle? Should I be creating a separate css file and adding that to the sprockets manifest? Seems like overkill.
At the moment the only thing that worked was just adding an inline style to my ERB layout, which is totally bogus bad, but all I could do to just move on.
As an extra question, which I know I should not ask here, I also want to reference an image I add to the Rails App, so that https://myapp.com/my-image.png is just available. I used to park this in /public/my-image.png but if I wanted to instead use /app/assets/images/my-image.jpg what would my link be? I guess it would be all fingerprinted and not accessible, but perhaps I am wrong. Is there any point to referencing an asset instead of parking it in /public or am I forced to use /public?
see
https://github.com/rails/cssbundling-rails/issues/102
did you try
.test {
background-image: url("foo.jpg");
}
https://github.com/rails/sprockets-rails#initializer-options
config.assets.resolve_assets_in_css_urls
When this option is enabled, sprockets-rails will register a CSS postprocessor to resolve assets referenced in url() function calls and replace them with the digested paths. Defaults to true.
I always use a predefined CSS Reset as well as WordPress Core CSS along with my upcoming CSS in any project that I work on. I did not have a problem before I use LESS.
When I write new LESS code and compiled it through SimpLESS or any other compiler, I just get my existing CSS (Reset, WP Core) code removed from my stylesheet (.css) and it gets updated with the new compiled CSS.
It's really annoying for me as I'm using LESS for the first time.
So, how to I keep my existing CSS and the compiled CSS both at once?
Two options:
Put your existing CSS in your LESS code. Your LESS code will
overwrite your css file on every save, so you'll manage all of your
styles with LESS.
Change the name of your LESS file so you're not overwriting your
existing CSS code, then put links to both stylesheets in your HTML
document, or by putting this line in your LESS file:
#import (css) "foo.css";
why dont you compile your less to a separate style sheet and include both in your page head? The problem is if you are compiling from style.less to style.css without including your existing css code in your less, it will overwrite the file not append to it.
So either use the solution above and include your existing css in your less, or compile to a different file name and include both css files in your document head.
I am new to bootstrap, I am just testing it out. Lets say I place CSS code in bootstrap.css it doesnt seem to place it in bootstrap.min.css
Am I missing something!?
They are 2 different files that why. Bootstrap.min.css is just a minified version of Bootstrap.css. This means all the whitespace and other extra characters have been removed, this is normally done to improve loading times. https://developers.google.com/speed/docs/insights/MinifyResources
If you want to add your own styles, just make a new .css file and include it in your project then add all your custom styles in there. You don't need to edit bootstrap.css or bootstrap.min.css.
I'm using zurb with rails. I overrode some of zurbs default css by adding changes to app/assets/stylesheets/application.css
But precompilation seems to append all the other css files to this one. Is there any way to ensure that a certain css rule will be the last one to be precompiled to application.css?
the order in which the assets are compiled can be specified in the manifest files for js and css http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives
Use many requires in your application.css.scss
*= require css1
*= require css2
...
I want to change the standard css style of the beaneditform but can't find the file (default.css) in eclipse or on my local computer?!
any ideas?
this folder assets is not existing in my workspace, where is this file default.css?
The file is located in the Tapestry Core JAR in the org.apache.tapestry5 package. Don't edit it, instead just override the values with your own CSS with a CSS selector that is at least equally specific.
This is also explained nicely in the CSS/Default Stylesheet section of the docs.