Adding Bootstrap themes in Rails

Adding Bootstrap themes in Rails

...............................................................................................................

Link::::: https://medium.com/@yli0607x/how-to-use-bootstrap-themes-on-ruby-on-rails-in-5-minutes-8e6f9542f6d8

...............................................................................................................

........................................................................................................................................................................................................................... .................................................................

Step 1

Create a new project called grayscale using rails and navigate into the project folder

rails new grayscale
cd grayscale

Step 2

2. Open the project in a text editor and insert the following code into the header section of app/views/layouts/application.html.erb

Step 3

3. Install Bootstrap and Jquery-rails gems

Add the following gems into your Gemfile:

gem 'jquery-rails'
gem 'bootstrap-sass'

As Javascript in Bootstrap is dependent on JQuery, you need to include the jquery-rails gem as well.

Step4

4. Rename app/assets/stylesheets/application.css to /application.css.scss

Import Bootstrap styles in /application.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";

We are using sass syntax@import because it helps optimize the performance of your website by compiling the CSS into one file that is served to the browser.

CSS has an import option that lets you split your CSS into smaller, more maintainable portions. The only drawback is that each time you use @import in CSS it creates another HTTP request. Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.

Step 5

5. Add Bootstrap dependencies and Bootstrap to your app/assets/javascripts/application.js

//= require jquery3
//= require bootstrap

Step 6

6. Runbundle installor you can be extra lazy and just run bundle

...........................................................................................................................................................................................................................                                                 ..................................................................
                                                                         Step 7

7. Open the live preview of Grayscale theme https://blackrockdigital.github.io/startbootstrap-grayscale/ and right click into View Page Source

...........................................................................................................................................................................................................................                                                 ..................................................................
                                                                         Step 8

8. Create a controller and an index page in the terminal
rails generate controller grayscale index
...........................................................................................................................................................................................................................                                                 ..................................................................
                                                                         Step 9
9. Go to text editor and edit app/views/layouts/application.html.erb
Insert the following section of the code from step 7 accordingly
<!-- Bootstrap core CSS -->
<!-- Custom fonts for this template -->
<!-- Custom styles for this template -->
<!-- Navigation -->
<%= yield %>
<!-- Footer -->
<!-- Bootstrap core JavaScript -->
<!-- Plugin JavaScript -->
<!-- Custom scripts for this template -->
Anything in app/views/layouts/application.html.erbwill be displayed across all pages.
...........................................................................................................................................................................................................................                                                 ..................................................................
                                                                         Step 10
10. Edit app/views/grayscale/index.html.erb
Insert the all sections from Headerto Contact Sectionaccordingly
<!-- Header -->
|
|
|
<!-- Contact Section -->
...........................................................................................................................................................................................................................                                                 ..................................................................
                                                                         Step 11
11. Rename some routes
Since I didn’t download the image, vendor, css and js file locally, I will need to reroute some path in order for the page to display correctly.
Every time there isimg/, vender/, css/or js/ , add http://blackrockdigital.github.io/startbootstrap-grayscale/ in front of the path.

...........................................................................................................................................................................................................................                                                 ..................................................................
                                                                         Step 12
12. Finally, we can run rails s to start the server and open http://localhost:3000/grayscale/index in the browser.
The result should look like this:

Search This Blog

Dwijendra Parashar

Adding Bootstrap themes in Rails

Comments

Post a Comment

Popular posts from this blog

tainer question

Rails 7 Features :: Comparison with Rails 6 and Rails 5

Deployment of rails application at linux