├── pages ├── _home.scss └── _index.scss ├── LICENSE ├── components ├── _alert.scss ├── _index.scss ├── _navbar.scss ├── _avatar.scss └── _form_legend_clear.scss ├── config ├── _colors.scss ├── _fonts.scss └── _bootstrap_variables.scss ├── application.scss └── README.md /pages/_home.scss: -------------------------------------------------------------------------------- 1 | // Specific CSS for your home-page 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | © 2023 La Loco SAS, head of Le Wagon Group - All rights reserved 2 | -------------------------------------------------------------------------------- /pages/_index.scss: -------------------------------------------------------------------------------- 1 | // Import page-specific CSS files here. 2 | @import "home"; 3 | -------------------------------------------------------------------------------- /components/_alert.scss: -------------------------------------------------------------------------------- 1 | .alert { 2 | position: fixed; 3 | bottom: 16px; 4 | right: 16px; 5 | z-index: 1000; 6 | } 7 | -------------------------------------------------------------------------------- /components/_index.scss: -------------------------------------------------------------------------------- 1 | // Import your components CSS files here. 2 | @import "alert"; 3 | @import "avatar"; 4 | @import "form_legend_clear"; 5 | @import "navbar"; 6 | -------------------------------------------------------------------------------- /config/_colors.scss: -------------------------------------------------------------------------------- 1 | // Define variables for your color scheme 2 | 3 | // For example: 4 | $red: #FD1015; 5 | $blue: #0D6EFD; 6 | $yellow: #FFC65A; 7 | $orange: #E67E22; 8 | $green: #1EDD88; 9 | $gray: #0E0000; 10 | $light-gray: #F4F4F4; 11 | -------------------------------------------------------------------------------- /components/_navbar.scss: -------------------------------------------------------------------------------- 1 | .navbar-lewagon { 2 | justify-content: space-between; 3 | background: white; 4 | } 5 | 6 | .navbar-lewagon .navbar-collapse { 7 | flex-grow: 0; 8 | } 9 | 10 | .navbar-lewagon .navbar-brand img { 11 | width: 40px; 12 | } 13 | -------------------------------------------------------------------------------- /application.scss: -------------------------------------------------------------------------------- 1 | // Graphical variables 2 | @import "config/fonts"; 3 | @import "config/colors"; 4 | @import "config/bootstrap_variables"; 5 | 6 | // External libraries 7 | @import "bootstrap"; 8 | @import "font-awesome"; 9 | 10 | // Your CSS partials 11 | @import "components/index"; 12 | @import "pages/index"; 13 | -------------------------------------------------------------------------------- /components/_avatar.scss: -------------------------------------------------------------------------------- 1 | .avatar { 2 | width: 40px; 3 | border-radius: 50%; 4 | } 5 | .avatar-large { 6 | width: 56px; 7 | border-radius: 50%; 8 | } 9 | .avatar-bordered { 10 | width: 40px; 11 | border-radius: 50%; 12 | box-shadow: 0 1px 2px rgba(0,0,0,0.2); 13 | border: white 1px solid; 14 | } 15 | .avatar-square { 16 | width: 40px; 17 | border-radius: 0px; 18 | box-shadow: 0 1px 2px rgba(0,0,0,0.2); 19 | border: white 1px solid; 20 | } 21 | -------------------------------------------------------------------------------- /components/_form_legend_clear.scss: -------------------------------------------------------------------------------- 1 | // In bootstrap 5 legend floats left and requires the following element 2 | // to be cleared. In a radio button or checkbox group the element after 3 | // the legend will be the automatically generated hidden input; the fix 4 | // in https://github.com/twbs/bootstrap/pull/30345 applies to the hidden 5 | // input and has no visual effect. Here we try to fix matters by 6 | // applying the clear to the div wrapping the first following radio button 7 | // or checkbox. 8 | legend ~ div.form-check:first-of-type { 9 | clear: left; 10 | } 11 | -------------------------------------------------------------------------------- /config/_fonts.scss: -------------------------------------------------------------------------------- 1 | // Import Google fonts 2 | @import url('https://fonts.googleapis.com/css?family=Nunito:400,700|Work+Sans:400,700&display=swap'); 3 | 4 | // Define fonts for body and headers 5 | $body-font: "Work Sans", "Helvetica", "sans-serif"; 6 | $headers-font: "Nunito", "Helvetica", "sans-serif"; 7 | 8 | // To use a font file (.woff) uncomment following lines 9 | // @font-face { 10 | // font-family: "Font Name"; 11 | // src: font-url('FontFile.eot'); 12 | // src: font-url('FontFile.eot?#iefix') format('embedded-opentype'), 13 | // font-url('FontFile.woff') format('woff'), 14 | // font-url('FontFile.ttf') format('truetype') 15 | // } 16 | // $my-font: "Font Name"; 17 | -------------------------------------------------------------------------------- /config/_bootstrap_variables.scss: -------------------------------------------------------------------------------- 1 | // This is where you override default Bootstrap variables 2 | // 1. Find all Bootstrap variables that you can override at the end of each component's documentation under the `Sass variables` anchor 3 | // e.g. here are the ones you can override for the navbar https://getbootstrap.com/docs/5.3/components/navbar/#sass-variables 4 | // 2. These variables are defined with default value (see https://robots.thoughtbot.com/sass-default) 5 | // 3. You can override them below! 6 | 7 | // General style 8 | $font-family-sans-serif: $body-font; 9 | $headings-font-family: $headers-font; 10 | $body-bg: $light-gray; 11 | $font-size-base: 1rem; 12 | 13 | // Colors 14 | $body-color: $gray; 15 | $primary: $blue; 16 | $success: $green; 17 | $info: $yellow; 18 | $danger: $red; 19 | $warning: $orange; 20 | 21 | // Buttons & inputs' radius 22 | $border-radius-sm: .0625rem; 23 | $border-radius: .125rem; 24 | $border-radius-lg: .25rem; 25 | $border-radius-xl: .5rem; 26 | $border-radius-xxl: 1rem; 27 | 28 | // Override other variables below! 29 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | First of all make sure you've created a rails app 2 | 3 | ```bash 4 | rails new APP_NAME 5 | ``` 6 | 7 | ## Setup 8 | 9 | Ensure you have the following gems in your Rails `Gemfile`: 10 | 11 | ```ruby 12 | gem "sassc-rails" 13 | gem "bootstrap", "~> 5.3" 14 | gem "autoprefixer-rails" 15 | gem "font-awesome-sass", "~> 6.1" 16 | gem "simple_form" 17 | ``` 18 | 19 | In your terminal, generate Simple Form Bootstrap config: 20 | 21 | ```bash 22 | bundle install 23 | rails generate simple_form:install --bootstrap 24 | ``` 25 | 26 | Then replace Rails' stylesheets by Le Wagon's stylesheets: 27 | 28 | ```bash 29 | rm -rf app/assets/stylesheets 30 | curl -L https://github.com/lewagon/stylesheets/archive/master.zip > stylesheets.zip 31 | unzip stylesheets.zip -d app/assets && rm stylesheets.zip && mv app/assets/rails-stylesheets-master app/assets/stylesheets 32 | ``` 33 | 34 | **On Ubuntu/Windows**: if the `unzip` command returns an error, please install it first by running `sudo apt install unzip`. 35 | 36 | 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. 37 | 38 | ## Bootstrap JS 39 | 40 | Install Bootstrap JS: 41 | ```bash 42 | importmap pin bootstrap 43 | ``` 44 | 45 | Import Bootstrap: 46 | 47 | ```js 48 | // app/javascript/application.js 49 | import "bootstrap" 50 | import "@popperjs/core" 51 | ``` 52 | 53 | ```js 54 | // app/assets/config/manifest.js 55 | //= link popper.js 56 | //= link bootstrap.min.js 57 | ``` 58 | 59 | ```rb 60 | # config/importmap.rb 61 | 62 | # replace these lines: 63 | # pin "bootstrap" # @5.3.2 64 | # pin "@popperjs/core", to: "@popperjs--core.js" # @2.11.8 65 | # with this: 66 | pin "bootstrap", to: "bootstrap.min.js", preload: true 67 | pin "@popperjs/core", to: "popper.js", preload: true 68 | ``` 69 | 70 | ## Adding new `.scss` files 71 | 72 | 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. 73 | 74 | ```scss 75 | // app/assets/stylesheets/application.scss 76 | 77 | // Graphical variables 78 | @import "config/fonts"; 79 | @import "config/colors"; 80 | @import "config/bootstrap_variables"; 81 | 82 | // External libraries 83 | @import "bootstrap"; 84 | @import "font-awesome-sprockets"; 85 | @import "font-awesome"; 86 | 87 | // Your CSS partials 88 | @import "components/index"; 89 | @import "pages/index"; 90 | ``` 91 | 92 | For every folder (**`components`**, **`pages`**), there is one `_index.scss` partial which is responsible for importing all the other partials of its folder. 93 | 94 | **Example 1**: Let's say you add a new `_contact.scss` file in **`pages`** then modify `pages/_index.scss` as: 95 | 96 | ```scss 97 | // pages/_index.scss 98 | @import "home"; 99 | @import "contact"; 100 | ``` 101 | 102 | **Example 2**: Let's say you add a new `_card.scss` file in **`components`** then modify `components/_index.scss` as: 103 | 104 | ```scss 105 | // components/_index.scss 106 | @import "card"; 107 | ``` 108 | 109 | ## Navbar template 110 | 111 | Our `layouts/_navbar.scss` code works well with our home-made ERB template which you can find here: 112 | 113 | - [version without login](https://github.com/lewagon/awesome-navbars/blob/master/templates/_navbar_wagon_without_login.html.erb) 114 | - [version with login](https://github.com/lewagon/awesome-navbars/blob/master/templates/_navbar_wagon.html.erb) 115 | 116 | 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. 117 | --------------------------------------------------------------------------------