Sass Mixins Not Available in bootstrap-sass Project - ruby-on-rails-4

I have a Rails 4 project with bootstrap-sass and mixins like border-radius(3px) are unrecognized. I'm not certain what I'm doing wrong, but here are what I think are the relevant file parts:
// myfile.css.scss
#import "bootstrap";
#hotel-form {
display: none;
border: 1px gray solid;
padding: 1em;
margin-top: 2em;
#include border-radius(3px);
}
I shouldn't need to import bootstrap in the above but I did it anyhow to try to get the border-radius mixin to be recognized.
# Gemfile
... lots of other stuff
gem 'bootstrap-sass', github: 'thomas-mcdonald/bootstrap-sass'
... and more other stuff
// application.css
*= require_self
*= require_tree .
I don't know if application.css is the problem. I get bootstrap from a CDN as follows:
-# application.html.haml
= stylesheet_link_tag "//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
= javascript_include_tag "//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"
I've tried every different combination other than installing bootstrap on my dev machine with no joy. Any pointers appreciated.
Thanks

Related

Why is GoLand issuing a warning on SCSS code?

I have the following (correct) code in a Vue component, edited from GoLand
<style lang="scss">
.q-dark div,
.body--dark div {
&.calendars {
color: #fefefe;
background-color: black;
}
&.forecast {
background-color: black;
}
}
</style>
GoLand complains about this code:
The same code edited in WebStorm does not show any warnings.
Is there something I should configure or add?
Please make sure you have SASS plugin installed, it doesn't come bundled with Goland: in Preferences | Plugins, Marketplace search for SASS, choose to install it

WebStorm, is it possible to use GitHub markdown theme in preview while using overall dark theme?

Tried to follow this manual, but it doesn't work: https://www.jetbrains.com/help/webstorm/markdown.html#css
Is it possible at all? Did somebody succeed in this task?
Yes, it's possible.
Download one of the markdown css files from https://github.com/sindresorhus/github-markdown-css/.
In the Markdown prefs, set the custom css to point to that file (URLs don't work).
Paste this into the "Add CSS rules:" field:
.markdown-body {
box-sizing: border-box;
min-width: 200px;
max-width: 980px;
margin: 0 auto;
padding: 45px;
}
#media (max-width: 767px) {
.markdown-body {
padding: 15px;
}
}
At the top of your markdown file, insert this (the blank line is important):
<div class="markdown-body">
At the bottom of your markdown file, insert this:
</div>
That's it!

Django 1.8 admin navigation color

Using django 1.8 how do I change the blue navigation bar on the admin interface. I don't want to change anything else, just change the nav bar color.
Thanks
Well, you will have to do a little bit of work.
OPTION 1
Create an admin folder in your static folder in your app. Inside that static folder, create a css and an img folders.
In your site-packages/contrib/admin/static/css folder, copy the base.css file. You can modify any and all the attributes you want in here.
You will also need to copy the img files you want to modify from site-packages/django/admin/static/img - see the css snippet below
Line 498:
.module h2, .module caption, .inline-group h2 {
margin: 0;
padding: 2px 5px 3px 5px;
font-size: 11px;
text-align: left;
font-weight: bold;
background: #7CA0C7 url(../img/default-bg.gif) top left repeat-x;
color: #fff;
}
Line 784:
#header {
width: 100%;
background: #417690;
color: #ffc;
overflow: hidden;
}
seem to hold the values you want to modify. You have to copy the entire file and change the values you want changed. This file will replace the one you have when you run:
./manage.py collectstatic
This will collect all the static files from every app folder and place them in the top level static folder.
OPTION 2
You can copy the base.html template from the django/contrib/admin/templates folder to yourapp/templates/admin folder and keep the same name. At the top of the file, you can add your own css file to load after:
<link rel="stylesheet" type="text/css" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}" />
It will load this template instead of the base.html in the site package and you will have a similar effect.

Including dependencies with ember-cli

I am trying out ember-cli to get an ember project going, however I have previously relied on rails and the asset pipeline to compile all my js and (s)css for previous projects.
I admit a weak understanding of js build tools, so apologies if the question is basic: How can I see what dependencies are being compiled/included in the build? Specifically, I want to include both zurb-foundation and ember-leaflet in my project. I am not sure if they are there (at least the leaflet map is not showing up in the project --- using a basic example that worked with both rails and rail-eak).
The files (ember-leaflet, etc) are in the vendor directory of the project and were placed there thru bower install (I assume?); do I have to manually include them in the root bower.json file (currently they are not); is the order in bower.json important?
Thanks in advance.
DJ
After some digging and a lot of reading I found the solution here and got ember-leaflet to work.
1.) Download the libs
bower install --save leaflet
bower install --save ember-leaflet
Note: It's probably not neccessary to download leaflet, since ember-leaflet seems to have it included (leaflet-dist).This is the part I did manually a few times, so you may or may not have vendor/leaflet-dist. Just change accordingly.
2.) Configure building the assets
Add the import lines in your Brocfile.js before the module.exports line
app.import('vendor/leaflet-dist/leaflet-src.js')
app.import('vendor/leaflet-dist/leaflet.css')
app.import('vendor/ember-leaflet/dist/ember-leaflet.js')
module.exports = app.toTree();
3) make Leaflet and EmberLeaflet known to Ember (.jshintrc)
{
"predef": {
...
"L": true,
"EmberLeaflet": true
}
...
}
4) create a view
export default EmberLeaflet.MapView.extend({
classNames : ['ember-leaflet-map']
});
5) create a template using the view (where view name corresponds to the file name, here views/mapview.js)
<div id="map">
{{view 'mapview'}}
</div>
6) check / add vendor style sheet to app/index.html (should be present with recent versions of ember-cli)
<head>
...
<link rel="stylesheet" href="assets/vendor.css">
</head>
7) run Ember
ember server
8) Bonus: In case you are using Twitter Bootstrap 3 here's the css I had to add to app/styles/app.css (could probably be simplified)
html,
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 20px;
height: 100%;
}
.page-content {
padding: 40px 15px;
height: 100%;
}
.row {
margin-bottom: 1.5em;
}
#map {
height: 100%;
}
.ember-leaflet-map {
height: 100%;
}
body > .ember-view {
height: 100%;
}
It seems like somebody just created an ember-cli addon: https://www.npmjs.org/package/ember-cli-ember-leaflet
I'm going to try it :)

Error with bootstrap-sass. Migrating to rails4

I trying to migrate from rails 3.2 to rails 4.0.1 and when I do all by this guide http://railscasts.com/episodes/415-upgrading-to-rails-4
I have error with bootstrapp css
File to import not found or unreadable: bootstrap-responsive.
Load paths:
/home/arseniy/Work/requests/app/assets/images
/home/arseniy/Work/requests/app/assets/javascripts
/home/arseniy/Work/requests/app/assets/stylesheets
/home/arseniy/Work/requests/vendor/assets/images
/home/arseniy/Work/requests/vendor/assets/javascripts
/home/arseniy/Work/requests/vendor/assets/stylesheets
/home/arseniy/.rvm/gems/ruby-2.0.0-p247#requests/gems/bootstrap-sass-3.0.2.1/vendor/assets/fonts
/home/arseniy/.rvm/gems/ruby-2.0.0-p247#requests/gems/bootstrap-sass-3.0.2.1/vendor/assets/javascripts
/home/arseniy/.rvm/gems/ruby-2.0.0-p247#requests/gems/bootstrap-sass-3.0.2.1/vendor/assets/stylesheets
/home/arseniy/.rvm/gems/ruby-2.0.0-p247#requests/gems/jquery-rails-3.0.4/vendor/assets/javascripts
/home/arseniy/.rvm/gems/ruby-2.0.0-p247#requests/gems/coffee-rails-4.0.1/lib/assets/javascripts
/home/arseniy/.rvm/gems/ruby-2.0.0-p247#requests/gems/bootstrap-sass-3.0.2.1/vendor/assets/stylesheets
(in /home/arseniy/Work/requests/app/assets/stylesheets/bootstrap_and_overrides.css.scss:3)
This my bootstrap_and_overrides.css.scss
#import "bootstrap";
body { padding-top: 60px; }
#import "bootstrap-responsive";
.footer {
text-align: right;
color: #aaa;
}
as explained in this migration Guide Bootstrap now applies the "Mobile First" Practice.
Therefore you don't need responsive css anymore, and all necessary code is included in the "bootstrap.css" file.
Just remove your
#import "bootstrap-responsive";
Line and it should be fine!