I'm creating a rails 3.2.x project in which I would like to create a stylesheet for printing. I'm using SASS and the asset pipeline and I've added a file called print.css.scss to my require line in the default loaded sass file.
I've got a class contents and I'm setting the diplay to none for a test. If I remove the #media print block then it works on the screen but still not in the printer.
#media print {
.contents {
display: none;
}
}
I've tested printing in Chrome & Firefox, it's like the stylesheet is not getting loaded on print, is there anything else I have to configure?
You should create a print manifest file like this and require your print sass file in it like this.
print.css
/*
*= require print
*/
Then in your layout:
<%= stylesheet_link_tag "print", media: 'print' %>
Related
I'm trying to get vue2-dropzone (version 3.0.3) to cooperate nicely with my Rails 5.1.4 app. I've added Dropzone to to my form and loaded the module but somehow I am not able to see the default styles. I don't think this is a problem with vue2-dropzone as much as with how webpacker loads the css.
My current setup:
application.js
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.css'
const myForm = new Vue({
el: '#multistep-form',
components: {
vueDropzone: vue2Dropzone
},
data: function () {
return {
dropzoneOptions: {
url: 'https://httpbin.org/post',
thumbnailWidth: 150,
maxFilesize: 5,
dictDefaultMessage: "<i class='fa fa-cloud-upload'></i> Drop files here to upload",
headers: { "My-Awesome-Header": "header value" }
}
}
}
and my _form.html.erb partial:
<vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions">
</vue-dropzone>
I see that the Dropzone form is loaded. However, I cannot see the default style. I see the following in the console when I run :
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--1-2!node_modules/postcss-loader/lib/index.js??ref--1-3!node_modules/vue2-dropzone/dist/vue2Dropzone.css:
[0] ./node_modules/css-loader?{"minimize":false,"sourceMap":true,"importLoaders":2}!./node_modules/postcss-loader/lib?{"sourceMap":true,"config":{"path":"/Users/myuser/Documents/apps/myapp/.postcssrc.yml"}}!./node_modules/vue2-dropzone/dist/vue2Dropzone.css 30.5 kB {0} [built]
I don't think it's an error since it says webpack: Compiled successfully. but I do think that webpack isn't loading vue2Dropzone.css for some reason. How should I configure webpacker to load that css file?
If I put the css file manually into my app/assets/stylesheets/ then it works without a problem.
Thanks in advance!
I think your CSS file should be loaded in CSS and not in js.
Here's how I'm doing it in my project.
Create application.css in packs folder and import into the Rails layout file, application.html.erb
<%= javascript_pack_tag 'application' %>
#import 'vue2-dropzone/dist/vue2Dropzone.css'
If you do this though, you will get an error because #import is a sass syntax. So you will need to do some extra webpack config.
You will find this post useful if you want to use css inside the application.js file.
https://medium.com/#mayorsan/rails-angular-webpacker-gem-like-a-pro-7cf40a588ab9
I have created a RoR based app/website where the client can upload their own background image to the cover page.
Everything works well with one image, but I would like the site to be responsive and allow my client the choice to upload 3 completely separate images that are displayed depending on the px width of the window.
Currently I have the following code (only showing relevant code), which works fine:
In covers_controller.rb:
class CoversController < ApplicationController
#
#covers = Cover.all
#cover = Cover.find_by(:published => 'yes')
#
end
In application.html.erb:
<body style="background-image: url(<%= #cover.image %>)">
I have however not succeeded in making the cover images responsive. I have tried the following...
Adding a css.erb file with the following code:
#media (max-width: 767px) {
.cover-bg {
background-image: url(<%= #cover.image %>)
}
}
#media (min-width: 768px) {
.cover-bg {
background-image: url(<%= #cover.m-image %>)
}
}
#media (min-width: 1200px) {
.cover-bg {
background-image: url(<%= #cover.lg-image %>)
}
}
For the css.erb above I added two new images to the Model called m-image and lg-image (using paperclip), and added the .cover-bg class to the body tag on application.html.erb, but got a blank page.
UPDATE: here is the model. I realize that I did not add the new images to the Model. However, when first testing the idea of using css.erb, I used images from three different Models for the different #media css, and encountered the same problem:
class Cover < ActiveRecord::Base
has_attached_file :image,
styles: { xlarge: "1600x1600>", large: "600x600>", medium: "300x300>", thumb: "100x100>" }
validates_attachment_content_type :image,
content_type: /\Aimage\/.*\z/
end
I hope there is a easy solution out there, but I have yet to find it. I also tried various application helper methods, but no luck thus far.
Your .css.erb file won't work because you're calling instance-dependent objects, when in likelihood, this file will be precompiled - making it static.
how do you propose that application.css will be able to read #cover?
--
The reason why it worked when you used <body style="..."> is because when you have an inline style in the view, Rails has access to all the data for the instance information etc.
To fix the problem, you need to reference your media queries in a place where you'll have access to all the instance data, namely the view.
After looking at some resources, it's my opinion that you're best putting it into the <head> of the layout of your app:
#app/views/layouts/application.html.erb
<head>
<%= if [[conditional for page]] %>
<style>
#media (max-width: 767px) {
.cover-bg {
background-image: url(<%= #cover.image.url %>)
}
}
#media (min-width: 768px) {
.cover-bg {
background-image: url(<%= #cover.image.url(:medium) %>)
}
}
#media (min-width: 1200px) {
.cover-bg {
background-image: url(<%= #cover.image.url(:large) %>)
}
}
</style>
<% end %>
</head>
<body class="cover-bg">
...
This should give you the ability to assign the custom background image size.
--
Another thing you'll want to look at is background-size: cover:
#app/assets/stylesheets/application.css
.cover-bg {
background-size: cover;
}
This would have to be accompanied by the inline "background-image" style, but if it was done correctly, would allow you to resize your screen and be impervious to the change of background size.
Update
Ruby on Rails applications are dynamic by nature -- they connect to a database etc.
Each time you send a request to a Rails application, there is a lot which happens on the server (you can read more about how it works with MVC):
In short, Rails basically acts like a drive-thru where you pull up, send your request/order, and then Rails comes back with the goods. The "goods" are rendered HTML code which your browser then outputs on the screen.
This rendered HTML - although will be interspersed with #instance_variables etc in the backend - will be static for the browser.
Your browser is nothing more than an engine to render HTML/CSS/JS. Rails "compiles" your data and sends back an HTML file so that Chrome / Firefox can output something useful on screen.
In other words, your <%= #instance_variable %> is ONLY available in the "backend" of the app (when your "order" is being processed). This means that if you're looking to make your application versatile, you have to make sure all backend data is available to the parts of the app which are returned to the browser each time.
As such, your CSS has a problem. By its nature, CSS is static. There is no reason to include it in the expensive process of repopulating with each request/order. Kind of like changing the design on the drive-thru bags each time. You do it once and then use them for several years (the bags are NOT personalized with professional print each time).
So they're kept static -- precompiled (minified) so that it can be downloaded once and then kept in the cache whilst the user browses.
If you need to make your CSS variable (IE it uses backend data), you can include it only if it's available before the files are precompiled. If you're trying to access instance variables, it has to be kept in the views/layout.
I am using SASS for the first time, and my variables seem to have stopped working. I have the following code in my application.css.scss file:
*= require_self
*/
#import "layout";
#import "colors";
...
#import "text";
In my partial _colors.css.scss file, there is:
...
$ct-white: #F8F8F8 !global;
and in my partial _layout.css.scss file (the Rails default layout file):
/* Site-wide layout syntax */
body {
background-color: $ct-white;
}
I know that the _layout.css.scss file is loading because other styles on the page work fine when I set body { background-color: #F8F8F8; }. For some reason, the variable isn't being parsed correctly.
Any ideas why?
You're importing colors after layout , so the variables you define in colors are not available for layout. You could simply invert the order of those two lines. In SASS, import order matters.
If you're using the sass-rails gem, it uses sass 3.2.0 so !global throws an error.
i already install asset-pipeline:1.8.10.
i'm confusing how to call css and javascript. i already googling. i found this video
but i havenot understood.
at folder grails-app/asset/stylesheets have based.css,bootstrap.css, main.css. last i create new file with application.css
but i only add this code to application.css
/*
*require bootstrap
*require based
*main.css
*require jquery-ui.custom
*require bootstrap
*require_self
*require_tree
*/
in gsp i use <asset:stylesheet src="application.css" />
but it likes not work. because the page is blank.
example :
grails-app/asset/stylesheets have based.css
based.css coding is
body
{
#FF0000;
}
at index.gsp
i call <asset:stylesheet src="application.css" />
then how about application's content?
there are a couple of things wrong in your application.css, first why do you import bootstrap twice? the second thing is, that you use require_tree with no folder given like: "require_tree . " or "require_tree subfolder"
here should be a working example:
/*
*require bootstrap
*require_tree .
*/
with a given folder structure like:
/grails-app/assets/stylesheets/
/application.css
/based.css
/main.css
and the bootstrap plugin required via BuildConfig.groovy.
The other aproach is to require different stuff directly instead of using the require_tree directive:
/*
*require bootstrap
*require based
*require main
*/
I'm looking for a way to use the Less Preboot mixins in my Rails project.
Gems Gemfile:
gem "less-rails"
gem "twitter-bootstrap-rails"
Layout application.html.erb:
<%= stylesheet_link_tag "application", :media => "all" %>
Stylesheet application.css.less.erb:
/*
*= require bootstrap_and_overrides
*= require_self
*/
.navbar .navbar-inner {
#gradient > .vertical(#333,#000);
}
But the Preboot mixin #gradient > .vertical is not found, giving this error:
#gradient > .vertical is undefined
(in */app/assets/stylesheets/application.css.less.erb)
The Bootstrap Github page tells me it was built with Preboot:
"Bootstrap was built with Preboot" (Source: https://github.com/seyhunak/twitter-bootstrap-rails#using-with-less)
I believe you have to define - override the styles provided by Twitter Bootstrap - all the css components in the bootstrap_and_overrides.css.less file. You can create your ids and classes through your application and define the style in this file... Well, this is the way I use twitter-bootstrap-rails...
There are other options... this article compare some of them: http://rubysource.com/twitter-bootstrap-less-and-sass-understanding-your-options-for-rails-3-1/
Also, there is a very good railscast about it: http://railscasts.com/episodes/328-twitter-bootstrap-basics?view=asciicast
If you want to use the Preboot mixins in your Rails project with twitter bootstrap you need to add the following to the top of the LESS file you want to use them in:
#import "twitter/bootstrap/variables";
#import "twitter/bootstrap/mixins";
After this you are able to use the gradients, and all other Preboot mixins:
#content {
#gradient > .vertical( #eee, #ccc );
}