First of all make sure you've created a rails app

rails new APP_NAME -d postgresql

Setup

Rails 8 uses Propshaft by default, but we need Sprockets for SCSS compilation. Update your Gemfile:

# Gemfile

# REMOVE this line:
# gem "propshaft"

# ADD these gems:
gem "sprockets-rails"
gem "sassc-rails"
gem "bootstrap", "~> 5.3"
gem "autoprefixer-rails"
gem "font-awesome-sass", "~> 6.1"
gem "simple_form"

Create the Sprockets manifest file (Rails 8 doesn't have this by default):

mkdir -p app/assets/config
touch app/assets/config/manifest.js

// app/assets/config/manifest.js
//= link_tree ../images
//= link_tree ../../javascript .js
//= link_directory ../stylesheets .css

Then replace Rails' stylesheets by Le Wagon's stylesheets:

rm -rf app/assets/stylesheets
curl -L https://github.com/lewagon/rails-stylesheets/archive/rails-8.zip > stylesheets.zip
unzip stylesheets.zip -d app/assets && rm stylesheets.zip && mv app/assets/rails-stylesheets-rails-8 app/assets/stylesheets

In your terminal, generate Simple Form Bootstrap config:

bundle install
rails generate simple_form:install --bootstrap

Update your layout to use the correct stylesheet tag:

<!-- app/views/layouts/application.html.erb -->
<!-- replace this line -->
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
<!-- with this line -->
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>

On Ubuntu/Windows: if the unzip command returns an error, please install it first by running sudo apt install unzip.

Note that when you update the colors in config/colors, the (text) color of your buttons might change from white to black. This is done automatically by Bootstrap using the WCAG 2.0 algorithm which makes sure that the contrast between the text and the background color meets accessibility standards.

Bootstrap JS

Install Bootstrap JS:

importmap pin bootstrap

Import Bootstrap:

// app/javascript/application.js
import "bootstrap"
import "@popperjs/core"

Add the Bootstrap JS files to your manifest:

// app/assets/config/manifest.js
//= link_tree ../images
//= link_tree ../../javascript .js
//= link_directory ../stylesheets .css
//= link popper.js
//= link bootstrap.min.js

# config/importmap.rb

# replace these lines:
# pin "bootstrap" # @5.3.2
# pin "@popperjs/core", to: "@popperjs--core.js" # @2.11.8
# with this:
pin "bootstrap", to: "bootstrap.min.js", preload: true
pin "@popperjs/core", to: "popper.js", preload: true

Adding new .scss files

Look at your main application.scss file to see how SCSS files are imported. There should not be a *= require_tree . line in the file.

// app/assets/stylesheets/application.scss

// Graphical variables
@import "config/fonts";
@import "config/colors";
@import "config/bootstrap_variables";

// External libraries
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

// Your CSS partials
@import "components/index";
@import "pages/index";

For every folder (components, pages), there is one _index.scss partial which is responsible for importing all the other partials of its folder.

Example 1: Let's say you add a new _contact.scss file in pages then modify pages/_index.scss as:

// pages/_index.scss
@import "home";
@import "contact";

Example 2: Let's say you add a new _card.scss file in components then modify components/_index.scss as:

// components/_index.scss
@import "card";

Navbar template

Our layouts/_navbar.scss code works well with our home-made ERB template which you can find here:

• version without login
• version with login

Don't forget that *.html.erb files go in the app/views folder, and *.scss files go in the app/assets/stylesheets folder. Also, our navbars have a link to the root_path, so make sure that you have a root to: "controller#action" route in your config/routes.rb file.