lewagon/rails-stylesheets

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

rails new -j webpack APP_NAME

Setup

Ensure you have Bootstrap and it's dependencies:

yarn add bootstrap @popperjs/core

Ensure you have the following gems in your Rails Gemfile:

# Uncomment this gem already present in your Gemfile
gem "sassc-rails"

# Add those ones
gem "autoprefixer-rails"
gem "font-awesome-sass", "~> 6.1"
gem "simple_form"

Add this line to assets.rb:

# Add additional assets to the asset load path.
Rails.application.config.assets.paths << Rails.root.join("node_modules")

In your terminal, generate Simple Form Bootstrap config:

bundle install
rails generate simple_form:install --bootstrap

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

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

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

Import Bootstrap:

// app/javascript/packs/application.js
import "bootstrap"

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/scss/bootstrap"; // from the node_modules
@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.