This is a continuation of rails, bootstrap, media-breakpoint-only but I don't think one needs to refer back to that.
I have a Rails project in which I am attempting to use the Bootstrap function media-breakpoint-only.
A search of my computer shows that media-breakpoint-only is defined in ~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-4.1.3/assets/stylesheets/bootstrap/mixins/_breakpoints.scss
My ~/app/assets/stylesheets/application.scss is
/*
* 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
*/
// See
// https://www.youtube.com/watch?v=vcBXXOdPfgE&index=8&list=PLYM1n9xxMy4ClO2GjX73U3BLsXx9Z7wh5
$navbar-default-bg: red;
// Shnelvar
// See https://github.com/twbs/bootstrap-sass
#import "bootstrap-sprockets";
// Custom bootstrap variables must be set or imported *before* bootstrap.
#import "bootstrap";
// Shnelvar
// For ralph-shiny-button etc.
#import "ralph";
// Shnelvar
// See https://stackoverflow.com/questions/33404154/bootstrap-change-the-navbar-font-size
// See https://teamtreehouse.com/community/how-do-you-change-the-bootstrap-font-style
.nav a{
color: white !important;
// font-size: 3.8em !important;
font-size: 2.8em;
}
#import "bootstrap/breakpoints";
// See https://getbootstrap.com/docs/4.0/layout/overview/
h1 {
#include media-breakpoint-only(xs) {
color: red;
}
#include media-breakpoint-only(sm) {
color: green;
}
#include media-breakpoint-only(md) {
color: blue;
}
#include media-breakpoint-only(lg) {
color: yellow;
}
#include media-breakpoint-only(xl) {
color: orange;
}
}
Please note that I have
* require_tree .
* require_self
and not
*= require_tree .
*= require_self
so, I believe, the "requires" are commented out.
When I attempt to load my webpage I get the following error:
Sass::SyntaxError in StaticPages#root
Showing ~/app/views/layouts/application.html.erb where line #15 raised:
File to import not found or unreadable: bootstrap/breakpoints.
Load paths:
~/app/assets/config
~/app/assets/images
~/app/assets/javascripts
~/app/assets/stylesheets
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/coffee-rails-4.2.2/lib/assets/javascripts
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/jquery-rails-4.3.3/vendor/assets/javascripts
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/actioncable-5.2.0/lib/assets/compiled
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/activestorage-5.2.0/app/assets/javascripts
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/actionview-5.2.0/lib/assets/compiled
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/turbolinks-source-5.1.0/lib/assets/javascripts
~/node_modules
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/stylesheets
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/javascripts
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/fonts
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/images
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/stylesheets
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/javascripts
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/popper_js-1.14.3/assets/javascripts
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/stylesheets
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/stylesheets
Apparently, ~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-4.1.3/assets/stylesheets/bootstrap/mixins/ isn't in any of the load paths.
I'm thinking I might have an rbenv error but I'm not sure.
My environment is
Rails 5.2.0
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux]
Please further note that if I get rid of the #import "bootstrap/breakpoints"; and the h1 css that I am able to use a Bootstrap navbar successfully. Thus, I assume, I have installed bootstrap sucessfully.
Help!!!
in gemfile
gem 'bootstrap-sass', '~> 3.2.0’
then do file inside the stylesheet assets name it bootstrap_and_overrides.css.scss
#import "bootstrap”;
This video can help you about how to add bootstrap gem to your ruby on rails app
https://www.youtube.com/watch?v=mxYsMacHHtU&t=122s
Related
I tried doing their Ruby on Rails instruction for installation but when I included #import 'hamburgers' it doesn't know where to search for the file. So what I tried to do was copy the files from the '_sass/hamburgers' directory from the 'hamburgers' gem into my project.
files inside the _sass/hamburgers directory pasted in my stylesheets folder.
Even after pasting the files in my project's stylesheet folder an error still shows up.
Error states
Error: Undefined variable: "$hamburger-padding-y".
on line 4:12 of app/assets/stylesheets/_base.scss
padding: $hamburger-padding-y $hamburger-padding-x;
If I understand correctly _base.scss is connected to hamburgers.scss so there shouldn't really be any issues. Hope to get some help!! :>
EDIT:
Here's my application.scss
/*
* This is a manifest file that'll be compiled into application.scss, 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 "hamburgers";
Here is also hamburgers.scss
#charset "UTF-8";
/*!
* Hamburgers
* #description Tasty CSS-animated hamburgers
* #author Jonathan Suh #jonsuh
* #site https://jonsuh.com/hamburgers
* #link https://github.com/jonsuh/hamburgers
*/
// Settings
// ==================================================
$hamburger-padding-x : 15px !default;
$hamburger-padding-y : 15px !default;
$hamburger-layer-width : 40px !default;
$hamburger-layer-height : 4px !default;
$hamburger-layer-spacing : 6px !default;
$hamburger-layer-color : #000 !default;
$hamburger-layer-border-radius : 4px !default;
$hamburger-hover-opacity : 0.7 !default;
$hamburger-active-layer-color : $hamburger-layer-color !default;
$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
// To use CSS filters as the hover effect instead of opacity,
// set $hamburger-hover-use-filter as true and
// change the value of $hamburger-hover-filter accordingly.
$hamburger-hover-use-filter : false !default;
$hamburger-hover-filter : opacity(50%) !default;
$hamburger-active-hover-filter: $hamburger-hover-filter !default;
// Types (Remove or comment out what you don’t need)
// ==================================================
$hamburger-types: (
3dx,
3dx-r,
3dy,
3dy-r,
3dxy,
3dxy-r,
arrow,
arrow-r,
arrowalt,
arrowalt-r,
arrowturn,
arrowturn-r,
boring,
collapse,
collapse-r,
elastic,
elastic-r,
emphatic,
emphatic-r,
minus,
slider,
slider-r,
spin,
spin-r,
spring,
spring-r,
stand,
stand-r,
squeeze,
vortex,
vortex-r
) !default;
// Base Hamburger (We need this)
// ==================================================
#import "base";
// Hamburger types
// ==================================================
#import "types/3dx";
#import "types/3dx-r";
#import "types/3dy";
#import "types/3dy-r";
#import "types/3dxy";
#import "types/3dxy-r";
#import "types/arrow";
#import "types/arrow-r";
#import "types/arrowalt";
#import "types/arrowalt-r";
#import "types/arrowturn";
#import "types/arrowturn-r";
#import "types/boring";
#import "types/collapse";
#import "types/collapse-r";
#import "types/elastic";
#import "types/elastic-r";
#import "types/emphatic";
#import "types/emphatic-r";
#import "types/minus";
#import "types/slider";
#import "types/slider-r";
#import "types/spin";
#import "types/spin-r";
#import "types/spring";
#import "types/spring-r";
#import "types/stand";
#import "types/stand-r";
#import "types/squeeze";
#import "types/vortex";
#import "types/vortex-r";
// ==================================================
// Cooking up additional types:
//
// The Sass for each hamburger type should be nested
// inside an #if directive to check whether or not
// it exists in $hamburger-types so only the CSS for
// included types are generated.
//
// e.g. hamburgers/types/_new-type.scss
//
// #if index($hamburger-types, new-type) {
// .hamburger--new-type {
// ...
// }
// }
Per the comments, the OP requested this info though it does not answer the primary question.
Don't do any of the "ruby on rails" stuff from the official documentation.
Create app/assets/stylesheets/hamburgers.css and get the code from here (or just copy in the file). This is the dist/hamburgers.css file the documentation mentions.
In your application view (e.g., application.html.erb), in the <head> put in the stylesheet reference: <%= stylesheet_link_tag "hamburgers" %>
Put in some html markup (get from the documentation example here). Also, be sure to put the <script> code from the example (it's at the end).
When I did this, I got a fresh rails site to work exactly the same as how the hamburger author's example.html works.
As to why you get that hamburger-padding-y error, I don't think you are supposed to need to put the css AND scss files. The yarn install combined with the rails gem is probably supposed to take care of this, but I couldn't recreate the error because I couldn't get a rails server to work if I install the gem (hamburgers, which resolved to v1.1.3). I was using Ruby 2.6.2 / Rails 6.0.3.3
RESULT:
I have installed bootstrap 4.5 into RAILS 6 and I want to extend some styles.
For that I have a file named banana.scss in app/assets/stylesheets that looks like this :
.form-read-only {
#extend .form-control, .form-control-sm;
background-color: rgb(233, 236, 239)
}
Now I want to embed this stylesheet after bootstrap is loaded, so I have modified the app/assets/stylesheets/application.css by
/*
...
*= require banana
*= require_tree .
*= require_self
*/
#import 'bootstrap';
#import 'banana';
But this leads to the error message in the browser to :
Error: The target selector was not found.
Use "#extend .form-control-sm !optional" to avoid this error.
on line 5 of app/assets/stylesheets/banana.scss
>> #extend .form-control, .form-control-sm;
But what is the remmmended way to extand bootstrap ?
I think the only issue is that you *= require banana before you #import 'bootstrap'. Try removing the first one:
/*
...
*= require_tree .
*= require_self
*/
#import 'bootstrap';
#import 'banana';
I've found an easy way to accomplish that.
Just import the bootstrap on the beginning of my custom stylesheet:
#import 'bootstrap';
.form-read-only {
#extend .form-control, .form-control-sm;
background-color: rgb(233, 236, 239)
}
Because I can't define the order in which the stylesheet files are loaded, here I'm sure when the custom stylesheet is loaded, in front of the depending bootstrap stylesheets are loaded at first.
I m trying to make media queries with bootstraps. I put this in my application.css.scss file but that doesn't work :
/*
* 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 'masonry/transitions'
*= require_tree
*= require_self
*/
#import "bootstrap-sprockets";
#import "bootstrap";
#import "font-awesome";
$backgroundNav : #ffffff;
$backgroundBody : #E9E9E9;
$red : #FD0E48;
#media screen and (max-width: 770px){
.body {
background-color: red;
}
}
body {
background: $backgroundBody;
}
What should i do in order to make the query to be detected ?
Application.css.scss is a manifest file and you should define which files you need to require.
If you want to compile codes in your application.css.scss you should add = require_self in top of your application.css.scss
I believe you have the wrong selector.
.body {
background-color: red;
}
.body selects an elements with the class body, like <div class="body">foobar</div>
You probably meant to select the body element:
body {
background-color: red;
}
Also, put your #media styles after the "normal" ones.
body {
background: $backgroundBody;
}
/* responsive body styles */
#media screen and (max-width: 770px){
body {
background-color: red;
}
}
Here's the fiddle - resize the window to see the change.
And since RoR has SASS support, why not use it?
body {
background: $backgroundBody;
#media screen and (max-width: 770px){
background: $backgroundBody;
}
}
First of all your CSS in the media query is wrong.
It should be:
body {
background-color: red;
}
and not .body as it will search for element that has class "body", example:
<p class="body>
content
</p>
Secondly try to write your media queries (#media styles)after your general css towards the end of the files, i think that should fix the issue.
Hope that helps :)
I have a Rails 4 app, using the foundation-rails v5.2.1.0 gem, and one custom SCSS file for my application layout. When I use a variable from the foundation_and_overrides.scss file, I get the following error:
Undefined variable: "$header-font-family"
I've included relevant code below. I can post more if needed. Anyone know what's going on here?
From application.css:
*
*= require foundation_and_overrides
*= require_self
*= require_tree .
*/
From foundation_and_overrides.scss:
// We use these to control header font styles
$header-font-family: "futura-pt", sans-serif;
$header-font-weight: 400;
// $header-font-style: normal;
From custom.css.scss:
$include-html-global-classes: false;
#import "foundation/components/global";
.
.
.
.footer {
background-color: black;
color: white;
height: 100px;
font-family: $header-font-family;
}
You are getting the error because foundation_and_overrides.scss is executing after custom.css.scss. Best way to do this is to define your variables in a partial and import it in your main stylesheet after foundation.
First change the file name from
foundation_and_overrides.scss to _foundation_and_overrides.scss
and then import it in custom.css.scss file after foundation with
#import 'foundation_and_overrides';
Update
Rename your application.css to application.css.scss and custom.css.scss to custom.scss
In your application.css.scss remove *= require_tree .
And then import your main stylesheet with
#import 'custom'
I hope this helps
The cleanest way is to add the line
#import "custom";
to your file foundation_and_overrides.scss before the line
#import "foundation";
There's no need to remove *= require_tree . from application.css.scss as stated in the accepted answer. There's also no need to add require foundation_and_overrides to application.css if you leave require_tree . in there.
According to the Rails Docs:
If you want to use multiple Sass files, you should generally use the Sass >#import rule instead of these Sprockets directives. When using Sprockets >directives, Sass files exist within their own scope, making variables or >mixins only available within the document they were defined in.
So in this case the order of the directives (the lines in application.css that start with *=) doesn't matter because each of those files lives in its own scope and you can't access their variables from another scss file. That's why you want to either #import foundation_and_overrides and then custom, or #import your custom stylesheet into foundation_and_overrides.
Getting around to using sass in my latest rails project, specifically the bootstrap-sass gem to get all of twitter bootstrappy goodness.
Is it possible to reference the variables already defined? The vendor /assets/stylesheets/bootstrap/_variables.scss file contains declarations for colors.
$blue: #049cdb !default;
$blueDark: #0064cd !default;
$green: #46a546 !default;
$red: #9d261d !default;
Do I need to redefine these in the top of my base application.css.scss file or can I import/reference the variables file? I've tried a couple of approaches like this:
$bodyBackground: $black;
#import 'bootstrap'
But that errors out with undefined variable $black.
First, define the variable $black:
$black: #000;
$bodyBackground: $black;
#import "bootstrap";
or change it to:
$bodyBackground: #000;
#import "bootstrap";
Remove the below two lines from application.scss file:
*= require_self
*= require_tree .