I'm running a Rails 3 app and am including the zurb-foundation gem to bring in Foundation 4. I noticed (in my local dev env) that every single Foundation JS plugin/lib is being loaded. I'm only using a couple, or so. My question is, how can I customize which Foundation JS files are loaded? I'd like to only load a subset of the Foundation JS files.
Thanks.
By requiring foundation
//= require foundation
$(document).foundation();
it requires all of these:
/*
=require foundation/foundation
=require foundation/foundation.alerts
=require foundation/foundation.clearing
=require foundation/foundation.cookie
=require foundation/foundation.dropdown
=require foundation/foundation.forms
=require foundation/foundation.joyride
=require foundation/foundation.magellan
=require foundation/foundation.orbit
=require foundation/foundation.reveal
=require foundation/foundation.section
=require foundation/foundation.tooltips
=require foundation/foundation.topbar
=require foundation/foundation.interchange
=require foundation/foundation.placeholder
*/
Instead, just require what you want.
=require foundation/foundation
=require foundation/magellan
$(document).foundation();
As the latest version of foundation-rails (5.5.0)
//= require foundation/foundation
//= require foundation/foundation.magellan
$(document).foundation();
Related
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';
I am using the following gems:
gem 'therubyracer', platforms: :ruby
#gem "therubyracer"
gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
gem "twitter-bootstrap-rails"
and in asset pipeline this is the code
*
*= require_bootstrap_and_overrides
*= require_self
*= require_tree .
*/
and in bootstrap_and overrides file this is the code
#import "twitter/bootstrap/bootstrap";
// Set the correct sprite paths
#iconSpritePath: image-url("twitter/bootstrap/glyphicons-halflings.png");
#iconWhiteSpritePath: image-url("twitter/bootstrap/glyphicons-halflings-white.png");
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
#fontAwesomeEotPath: font-url("fontawesome-webfont.eot");
#fontAwesomeEotPath_iefix: font-url("fontawesome-webfont.eot?#iefix");
#fontAwesomeWoffPath: font-url("fontawesome-webfont.woff");
#fontAwesomeTtfPath: font-url("fontawesome-webfont.ttf");
#fontAwesomeSvgPath: font-url("fontawesome-webfont.svg#fontawesomeregular");
// Font Awesome
//#import "fontawesome/font-awesome";
// Glyphicons
#import "twitter/bootstrap/glyphicons.less";
// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
//
// Example:
// #link-color: #ff0000;
#import url(http://fonts.googleapis.com/css?family=Capriola);
and when i use the class <i class="fa fa-user"></i> like this glyphicon is showing. But for the class <i class="glyphicon glyphicon-user"></i
the glyphicon is not displaying the proper image.
Bootstrap is not being included in your asset pipeline correctly, try this workaround by importing from the CDN source instead of loading from an asset file:
Add this to the head section of your application.html.erb file in your views/layout folder:
FontAwesome icons:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
Glyphicon icons, which are packaged with the bootstrap minified CDN:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
I would strongly suggest you to switch to https://github.com/twbs/bootstrap-sass and follow the guide there
I am trying to incorporate Polymer with Rails 4 using the polymer-rails and polymer-paper-rails Gems.
I seem to be having a lot of problems getting any elements to display in Firefox. After looking around and quite a lot of searching on Google, I have come to the conclusion that it must be an issue with my platfom.js file.
I have followed the instructions for installing both the aforementioned gems to the letter and really don't know what I'm doing wrong. The paper elements work perfectly in Google Chrome.
In my Firefox dev console I see the Message
"platform.js is not the first script on the page. See
http://www.polymer-project.org/docs/start/platform.html#setup for
details." platform.js:12".
This is what my application.js file looks like:
// 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 vendor/assets/javascripts of plugins, if any, 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/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .
//= require elements/ripple
//= require forms/select
$(function(){ $(document).foundation(); });
The section of my HTML looks like this:
<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>
<%= javascript_include_tag 'polymer/platform' %>
<%= stylesheet_link_tag "application" %>
<%= html_import_tag 'application'%>
<%= javascript_include_tag "vendor/modernizr" %>
<%= csrf_meta_tags %>
</head>
The platform.js documentation seem to be outdated (related to 0.5 version of Polymer)
For compatibility on browsers that do not fully support webcomponents you should include
//= require webcomponentsjs/webcomponents-lite
After that you should see the components in FF/Safari the same way you see in chrome
I am using rails3 with bootstrap-sass gem.
I'm having an error:
ActionController::RoutingError (No route matches [GET] "/img/glyphicons-halflings.png"):
my bootstrap_and_overrides.css.scss is:
#import "bootstrap";
body { padding-top: 60px; }
#import "bootstrap-responsive";
application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require paloma
//= require_tree .
try this code in bootstrap_and_overrides.css.scss, if you use gem "twitter-bootstrap-rails"
#import "twitter/bootstrap/bootstrap";
#import "twitter/bootstrap/responsive";
// Set the correct sprite paths
#iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings.png");
#iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white.png");
I am trying to use the jQuery UI datetimepicker found here. I put the jquery-ui-timepicker-addon.js file in vender/assets/javascripts, and I put jquery-ui-timepicker-addon.css in vendor/assets/stylesheets. My application.js file looks like this:
//= require modernizr-2.0.6.min
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require jquery-ui-timepicker-addon.js
And my application.css looks like this:
/*
*= require application_top
*= require jquery-ui-timepicker-addon.css
*= require application_bottom
*/
The javascript seems to be working, but instead of looking as it does in the example, there are no styles applied, and the hour/minute sliders to not show up. I stuck this in at the bottom of my view with the datetime picker:
<script type="text/javascript">
$(function() { $('#start_time').datetimepicker(); });
</script>
What am I doing wrong?
Remove .css from application.css
/*
*= require application_top
*= require jquery-ui-timepicker-addon
*= require application_bottom
*/
OR
load the styles in application.html.erb
<%= stylesheets 'application', 'jquery-ui-timepicker-addon' >