Week 12 Styling Rails with Bootstrap - Code-the-Dream-School/rails-guidebook GitHub Wiki

Week Topic Learning Objectives Key Resources
12 Styling Rails with Bootstrap
  • Learn the use of the Bootstrap CSS styling framework
  • Learn how to integrate Bootstrap with Rails
  • Understand basic Bootstrap styles for navbars, cards, responsive containers, etfc.
  • Practice the use of these styles
  • Learn about modal windows
  • Use images within a Rails application
  • Use custom fonts within a Rails application
 Lesson Materials

Coding Assignment

Lesson 11 Outline

In this lesson, students will style their Ruby on Rails application using Bootstrap and Font Awesome. They will also implement responsive design and interactive elements such as navigation bars, cards, alerts, and modal windows.

Key Learning Objectives:

  1. Bootstrap Installation and Configuration: Students will install and configure Bootstrap in their Rails application and verify the changes.
  2. Styling Elements: Students will use Bootstrap classes to style backgrounds, banners, navigation bars, links, buttons, and tables.
  3. Responsive Design: Students will create a responsive grid of cards for displaying orders.
  4. Alert Styling: Students will integrate Bootstrap alert divs for flash messages.
  5. Font Awesome Integration: Students will add Font Awesome glyphs to their application.
  6. Modal Windows: Students will optionally implement modal windows for delete confirmations.

Checklist:

  1. Install and Configure Bootstrap:

    • Run bin/bundle add bootstrap
    • Update Gemfile and run bundle install
    • Rename application.css to application.scss and add @import "bootstrap";
    • Update app/javascript/application.js and config/importmap.rb
    • Edit config/initializers/assets.rb
    • Restart the server and verify Bootstrap is active

  2. Change Background Color:

    • Add light color background in application.scss
    • Wrap the yield statement in a container-fluid div in application.html.erb
    • Verify color change in the browser

  3. Add a Banner:

    • Create a banner with title and text using Bootstrap’s jumbotron equivalent
    • Verify the banner is displayed correctly

  4. Add an Image to the Banner:

    • Store an image in app/assets/images
    • Update application.scss to set the image as the background for the banner
    • Verify the image appears in the banner

  5. Add and Apply a Font:

    • Create a fonts directory and add a font file
    • Update config/application.rb and application.scss to include the font
    • Verify the font is applied to the banner

  6. Add a Navigation Bar:

    • Create a navigation bar with dropdown menus for Customers and Orders
    • Verify the navigation bar and dropdowns work correctly

  7. Style Links, Buttons, and Tables:

    • Apply Bootstrap classes to links and buttons in the Customers index view
    • Optionally style other links and buttons
    • Style tables using Bootstrap classes
    • Verify the styles are applied correctly

  8. Display Orders as Cards in a Grid:

    • Create a responsive grid of cards for Orders
    • Ensure cards stack responsively and include necessary information and buttons
    • Verify the cards display correctly and buttons are functional

  9. Style Alerts:

    • Replace existing alert styling with Bootstrap danger and success alerts
    • Add alert divs to the layout and test with flash messages

  10. Add Font Awesome Glyphs:

    • Install Font Awesome and add glyphs to the application
    • Verify glyphs are displayed correctly

  11. Implement Modal Windows (Optional):

    • Optionally implement modal windows for delete confirmations
    • Ensure modals function as expected and integrate with delete actions

  12. Get Creative (Optional):

    • Apply additional Bootstrap features or styling to enhance the application
    • Ensure all changes are visually appealing and functional

  13. Submit Work:

    • Follow the submission process for the lesson11 branch
⚠️ **GitHub.com Fallback** ⚠️