I'm new to Ruby on Rails and wanted to install a free template called AdminLTE.
It allows you to easily create App (front-end).
I wanted to integrate it into Rails but I didn't know how and I couldn't find a solution anywhere.
If anyone can help me that would be awesome.
this is the template's website: https://almsaeedstudio.com/AdminLTE
Got this implemented just last night. Here's how I did it.
Paste this into your Gemfile :
gem 'bootstrap-sass'
gem 'jquery-rails'
gem 'font-awesome-sass'
source 'https://rails-assets.org/' do
gem 'rails-assets-adminlte'
end
Paste the following to app/assets/javascripts/application.js
//= require adminlte
Paste the following to app/assets/stylesheets/application.css
*= require adminlte
*= require skin-blue
Create a new file app/assets/stylesheets/custom.css.scss and paste in the following:
#import "bootstrap-sprockets";
#import "bootstrap";
#import "font-awesome-sprockets";
#import "font-awesome";
From the source code of AdminLTE that is downloaded separately which you may get from the link you mentioned in your question, browse to
dist/css/skin
and copy the file skin-blue.css and paste it into vendor/assets/stylesheets/ in your rails project
Then open the starter.html in the source code of AdminLTE and paste the content within the <body> ......... </body> and paste it within the <body> ................ </body> in app/views/layouts/application.html.erb . Modify the body tag to to <body class="skin-blue sidebar-mini">
Install the included gems by running bundle install and then restart rails server by running rails s and you should see the the beautiful template that is AdminLTE
NOTE 1: Maybe there exist other, more efficient ways of doing it. I am not aware though and if anyone knows, I'd be more than glad to learn how it's done. Until then, this works perfectly for me and I hope it saves you some precious time.
NOTE 2: You may of course change the skin to your liking accordingly by changing the stylesheet file you include in the vendor/assets/stylesheets and making the necessary modifications to your app/assets/stylesheets/application.css file. Don't forget to change the class of the <body > .......</body> in your app/views/layouts/application.html.erb file
Don't need to copy 'skin-blue.css' into
vendor/assets/stylesheets/
Paste the following to app/assets/stylesheets/application.css
//= require adminlte/skins/skin-blue
Related
Bootstrap is not loading for me. What am I doing wrong?
application.scss (complete file, nothing else in it)
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
#import "bootstrap-sprockets";
#import "bootstrap";
#import "bootstrap/theme";
Gemfile
gem 'bootstrap', '~> 4.0.0.alpha4'
gem 'bootstrap-sass', '~> 3.1.1'
gem 'bootstrap-sass-extras'
HTML IN HEADER SHOWS (running rails s, in development mode):
<link rel="stylesheet" media="all" href="/stylesheets/application.css">
have you try :
rails generate bootstrap:install static
rails generate bootstrap:install less
This is a little hard to track down with the information you provided. Have you renamed your style files to .scss extention? Make sure you follow the installation instructions in the docs: Bootstrap 4 alpha.
It looks like you are using extra gems you don't need. If you are using the alph 4 version of bootstrap, you only need that in your gem file, you do not need version 3. Make sure include the right dependencies in your application.js file:
//= require jquery
//= require bootstrap-sprockets
as well as:
#import "bootstrap";
in your application.scss file.
You have to configure these files and then make sure you restart your application in order for the changes to take place. Hope this helps!
I am trying to import/activate bootstrap in my Ruby on Rails application. I have added the#import "bootstrap-sprockets"; followed by
#import "bootstrap"; lines to my application.css.scss file and saved it. I also added gem 'bootstrap-sass', '3.3.1' to my Gemfile. I then restarted my server. When I launch the app from my browser, it doesn't appear that the bootstrap sass/css was applied. I can tell because the font never changed and the bootstrap navbar I added don't look correct. I have tried closing out my browser and starting over and trying to launch the link from a different browser, but it doesn't help. Any suggestions?
Inside your gem file:
gem 'bootstrap-sass'
Inside your console
bundle install
app > assets > stylesheets > application.css
#import "bootstrap-sprockets";
#import "bootstrap";
Finally, rename the file from application.css to application.css.scss and restart your server. (Don't forget to add the JavaScript too.)
Simply add bootstrap .css files in assets and same goes for .js files. It should work then without installing gems. It is the best option as you can update your files with new versions whenever you want.
Here is the link https://github.com/Gtar69/games
I got a problem
I had done with procured as below
In Gemfile:
gem "bootstrap-sass"
In terminal
bundle install
In app/assets/stylesheets/application.css
*= require bootstrap
But the local server still can not show bootstrap formation because it said it can not find bootstrap...
Thanks for help~
Follow the below steps:
Rename the file "application.css" to "application.css.scss".
Remove all the contents and only keep the line
#import "bootstrap"; in this file.
Run the server using "rails s" and check to see if things are working for login form.
In-case of problems, comment.
Please always follow the instructions for the gems you are using (in this case, bootstrap-saas).
From its README:
Import Bootstrap styles in app/assets/stylesheets/application.css.scss:
#import "bootstrap-sprockets";
#import "bootstrap";
And also (emphasis mine):
Make sure the file has .css.scss extension (or .css.sass for Sass syntax). If you have just generated a new Rails app, it may come with a .css file instead. If this file exists, it will be served instead of Sass, so remove it:
$ rm app/assets/stylesheets/application.css
There's no application.css.scss in your project. Instead, I find a file app/assets/stylesheets/application.css that you are to remove.
If you follow the documentation, your app will not raise errors and look like this:
I was using both *= require bootstrap line with #import "bootstrap"; and that was the cause of the problem. Removed the *= require bootstrap. The problem gone.
I would recommend reading the instructions at https://github.com/twbs/bootstrap-sass#a-ruby-on-rails. But for solving your problem you should rename application.css to application.css.scss
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.css.scss
Be sure to include #import "bootstrap"; inside the file.
Rails n00b here and I'm just wondering if anyone can help me get the DesignModo Flat UI (free) into the assets pipeline? Do I first have to download and load Bootstrap into the pipeline?
I have found a way to get Bootstrap into rails, which is fairly simple, but I added in the Flat UI files and it just seemed to screw things up. Trying to start over now.
You could use this gem
flatui-rails with javascript
Add to your Gemfile
gem 'flatui-rails'
run bundle install
Add to your application.css
*= require flat-ui
Add to your application.js
//= require flat-ui
flat-ui-rails without javascript
add to your Gemfile
gem "flat-ui-rails"
run bundle install
Add flat-ui to your application.css
*= require flat-ui
or application.css.scss
#import "flat-ui";
I create a new rails project,and add
gem 'bootstrap-sass'
to my Gemfile, then I run bundle install and every things going good. then I add:
/*
*= require bootstrap
*/
in my application.css file, and I write a test,but it doesn't.
and I also try add`#import "bootstrap"; in my hello.css.scss file .but it also doesn't work.
Rollen,
You seem to be mostly there. Sass is in Rails 3.1 by default so you won't need to do anything specific for that. After you add the gem to your Gemfile and do a bundle install your issue is in the application.css file. Typically when using Sass I'd just suggest that you remove the manifest code (all the commenting at the top) from the application.css and rename the application.css to application.css.scss (removing Sprockets from the CSS file). Then add:
#import 'bootstrap'
to the very top of it. That should solve it for you. You'll need to manually add each CSS file you'll want to load into the application.css.scss file since sprockets is gone, but that's typically a good idea anyway since load order in CSS is important for the cascade.
If you want to add the JavaScript features to the framework (which you likely will want to) you'll also want to add
//= require bootstrap
Just above the call to //= require_tree . within app/assets/javascripts/application.js.
Probably a little late to the party, but just in case anyone else stumbles across the question...
This was a small gotcha I Solved by adding #import "bootstrap"; to the top of my application.css file, the renamed the file to application.css.scss
Hope this helps.
https://github.com/rails/sass-rails needs to be there in your Gemfile.
gem 'sass-rails', '~> 3.1'
gem 'bootstrap-sass', '~> 2.0.1'
Remove all the comments at the top of the application.css and rename application.css to either application.sass or application.css.scss depending on how you want to do your css'ing
Then add:
#import 'bootstrap'
This should allow you to start using bootstrap, providing you have indeed included the bootstrap-sass gem correctly and ran bundle install afterwards.