I installed twitter-bootstrap-rails gem with less support by adding the following in my Gemfile:
gem 'therubyracer'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
After running a bundle install, I went ahead and ran the generator:
rails generate bootstrap:install static
My application.css in app/assets/stylesheets/ has the following in it:
*= require_self
*= require_tree .
If I view source, I do see the following there:
<link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" />
So that's there. Then I started playing with the Grid system and added the markup show-grid and noticed there's no style for it. I proceeded to add the following in my bootstrap_and_override.css.less file:
#import "twitter/bootstrap/reset.less";
#import "twitter/bootstrap/variables.less";
#import "twitter/bootstrap/mixins.less";
#import "twitter/bootstrap/scaffolding.less";
#import "twitter/bootstrap/grid.less";
#import "twitter/bootstrap/layouts.less";
#import "twitter/bootstrap/type.less";
#import "twitter/bootstrap/forms.less";
#import "twitter/bootstrap/wells.less";
#import "twitter/bootstrap/component-animations.less";
#import "twitter/bootstrap/buttons.less";
#import "twitter/bootstrap/close.less";
#import "twitter/bootstrap/navs.less";
#import "twitter/bootstrap/navbar.less";
#import "twitter/bootstrap/labels-badges.less";
#import "twitter/bootstrap/hero-unit.less";
#import "twitter/bootstrap/utilities.less";
#import "twitter/bootstrap/responsive";
After adding these, I started the local Rails server up and still don't see the markup in the application. Must be doing something wrong here. Does application.css need to be renamed application.css.less? Do I need to recompile something? I'm guessing show-grid styling is on one of the imports below (probably grid.less), and I'm guessing that something I'm doing incorrectly is not importing those stylesheets.
Where's a good step to begin troubleshooting this?
The Bootstrap show-grid class comes from the docs.css that Bootstrap use on their own demo site.
I don't think it's really meant to be used by folk who download Bootstrap but I guess there's nothing stopping you using it.
The css is in this file:
http://twitter.github.com/bootstrap/assets/css/docs.css
And it's used here on Bootstrap:
http://twitter.github.com/bootstrap/scaffolding.html
Related
I'm trying to learn Laravel and I've run into an issue that I can't seem to figure out with Google Fonts and Sass.
I'm trying to load my font on app.scss with:
// Fonts
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&display=swap');
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
But it compiles to app.css as:
#import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;
700&display=swap);#charset "UTF-8";
If I manually correct app.css it works. But how do I get Sass or Laravel to compile it properly?
This is caused by a known bug in Webpack which appears to be still open.
Details here: https://github.com/webpack/webpack/issues/10873
I solved it by modifying it as follows:
original:
#import url ("https://fonts.googleapis.com/css2?family=Rubik:wght#400;700&display=swap");
modified:
#import url ("https://fonts.googleapis.com/css2?family=Rubik:400,700");
Right now I have all the unmodified bootstrap files a copy of those files for customization.
These folders:
--> Bootstrap
--> Custom (copy of the above)
I first include boostrap files and then the custom files, which right now are an exact copy.
Let's say I start changing values in "Custom" in order to get the desired looks. Then I update boostrap to a new version, by updating the bootstrap folder. A lot of changes might not come through since the previous version is basically copied to "Custom" even if the css rules haven't been changed at all.
Is this the correct way to do it, or should I try a different approach?
There are 2 ways to do this
First i need to understand you project folder struture i would reccomend this
dist
-/css
-/styles.css
src
-/scss
-styles.scss
-/bootstrap
-bootstrap.scss (taken from the scss folder)
-_variables.scss (taken from the scss folder)
Using this stucture your project only needs the styles.scss which will import the bootstrap folder below it and then compile into your dist folder to ouput your CSS (i would reccommend webpack or gulp for this if you know how to do thiat)
The main this in that the bootstrap.scss file is set-up like this below (in this example i am using node_modules as i have imported bootstrap using npm into my project. But this is a relative path for where the files live, so make your path to the same files is correct to how you have strutured your project)
Bootstrap.scss
Just notice that the variables file is pointing to the local one, not the one that sits in the main repo folder.
/*!
* Bootstrap v4.2.1 (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)
*/
#import "./node_modules/bootstrap/scss/functions";
#import "../bootstrap/_variables.scss";
/*#import "./node_modules/bootstrap/scss/variables.scss";*/
#import "./node_modules/bootstrap/scss/mixins";
#import "./node_modules/bootstrap/scss/root";
#import "./node_modules/bootstrap/scss/reboot";
#import "./node_modules/bootstrap/scss/type";
#import "./node_modules/bootstrap/scss/images";
#import "./node_modules/bootstrap/scss/code";
#import "./node_modules/bootstrap/scss/grid";
#import "./node_modules/bootstrap/scss/tables";
#import "./node_modules/bootstrap/scss/forms";
#import "./node_modules/bootstrap/scss/buttons";
#import "./node_modules/bootstrap/scss/transitions";
#import "./node_modules/bootstrap/scss/dropdown";
#import "./node_modules/bootstrap/scss/button-group";
#import "./node_modules/bootstrap/scss/input-group";
#import "./node_modules/bootstrap/scss/custom-forms";
#import "./node_modules/bootstrap/scss/nav";
#import "./node_modules/bootstrap/scss/navbar";
#import "./node_modules/bootstrap/scss/card";
#import "./node_modules/bootstrap/scss/breadcrumb";
#import "./node_modules/bootstrap/scss/pagination";
#import "./node_modules/bootstrap/scss/badge";
#import "./node_modules/bootstrap/scss/jumbotron";
#import "./node_modules/bootstrap/scss/alert";
#import "./node_modules/bootstrap/scss/progress";
#import "./node_modules/bootstrap/scss/list-group";
#import "./node_modules/bootstrap/scss/close";
#import "./node_modules/bootstrap/scss/toasts";
#import "./node_modules/bootstrap/scss/modal";
#import "./node_modules/bootstrap/scss/tooltip";
#import "./node_modules/bootstrap/scss/popover";
#import "./node_modules/bootstrap/scss/carousel";
#import "./node_modules/bootstrap/scss/spinners";
#import "./node_modules/bootstrap/scss/utilities";
Styles.scss
This is the file that you will need to complie and then that will output your custom CSS
#import 'bootstrap/bootstrap.scss';
the variables file so long as you copied this from the repo version you are using (important as with the various version, if you use the incorrect version then you will get complie errors for variables not being present) You should be able to customise bootstrap colours, breakpoints, cols, rows and much more to get bootstrap the way you want it.
I'm install bootstrap gem and follow all direction to change application.css, however when I create another custom .scss file, customizations from the custom file werent included in application.css.scss . I have tried to import boot strap and bootstrap-sprockets to the custom file as well, but no changes were made on the website. How can I make the customizations on the newly created custom.scss file to show on the website.
the application.css.scss file contains only 2 lines
#import "bootstrap-sprockets";
#import "bootstrap";
If I've read your question correctly, you have application.scss, which contains
#import "bootstrap-sprockets";
#import "bootstrap";
and also your custom.scss file, contents of which you want to end up in application.css. You need to add it to your application.scss file, ie -
#import "bootstrap-sprockets";
#import "bootstrap";
#import "custom";
It's also recommended to begin the name of .scss files which you are importing (also known as partials) with an underscore, so in this case custom.scss becomes _custom.scss.
And make sure you recompile the application.scss to application.css so the changes are actually made - I'm not sure what you're using to compile your sass but I think this may be the step you are missing.
My Rails 4.2 now uses many Sass variables, and it was switched from relying on sprockets require statements to Sass #import statements. It now has 2 issues in development:
Pages may load a little slower
When I refresh a page, CSS changes don't always show up, so I need to open the page in a new tab.
How can I fix this?
application.css:
*= require_self
*= require main.scss
main.scss:
#import "bootstrap";
#import "base/variables.scss";
#import "styles/home.scss";
#import "styles/pages.scss";
//remaining CSS pages
_home.scss:
/* various styles, no import statement */
_variables.scss:
$color-red: #F23C3A;
//...
One thing I would look at would be removing the file extensions of your Sass imports, and also renaming application.css to application.scss so the file knows it will be precompiling Sass to CSS.
application.scss
#import "main";
main.scss
#import "base/variables";
#import "styles/home";
#import "styles/pages";
If you are using Bootstrap Sass their documentation walks through setting up your file structure to include Sass in your project.
In your config/environments/development.rb, ensure that it includes
config.cache_classes = false
This way, all assets and code will be reloaded each time the page is refreshed. You will usually only need to reload the server after a migration.
I'm running a project where Symfony2 serves the api and back-end; I use bower to install my front-end dependencies, including Angularjs and Zurb Foundation. We're using Assetic––a Symfony2 bundle––to minify, uglify, pre-render and combine our assets. We're also using Sass (as .sass), compiled by Assetic.
I want to work with Foundation's _settings.scss and understand that Foundation needs to recompile itself whenever I change a variable. I've tried running compass watch path_to_file but that doesn't update my Foundation project.
As I understand it, a lot of people run foundation using Compass or gulp. I've read through several docs but am unsure how it relates to my particular case. One source suggests running compass init to start a project and that compass watch to update the project when I make changes, but that doesn't seem appropriate to do with Symfony2, but I may be wrong. Anyone got tips?
I'm using this foundation repo: https://github.com/zurb/bower-foundation,
but there's also this one: https://github.com/zurb/foundation-apps. The second repo seems more suited for people who are running a Foundation project with gulp, the foundation cli, or by running compass init when starting a project.
The answer is incredibly simple:
I use Assetic to compile my sass. It typically looks like this:
{% stylesheets
"#SiteBundle/Resources/public/vendor/foundation/scss/app.scss"
filter="compass" %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}"/>
{% endstylesheets %}
app.scss is a file I created because that seems to be how everyone works with foundation. app.scss then imports the foundation components I want as well as normalize.scss and _settings.scss. I don't have to run compass watch because Assetic is already compiling for me.
I might move my app.scss and _settings.scss out of my vendors directory to ensure I don't write over either when updating foundation. But at the moment here's what my app.scss looks like, for anyone interested:
#charset "UTF-8";
// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
// Import normalize and settings
#import "normalize.scss";
#import "foundation/settings";
// Make sure the charset is set appropriately
// Behold, here are all the Foundation components.
#import "foundation/components/grid";
// #import "foundation/components/accordion";
#import "foundation/components/alert-boxes";
#import "foundation/components/block-grid";
// #import "foundation/components/breadcrumbs";
#import "foundation/components/button-groups";
#import "foundation/components/buttons";
#import "foundation/components/clearing";
#import "foundation/components/dropdown";
#import "foundation/components/dropdown-buttons";
#import "foundation/components/flex-video";
#import "foundation/components/forms";
#import "foundation/components/icon-bar";
#import "foundation/components/inline-lists";
// #import "foundation/components/joyride";
#import "foundation/components/keystrokes";
#import "foundation/components/labels";
// #import "foundation/components/magellan";
// #import "foundation/components/orbit";
#import "foundation/components/pagination";
#import "foundation/components/panels";
// #import "foundation/components/pricing-tables";
#import "foundation/components/progress-bars";
#import "foundation/components/range-slider";
#import "foundation/components/reveal";
#import "foundation/components/side-nav";
#import "foundation/components/split-buttons";
#import "foundation/components/sub-nav";
#import "foundation/components/switches";
#import "foundation/components/tables";
#import "foundation/components/tabs";
#import "foundation/components/thumbs";
#import "foundation/components/tooltips";
#import "foundation/components/top-bar";
#import "foundation/components/type";
#import "foundation/components/offcanvas";
#import "foundation/components/visibility";