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";
Related
Is there a way I can set up ReactJS in Rails without using preexisting gems, such as react-rails?
Just like any javascript libs, you can just download the source and copy it into your javascripts folder (preferably vendor/assets/javascripts). And then in application.js:
//= require_tree ../../../vendor/assets/javascripts/.
I am using the fullcalendar rails gem. I just downloaded the zip file for the calendar which contains the js and css files for the fullcalendar plugin. For all the tutorials on the fullcalendar gem I have not seen anyone doenload the zip file and use these files in their code (they use the CDN links but those don't appear to be working) where is the best folder to place these zipped assets into so that I can get the desired results on my calendar?
If you use the gem you do not need download any file.
You have to:
install gem
add in the application.js file the instruction //= require fullcalendar
And to can use it.
Read the README of the gem https://github.com/bokmann/fullcalendar-rails
Because you also need moment.js
Don't install from the zip file.
Follow the instructions at https://github.com/bokmann/fullcalendar-rails#installation for installation; you will have an easy time managing the dependencies.
The steps as specified there are:
Add gem 'fullcalendar-rails' to Gemfile
Add gem 'momentjs-rails' to Gemfile if you want to use 2.1.1.0 or higher version of fullcalendar-rails gem.
Run bundle install to install the gems.
Add //= require fullcalendar (and //= require moment) in application.js
Add *= require full calendar in application.css
I have build a Ruby on rails app.I want to use polymer with my ruby on rails app. Cam anybody suggest some good resources to learn polymer with rails ?
Is it efficient to use polymer with ruby on rails ?
Please also suggest other better options than polymer, if any ?
I am using bower, so I expect you already have bower setup on your system.
(brew install node && npm install bower)
Set up you gems
gem 'bower-rails'
gem 'emcee'
bundle install
rails g bower_rails:initialize
rails g emcee:install
Setup your bower file. Below is what mine looks like:
asset 'angular'
asset 'angular-route'
asset 'angular-resource'
asset 'angular-mocks'
asset 'webcomponentsjs'
asset 'polymer', github: 'Polymer/polymer'
asset 'polymer-core-elements', github: 'Polymer/core-elements'
asset 'polymer-paper-elements', github: 'Polymer/paper-elements'
asset 'platform'
# Voice Synthesis and Recognition
asset 'voice-elements'
Figure out the ones you need and delete the rest.
rake bower:install
To download the components but take note that the files will be saved in vendor/assets/bower_components and not vendor/assets/components expected by emcee. So you will need to make symbolic link.
Setup symbolic links
first remove components i.e. rm -rf vendor/assets/components
then set up the symlink i.e. ln -s vendor/assets/bower_components vendor/assets/components
Now setup your assets
# app/assets/components/application.html
*= require polymer/polymer
# app/assets/javascripts/application.js
//= require angular/angular
//= require angular-route/angular-route
//= require angular-resource/angular-resource
//= require webcomponentsjs/webcomponents
//= require platform/platform
(Please note that I only included all I am using for testing. As stated before, remove those you don't need).
Just some house cleaning you jump off to start trying things out. Include Bower components in rake assets path.
# config/application.rb
config.assets.paths << Rails.root.join("vendor","assets","bower_components")
And that is about it for setup. Jump on it and start using it.
Include html import tag in your layout file
= html_import_tag "application", "data-turbolinks-track" => true
And call a sample polymer in your view
# sample.html.haml
================
%paper-tabs{:selected => "0", :scrollable => ""}
%paper-tab Skills
%paper-tab Experiences
%paper-tab Education
Ref
http://angular-rails.com/bootstrap.html
http://www.akitaonrails.com/2014/06/29/usando-polymer-com-rails#.VHcoW2SsV81
On deep searching on Google. I have found that 'emcee' is the best to use polymer with rails.
following are the options :-
nevir/polymer-rails
alchapone/polymer-rails
ahuth/emcee
also check- http://joshhuckabee.com/getting-started-polymer-ruby-rails
I've built a bower package for dealing with rails forms with polymer. It my come in handy, especially if you're going with to be building any kind of ajax forms or using nested attributes.
https://github.com/hobberwickey/polymer-rails-forms
To answer your more general question though, I've been working with Polymer and both Rails / Sinatra for a while now and it's a great tool for building out the front end of your application without relying heavily on erb / haml or other server-side templating.
You can use polymer-rails and polymer-elements-rails.
https://github.com/alchapone/polymer-elements-rails
https://github.com/alchapone/polymer-rails
I was first trying to use web components with bower-rails and emcee.
But I noticed that bower-rails isn't necessary, you just need to configure .bowerrc and bower.json then run bower install.
Also, emcee is no longer active which forces you to use an older version of sprockets.
It turns out polymer-rails has the same functionality as emcee.
Here is my current setup
Gemfile
gem 'polymer-rails'
install and initialize
bundle install
rails g polymer:install
app/views/layouts/application.html.erb
<html>
<head>
...
<%= html_import_tag 'application'%>
...
Download the bower.json file from elements.polymer-project.org and put it in the root of your app then run the command
bower install
Now your components should be in vendor/assets/components. Find all the .html files to include in the manifest. Some of the .html files are not the same name as the directory so it is a little tedious.
app/assets/components/application.html.erb
//= require polymer/polymer
//= require paper-scroll-header-panel/paper-scroll-header-panel
//= require paper-toolbar/paper-toolbar
//= require paper-tabs/paper-tabs
//= require paper-drawer-panel/paper-drawer-panel
//= require paper-icon-button/paper-icon-button
//= require iron-icons/iron-icons
//= require paper-card/paper-card
//= require paper-button/paper-button
...
Now make sure sprockets loads the assets
config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'components', '*')
Here is an example of how to use a component
<paper-card heading="Paper Card Example" image="<%= image_path 'example.jpg' %>">
<div class="card-content">This is an example of cards with polymer</div>
<div class="card-actions">
<paper-button raised>OK</paper-button>
</div>
</paper-card>
You can use polymer-elements-rails which has a lot of the components already and you can skip the bower.json, bower install, and load assets steps. The only problem is I had a hard time finding out what the require paths were and some of the components were missing (like google-apis). Hope this helps anyone trying to use polymer with rails!
I am trying to contribute to the opensource project jquery-datatables-rails. But it puzzles me as how it works. I have basic understanding of how to create gem. It seems like the project just simplifies the path references but nothing more. The four steps listed to install are
Add to the assets group in your Gemfile:
gem 'jquery-datatables-rails'
Install the gem:
bundle install
Add the JavaScript to application.js:
//= require dataTables/jquery.dataTables
Add the stylesheets to application.css:
*= require dataTables/jquery.dataTables
But I don't understand how Rails knows where to find dataTables folder and why we use jquery.dataTables to reference the file/class. The code is easy to understand, but the file organization confuses me so much. Is there any writing on topics related to my confusion?
Thanks.
Update:
Just found this great documentation on Rails Engine: http://edgeguides.rubyonrails.org/engines.html
By default Rails asset pipeline searches for the files in app/assets/, lib/assets, and vendor/assets of the Rails application. But this gem is a Rails engine, and it adds path of its own assets to default assets paths. It has its own vendor/assets.
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.