I am working on my first ever Rails 4 app and have to integrate FlatDream theme in it. So far I could not find some easy to use and decent tutorial to stylized a Rails app based on a themeForest theme. Can you guide some pointers?
Here are the steps.
Install gem "bootstrap-sass" if you don't already have it. You can install it by adding the following line to your gem file.
gem "bootstrap-sass"
bundle install
Next create a file named custom.css.scss (app/assets/stylesheets) and add the following two line to it
#import "bootstrap";
#import "bootstrap-responsive";
Next add the following to app/assets/javascript/application.js
//= require bootstrap
Now you need to convert your your css files of your theme to scss. There are converters which can help you with this. Google is your best friend here. Put the scss files image files etc at right places. If the theme uses some custom javascript you need to add it to your project in standard manner.
You are good to go.
Related
How can I use a theme from Bulmaswatch in my rails app? I'm currently using the bulma-rails gem. Bulmaswatch recommend using their CDN but how to get it work with the asset pipeline? What's the simplest easier way to get it done?
(Supposition is you have routes, controllers, views sorted)
Add the bulma gem (cdn not needed)
Add any number of Boostrap gems that play well with sass
Bundle
Add #import "bulma"; into application file
Restart the server
IMHO the easiest way is:
Under app/assets/stylesheets delete application.css and create a new file called application.css.scss
Then in that file copy paste the code from your favorite theme on bulmaswatch.
There you go, you've got a unique theme working in bulma.
This question is somewhat similar to: How to customize bulma variables in rails
Rails 4.2.4
Ruby 2.1.2
I am trying to use twitter-bootstrap-rails.
I would like to use it by the same way I am using jquery-rails
assets/applications.js
//= require jquery
In this case I don't need to copy any jquery.js or jquery.css files to my project because Rails fetches it for me form gem.
The different situation is with twitter-bootstrap-rails.
In the guide
The Twitter Bootstrap Rails gem can provide the Bootstrap stylesheets
in two ways.
The plain CSS way is how Bootstrap is provided on the official
website.
The Less way provides more customization options, like changing theme
colors, and provides useful Less mixins for your code, but requires
the Less gem and the Ruby Racer Javascript runtime (not available on
Microsoft Windows).
Seems the first way is more suitable for me. But in this case I should use the generator rails generate bootstrap:install static before to use any twitter-bootstrap .js or .css files. The generator fetches the files into assets folder of my project.
So I am looking for a way how to use twitter-bootstrap-rails .js and .css files in my project without copying them into my project folder. I just would like to add twitter-bootstrap-rails files just putting for instance line //= require bootstrap into application.js.
Thanks a lot.
Instead of using twitter-bootstap-rails, use bootstrap-sass.
In your application.js, add the following:
//= require bootstrap-sprockets
change application.css to application.scss and add:
#import "bootstrap-sprockets";
#import "bootstrap";
and you're good to go. Oh. Just please don't forget to restart your server.
I'm using 'bootstrap-sass' and 'simple_form' gems on Rails 4. When I run this generator: rails g simple_form:install --bootstrap I get a message that says:"Be sure to have a copy of the Bootstrap stylesheet available on your
application, you can get it on http://twitter.github.com/bootstrap."
Why do I need a copy of the Bootstrap stylesheet and what is THE stylesheet? Doesn't the 'bootstrap-sass' gem handle that? I went to the link provided but got a 404 error. If anyone can kindly explain what I need to do it would be greatly appreciated! I am fairly new to Rails, so apologize in advance if it's not a very good question. Thank you!
Here is the real link to Bootstrap. Yes, the bootstrap-sass gem will include Bootstrap's javascript, CSS, and fonts into your application, just make sure you include them.
In your javascripts/application.js (docs)
//= require bootstrap
Create a file, say master.css.scss and import the Bootstrap CSS and fonts like so (docs):
#import "bootstrap";
When you specified the extension --bootstrap when installing simple_form, you essentially said, hey I have bootstrap and want my forms to be styled the way bootstrap styles them. It will also add the appropriate HTML to the form and inputs to adhere to Bootstrap. So it automatically generated the file config/initializers/simple_form_bootstrap.rb. Now when you create a form using simple_form_for (please read their docs..they are very extensive), it will be styled like Bootstrap.
So, to sum it up, you need Bootstrap if you want your forms to be styled and set up, with Bootstrap html and css, like Bootstrap forms. If you didn't want Bootstrap, you could have just ran the simple_form generator like this: rails generate simple_form:install.
when you ran this code:
rails g simple_form:install --bootstrap
you are integrating simple_form with bootsrap. and therefore, what the message is telling you is to add bootstrap to your stylesheets folder of your application. The stylesheet folder is where you keep your css files. Here is it's directory structure:
app/assets/stylesheets
bootstrap download comes with css, javascripts, and fonts folders. the bootstrap files inside the css folder will go under app/assets/stylesheets.
of course, if you are not using bootstrap in your project, then you are running the wrong generator. you should simply run:
rails generate simple_form:install
and not append --bootstrap to the generator.
I'm switching from PHP to Ruby on Rails and I'm loving it, the only thing is I'm so used to Twitter Bootstrap for most of my designs and now I feel crippled without it, I followed some tutorials like adding bootstrap-sass and what not to my Gemfile, but I still appear to be missing important things like input-block-level I'm just curious if there is an updated version or a easier tutorial to follow? Thanks.
AFAIK, the easiest and most rails way to integrate the twitter bootstrap to rails is via
twitter-bootstrap-rails gem, they have a pretty good documentation too.
check these screen casts, and this (premium) to get an idea.
and welcome to Rails :)
To to the input-block-level in ERB do something like this
"input-block-level" => "hello_world"
Same as you, I'm coming from PHP and love RoR ;)
With bootstrap you need to import it in your manifest. Read a bit about the assets pipeline in RoR guide.
To import bootstrap, create a file in your app/assets/stylesheets directory, with the name you want, but with the extension .css.scss, and place in it the following line:
#import "bootstrap";
Also if you need to use the javascript helpers from bootstrap, you need to add the following line in your app/assets/javascript/application.js file:
//= require bootstrap
Just download the bootstrap ( CSS, JS ) file and make the updation in that file at regular interval from his official site : Bootstrap
For Bootstrap Tutorials : Click Here
Or you can refer the sample code for reference, because sometimes we dnt get the way to implement such functionality like tooltip.
I've got a Ruby on Rails app running with Bootstrap, which I installed using the gem twitter-bootstrap-rails.
I'd now like to integrate a new Bootswatch theme, but I'm having trouble figuring out what to do.
There are four possible downloads for each theme - a bootstrap.css file, a bootstrap.min.css file, a variables.less file, and a bootswatch.less. My question is: do I need to download and add them ALL to my ~/app/assets/stylesheets folder? or do I just need a subset of those? Currently inside ~/app/assets/stylesheets are just two files: application.css and boostrap_and_overrides.css.less. LESS really throws me off here so I'm totally confused with how it works and what I need to do to add new css files with this setup. Any help is appreciated.
You only need to download the bootstrap.css file, and rename it. The bootstrap.min.css is the same as the css file just a minified version of it. Less is just another way of writing css and accessing each property differently. Check out less. Add css file and begin integrating into html, also point html to new stylesheet.
Here's a twitter bootstrap gem for easy Bootswatch theme integration/customization for rails:
https://github.com/scottvrosenthal/twitter-bootswatch-rails