Repository: lewagon/rails-stylesheets
Branch: master
Commit: cfdde8a099b9
Files: 13
Total size: 7.6 KB

Directory structure:
gitextract_209swtos/

├── LICENSE
├── README.md
├── application.scss
├── components/
│   ├── _alert.scss
│   ├── _avatar.scss
│   ├── _form_legend_clear.scss
│   ├── _index.scss
│   └── _navbar.scss
├── config/
│   ├── _bootstrap_variables.scss
│   ├── _colors.scss
│   └── _fonts.scss
└── pages/
    ├── _home.scss
    └── _index.scss

================================================
FILE CONTENTS
================================================

================================================
FILE: LICENSE
================================================
© 2023 La Loco SAS, head of Le Wagon Group - All rights reserved


================================================
FILE: README.md
================================================
First of all make sure you've created a rails app

```bash
rails new APP_NAME -d postgresql
```

## Setup

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

```ruby
# 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):

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

```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:

```bash
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:

```bash
bundle install
rails generate simple_form:install --bootstrap
```

Update your layout to use the correct stylesheet tag:

```erb
<!-- 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](https://getbootstrap.com/docs/5.1/customize/sass/#color-contrast) which makes sure that the contrast between the text and the background color meets accessibility standards.

## Bootstrap JS

Install Bootstrap JS:
```bash
importmap pin bootstrap
```

Import Bootstrap:

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

Add the Bootstrap JS files to your manifest:

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

```rb
# 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.

```scss
// 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:

```scss
// 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:

```scss
// 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](https://github.com/lewagon/awesome-navbars/blob/master/templates/_navbar_wagon_without_login.html.erb)
- [version with login](https://github.com/lewagon/awesome-navbars/blob/master/templates/_navbar_wagon.html.erb)

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.


================================================
FILE: application.scss
================================================
// Graphical variables
@import "config/fonts";
@import "config/colors";
@import "config/bootstrap_variables";

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

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


================================================
FILE: components/_alert.scss
================================================
.alert {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1000;
}


================================================
FILE: components/_avatar.scss
================================================
.avatar {
  width: 40px;
  border-radius: 50%;
}
.avatar-large {
  width: 56px;
  border-radius: 50%;
}
.avatar-bordered {
  width: 40px;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  border: white 1px solid;
}
.avatar-square {
  width: 40px;
  border-radius: 0px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  border: white 1px solid;
}


================================================
FILE: components/_form_legend_clear.scss
================================================
// In bootstrap 5 legend floats left and requires the following element
// to be cleared. In a radio button or checkbox group the element after
// the legend will be the automatically generated hidden input; the fix
// in https://github.com/twbs/bootstrap/pull/30345 applies to the hidden
// input and has no visual effect. Here we try to fix matters by
// applying the clear to the div wrapping the first following radio button
// or checkbox.
legend ~ div.form-check:first-of-type {
  clear: left;
}


================================================
FILE: components/_index.scss
================================================
// Import your components CSS files here.
@import "alert";
@import "avatar";
@import "form_legend_clear";
@import "navbar";


================================================
FILE: components/_navbar.scss
================================================
.navbar-lewagon {
  justify-content: space-between;
  background: white;
}

.navbar-lewagon .navbar-collapse {
  flex-grow: 0;
}

.navbar-lewagon .navbar-brand img {
  width: 40px;
}


================================================
FILE: config/_bootstrap_variables.scss
================================================
// This is where you override default Bootstrap variables
// 1. Find all Bootstrap variables that you can override at the end of each component's documentation under the `Sass variables` anchor
// e.g. here are the ones you can override for the navbar https://getbootstrap.com/docs/5.3/components/navbar/#sass-variables
// 2. These variables are defined with default value (see https://robots.thoughtbot.com/sass-default)
// 3. You can override them below!

// General style
$font-family-sans-serif: $body-font;
$headings-font-family:   $headers-font;
$body-bg:                $light-gray;
$font-size-base:         1rem;

// Colors
$body-color: $gray;
$primary:    $blue;
$success:    $green;
$info:       $yellow;
$danger:     $red;
$warning:    $orange;

// Buttons & inputs' radius
$border-radius-sm:            .0625rem;
$border-radius:               .125rem;
$border-radius-lg:            .25rem;
$border-radius-xl:            .5rem;
$border-radius-xxl:           1rem;

// Override other variables below!


================================================
FILE: config/_colors.scss
================================================
// Define variables for your color scheme

// For example:
$red: #FD1015;
$blue: #0D6EFD;
$yellow: #FFC65A;
$orange: #E67E22;
$green: #1EDD88;
$gray: #0E0000;
$light-gray: #F4F4F4;


================================================
FILE: config/_fonts.scss
================================================
// Import Google fonts
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700|Work+Sans:400,700&display=swap');

// Define fonts for body and headers
$body-font: "Work Sans", "Helvetica", "sans-serif";
$headers-font: "Nunito", "Helvetica", "sans-serif";

// To use a font file (.woff) uncomment following lines
// @font-face {
//   font-family: "Font Name";
//   src: font-url('FontFile.eot');
//   src: font-url('FontFile.eot?#iefix') format('embedded-opentype'),
//        font-url('FontFile.woff') format('woff'),
//        font-url('FontFile.ttf') format('truetype')
// }
// $my-font: "Font Name";


================================================
FILE: pages/_home.scss
================================================
// Specific CSS for your home-page


================================================
FILE: pages/_index.scss
================================================
// Import page-specific CSS files here.
@import "home";