Demo 9: Adding Bootstrap Styling to Views
▶️ Play from the beginning (~40 minutes)
In this demonstration, I will explain how to style Rails views using Bootstrap:
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.
Quickly prototype your ideas or build your entire app with our Sass variables
and mixins, responsive grid system, extensive prebuilt components, and
powerful plugins built on jQuery.
To illustrate how to use Bootstrap, I will continue to evolve the project from the previous Rails demos.
▶️ 1. Install LTS Version of Node
IMPORTANT! If you downloaded the file Vagrantfile and the file provisioner.sh after January 2, 2019, you can skip the steps in this section.
The Bootstrap gem requires a newer version of Node than the one currently installed on the VM. Thus, we will reconfigure the system to use the Node Version Manager (NVM) to manage our Node version, and we will install the current Long-Term Support (LTS) version of Node.
- ▶️ Remove the version of Node installed by default (see
sudo apt-get remove --purge -y nodejs).
- ▶️ Prep: Review the README page for NVM (see https://github.com/creationix/nvm).
- ▶️ Install NVM (see
curl -o- ... | bash).
- ▶️ Make it so the NVM command will be available (see
source ~/.bashrc).
- ▶️ Install the latest LTS release of Node (see
nvm install --lts)
- ▶️ Test and debug: Check to make sure the correct version of Node is being used (see
which node and which nodejs).
▶️ 2. Install Bootstrap Gem
- ▶️ Prep: Launch the web app, giving attention to the current style of the pages.
- ▶️ Prep: Review the Boostrap Gem README (see https://github.com/twbs/bootstrap-rubygem).
- ▶️ Add
bootstrap and jquery-rails to the Gemfile, and install the gems (see bundle install).
- ▶️ Rename and update the
application.scss file.
- ▶️ Update the
application.js file.
- ▶️ Test and debug: Restart the web server, and inspect how the style of the web app pages have changed.
- ▶️ Check in changes: Stage, commit, and push these changes to the Git repo (see
git add -A, git commit ..., and git push).
▶️ Check-in Changes: changeset, snapshot
▶️ 3. Add Bootstrap Styling to a View
- ▶️ Paste into a view the example page skeleton from Bootstrap examples.
- ▶️ Paste example-specific CSS into the
application.scss file.
- ▶️ Test and debug: Restart the web server, and inspect how the web app page has changed.
- ▶️ Update the page body to something appropriate. Test and debug as necessary.
- ▶️ Update the
navbar-brand element in the view. Test and debug as necessary.
- ▶️ Update the Home navigation link to use the Rails helper
link_to. Test and debug as necessary.
- ▶️ Style the Home navigation link to be “active”. Test and debug as necessary.
- ▶️ Update another navigation link to use the Rails helper
link_to. Test and debug as necessary.
- ▶️ Comment out the remaining unwanted navigation-bar elements. Test and debug as necessary.
- ▶️ Paste the Home view code into another view, update the active navigation link, and update the page body to something appropriate. Test and debug as necessary.
- ▶️ Check in changes: Stage, commit, and push these changes to the Git repo (see
git add -A, git commit ..., and git push).
▶️ Check-in Changes: changeset, snapshot
▶️ 4. Move Navigation Bar into application.html.erb
- ▶️ Prep: In the browser, review the appearance of the various pages, giving special attention to the navigation bar.
- ▶️ Remove the navigation bar code from the views, moving it into the
application.html.erb file. Test and debug as necessary. Note that there will be an issue with how the active navigation link is set.
- ▶️ Add a method
active_class to ApplicationHelper that returns the string active if a link path is to the current page (see current_page?).
- ▶️ Update the navigation bar to use the
active_class method to style the appropriate navigation link as active. Test and debug as necessary.
- ▶️ Check in changes: Stage, commit, and push these changes to the Git repo (see
git add -A, git commit ..., and git push).
▶️ Check-in Changes: changeset, snapshot