CSS automatically linked to HTML with Rails - ruby-on-rails

I created a style.css file in app/assets/stylesheets for my Ruby on Rails project. I added some styling and started up the server. I didn't put any <link href...> or stylesheet_link_tag anywhere in any html.erb file but every page had the css changes I wrote in style.css
Additionally, I now have to restart the server every time I make a change to the CSS in order to see those changes in the browser. Has anyone ran into this before? By the way, I am using action cable. I also don't have a public/assets folder.
application.js
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("jquery")
$(document).on('turbolinks:load', function () {
alert("Hello!");
})
application.css
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
style.css
table{
border-collapse: collapse;
}
table, th, td{
border: 1px solid black;
}
#left, #right {float:left}
#left {width: 30%;}
#right {width: 70%;}

Related

Full path disclosure on my applications.css

My application is doing some kind of logging and exposing my computer folders and username in application.css
I have the stylesheet tag on my application.html.erb
layouts/application.html.erb
<%= stylesheet_link_tag "application", :media => "all" %>
It renders a link like a normal rails applications would something along the lines of
<link rel="stylesheet" media="all"
href="/assets/application.self-
80b79e181044a0c9a308926720613f77d9222f04fe80f2a18ad8b83fa3ca7e3d.css?
body=1" />
However if a follow the link the document reveals sensitive information about my computer
/*!
* Bootstrap v4.0.0 (https://getbootstrap.com)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/* line 1, /Users/XXXXX/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/bootstrap-4.0.0/assets/stylesheets/bootstrap/_root.scss */
:root {
--blue: #007bff;
}
/* line 21, /Users/XXXX/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/bootstrap-4.0.0/assets/stylesheets/bootstrap/_reboot.scss */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* line 27, /Users/XXXXX/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/bootstrap-4.0.0/assets/stylesheets/bootstrap/_reboot.scss */
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
What could be causing this problem?
Edit: I'm using rails 5.1, once the app is deployed and running on production mode, it doesn't show the path of the production server it still disclosures my computer folders.
application.scss
#import "pulse/variables";
//Custom bootstrap variables must be set or imported *before* bootstrap.
#import "bootstrap";
#import "pulse/bootswatch";
#import "bootstrap-select/bootstrap-select";
Put your bootstrap stylesheet to /lib/assets/stylesheets then try to require with pipeline:
application.scss
//= require pulse/variables
//= require bootstrap
//= require pulse/bootswatch
//= require bootstrap-select/bootstrap-select

How to give controller sass files precedence over sass imported from application.scss

I'm having an issue in that inside my controllers scss file, I continually have to mark everything with !important in order to style elements. Here's an example input element in my Map controllers scss:
.search-field {
width: 300px !important;
box-shadow: none !important;
border-bottom: none !important;
display: inline-block;
font-size: 16px;
margin-left: 15px !important;
}
This is because inside application.scss, I imported my material library which takes precedence over map.scss:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
#import "materialize";
#import "font-awesome";
* {
font-family: 'Raleway', sans-serif;
}
html {
width: 100%;
height: 100%;
}
body {
margin: 0;
min-width: 100%;
min-height: 100%;
background-color: #1A1A1A;
}
How can I avoid having to use the !important flag everywhere?
EDIT:
I have also tried the following (with no luck)
inside application.html.erb I added an additional link to my controllers css
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'map', media: 'all', 'data-turbolinks-track': 'reload' %>
then removed the use of require_tree . inside application.scss
When I restarted the server however, I still needed the !important tags. Still no luck
Since it's very rare to need every stylesheet in your application to be loaded on every page, you'll find importing only what's necessary per page to be much more efficient, shorten load times, and also address the problem of which styles take precedence! The Rails way to do this is to remove the require tree statements in your /application.js and /application.scss files. The only files imported in your application.js & application.scss files should be app-wide styles or js. Then you would add the following lines to your layouts/application.html.erb file:
Inside the <head> tag:
<%= stylesheet_link_tag params[:controller] if Rails.application.assets_manifest.assets["#{params[:controller]}.css"]
This will then include the corresponding controller's stylesheets. Putting this before or after the stylesheet_link_tag for your application changes the precedence based upon your needs.
Then in your <body> tag you should add:
<%= javascript_include_tag params[:controller] if Rails.application.assets_manifest.assets["#{params[:controller]}.js"]
Now, to make this work in production for deploying your app you'll need to add the controller names to your config/initializers/assets.rb file or else you'll get an error that the assets weren't compiled. In that file you'll add as follows for your map controller:
Rails.application.config.assets.precompile += %w( maps.js )
Rails.application.config.assets.precompile += %w( maps.css) #Note rails expects the css suffix and not the scss suffix here so use that and not scss even though your file may be maps.scss
Then everytime you add a new controller in the future, add that controller's name to the arrays shown above and then run bundle exec rake assets:precompile RAILS_ENV=production and you're good to go. For more examples checkout my old answer on basically the same problem here: sprockets loads sass in random order with twitter bootstrap
My problem was a combination of lower priority css rules added onto the asset pipeline loading order. I found my problem was solver when I did the following to my application.scss file:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require font-awesome
*= require materialize
*= require_tree .
*/
* {
font-family: 'Raleway', sans-serif;
}
html {
width: 100%;
height: 100%;
}
body {
margin: 0;
min-width: 100%;
min-height: 100%;
background-color: #1A1A1A;
}
I could remove most !important rules afterwards, and found that I was using a class css rule but it was being overrode by a specific input[type=text] rule, using an ID instead let me make the changes I wanted to.

Unable to get Foundation working out of the box

I thought I followed the directions, but maybe I missed something?
Gemfile:
gem 'foundation-rails'
ran bundle
ran rails g foundation:install
This added and made changes to:
views/layouts/application.html.erb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= content_for?(:title) ? yield(:title) : "foundation-rails" %></title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "vendor/modernizr" %>
<%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
assets/stylesheets/application.css
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*= require foundation_and_overrides
*/
assets/stylesheets/foundation_and_overrides.scss
// -- snip --
// - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-visibility-classes: $include-html-classes;
// $include-accessibility-classes: true;
// $include-table-visibility-classes: true;
// $include-legacy-visibility-classes: true;
#import 'foundation';
assets/javascripts/application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .
$(function(){ $(document).foundation(); });
I have successfully seen buttons display correctly, but other things just refuse to display as expected. The first thing I looked at was the grid example, so i copied and pasted the source, but it didn't shade as the example. The spacing seems correct...
Then I tried accordian. I copied and pasted from the source code of the examples. It displayed the list bullets but didn't expand/contract.
Then I tried the top bar. I copied and pasted from the source code of the examples. It put a horizontal bar at the top, but the menu items are not inline.
Then I tried making a brand new rails project just to test foundation. I followed the same steps, and got the same results. (mumbles something about insanity...)
I've used foundation before, but apparently I'm missing something important.
$ rvm list
rvm rubies
=* ruby-2.2.1 [ x86_64 ]
# => - current
# =* - current && default
# * - default
$ rails -v
Rails 4.2.4
foundation-rails gem currently loads foundation 5, while the website has examples for foundation 6. It would appear that they are NOT compatible ;)
To test, see the documentation for foundation 5

I can't modify bootstrap-sass variables in rails application

I am using the theme grasyscale-sass, mainly in one of the links of the project and ALL it works fine, and other links use its own SCSS file. In this scss file I want to change certain bootstrap variables as navbar-default-bg, etc, but to include two scss files (application.scss and my custom.scss file) with stylesheet_link_tag in the file application.html.erb I can't get the changes I've made to these variables in custom.scss, I think always the default values apply, however the normal code CSS is modified.
Any clue what I'm doing wrong? Or am I trying to do something "forbidden"?
Thanks in advance.
/**************/
Here application.html.erb file and how the two scss files are included, both in assets/stylesheets
<%= stylesheet_link_tag 'application', 'custom', media: 'all', 'data-turbolinks-track' => true %>
custom.scss file
$link-color: #cb2027;
$brand-primary: #cb2027;
$body-bg: #e9e9e9;
$navbar-default-brand-color: #cb2027;
$navbar-default-bg:#ffffff; /* Navbar default */
$navbar-height: 30px;
$pagination-active-bg: #cb2027;
$pagination-active-border: #cb2027;
i{
color: #337ab7;
}
a{
color: #cb2027;
}
#import "bootstrap";
#import "bootstrap-sprockets";
.center {
text-align: center;
}
.navbar-brand{
font-size: 2em;
font-weight: bold;
}
...
and application.js file, included in assets/javascripts
//
//= require_self
//= require jquery
//= require jquery_ujs
//= require jquery.easing
//= require jquery.turbolinks
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap
// require.js
//= require grayscale
//= require masonry/jquery.masonry
// require_tree .
Import Bootstrap styles in app/assets/stylesheets/application.scss
#import "bootstrap"; and #import "bootstrap-sprockets"; go inside application.scss along with any other stylesheets.
Without going into how you can/should setup your directories for stylesheets, variables/mixins, etc. Your variables need to come before bootstrap in application.scss and your other customization's after:
Since you're using a theme that all ready has variables used to customize the base bootstrap styles, you'll have to change those Grayscale variables and/or styles in order to change them to what you want.
*In this example _variables = grayscale_variables from the theme and main.scss is basically application.scss.
application.scss
#import "grayscale_variables";
#import "bootstrap-sprockets";
#import "bootstrap";
#import "font-awesome-sprockets";
#import "font-awesome";
#import "_grayscale";
#import "style";
grayscale_variables.scss
$grayscale-primary: #cb2027;
$grayscale-dark: #e9e9e9;
$grayscale-light: #cb2027;
$grayscale-body-font-family: "Lora","Helvetica Neue",Helvetica,Arial,sans-serif;
$grayscale-headline-font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
$navbar-height: 30px;
$pagination-active-bg: #cb2027;
$pagination-active-border: #cb2027;
(*and only one bootstrap js should be used) see bootstrap-sass bootstrap-sprockets and bootstrap should not both be included in application.js
My application.scss, but remain unimplemented some variables, for example $body-bg, $navbar-default-bg and so, I think uses main.css of grayscale-sass theme.
I also tried changing the order of some #import
$link-color: #cb2027;
$brand-primary: #cb2027;
$body-bg: #e9e9e9;
$body-bg: #fff;
$navbar-default-brand-color: #cb2027;
$navbar-default-bg: #f8f8f8;
$navbar-height: 30px;
$pagination-active-bg: #cb2027;
$pagination-active-border: #cb2027;
#import 'masonry/transitions';
#import 'bootstrap-sprockets';
#import 'bootstrap';
#import 'custom';
#import '../../../grayscale-sass/asset/sass/main.scss';

Override Spree Commerce's Bootstrap Variables

I'm having an issue with deploying a customized _variables.scss to my production server as a compiled asset.
Everything is fine on my development environment, it's in production that my variables are being overwritten.
I'm using Rails 4.2.1 with Spree 3.0 Stable branch.
I have the following structure:
Files created in vendor/assets/stylesheets/frontend
_variables.scss (my custom app variables)
all.css (generated by Spree)
frontend_bootstrap.css.scss (override Spree)
navbar.scss (my customization)
The _variables.scss contains the following:
// Place all Sass variables here.
// Colors
$brand-primary: green;
$gray: #aaa;
// Navbar
$navbar-default-bg: #fff;
$navbar-height: 100px;
$navbar-border-radius: 0;
$navbar-default-border: none;
$navbar-default-toggle-hover-bg: $navbar-default-bg;
$navbar-default-toggle-icon-bar-bg: lighten($gray, 60%);
$navbar-default-toggle-border-color: $navbar-default-bg;
$navbar-default-link-active-bg: $brand-primary;
The frontend_boostrap.css.scss contains the following:
// Spree Bootstrap Override
// Core
#import "variables";
#import "bootstrap-sprockets";
#import "bootstrap";
// Custom Overrides
#import "navbar";
The navbar.scss contains the following:
// Navbar Customization
.navbar-myapp {
margin-bottom: 40px;
border-top: none;
border-bottom: 1px solid $navbar-default-toggle-icon-bar-bg;
.navbar-brand {
padding: 15px;
}
}
The Rails standard app/assets/stylesheets/application.css manifest isn't being used/I haven't declared anything specfic in there.
The produced HTML head code shows all.css and frontend.
<link rel="stylesheet" media="screen" href="/assets/spree/frontend/all.self-33fc4a513acb9a5f3fd4ba26b89c94184e5d028c4bd40eee6736d3ccfea5c140.css?body=1">
<link rel="stylesheet" media="screen" href="/assets/spree/frontend/frontend_bootstrap.self-88eb7ced3e4d78d298a33264c3cfc65af6cef8ac32ae56a7dd7a3e321ba97378.css?body=1">
All is well in development but when I deploy this to my test server, some of the variables are being overwritten by the default, this includes the navbar configuration and a color.
I'm not sure if this is because of asset compilation order; or if it's how bootstrap-sass is imported.
Any suggestion on how I can go about using _variables.scss without it being overwritten? I didn't want any duplication, that's why I wanted to change the navbar and colors in the the variables sass file.
It looks like I've solved the issue.
The Bootstrap Sass gem states:
Do not use //= require in Sass or your other stylesheets will not be
able to access the Bootstrap mixins or variables.
To get this working in Production / compiled assets. I had to:
Change all.css to all.scss
Change the //= require statements to #import
The vendor/assets/stylesheets/spree/frontend/all.scss:
// Sass Application Manifest
#import "frontend_bootstrap";
The vendor/assets/stylesheets/spree/frontend/frontend_bootstrap.css.scss:
// Spree Bootstrap Override
// Core
#import "bootstrap-sprockets";
#import "variables";
#import "bootstrap";
I hope this helps anyone who stumbled like I did.

Resources