-
-
Save majedbojan/4e837279bf458ec734e128de229b498f to your computer and use it in GitHub Desktop.
Setup Rails 6 with bootstrap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # app/views/shared/_alerts.html.erb | |
| <% flash.each do |key, value| %> | |
| <div class="alert alert-<%= alert_style(key) %>"><%= value %></div> | |
| <% end %> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # app/views/shared/_header.html.erb | |
| <nav class="navbar navbar-expand-md navbar-dark bg-dark"> | |
| <div class="container"> | |
| <%= link_to 'App', root_path, class: 'navbar-brand' %> | |
| <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> | |
| <span class="navbar-toggler-icon"></span> | |
| </button> | |
| <div class="collapse navbar-collapse" id="navbar"> | |
| <ul class="navbar-nav mr-auto"> | |
| <%= link_to 'Home', root_path, class: 'nav-link' %> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # app/views/layouts/application.html.erb | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <meta name="description" content=""> | |
| <title>App Title</title> | |
| <%= csrf_meta_tags %> | |
| <%= csp_meta_tag %> | |
| <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> | |
| <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> | |
| </head> | |
| <body> | |
| <%= render 'shared/header' %> | |
| <div class="container pt-3"> | |
| <%= render 'shared/alerts' %> | |
| <%= yield %> | |
| <%= render 'shared/footer' %> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # app/javascript/packs/application.js | |
| import '../stylesheets/application'; | |
| import './bootstrap' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # app/javascript/stylesheets/application.scss | |
| @import './bootstrap.scss'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # app/helpers/application_helper.rb | |
| module ApplicationHelper | |
| def alert_style(type) | |
| case type | |
| when 'alert' then 'danger' | |
| when 'notice' then 'info' | |
| else type || 'info' | |
| end | |
| end | |
| end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # app/javascript/packs/bootstrap.js | |
| import 'bootstrap/js/dist/alert' | |
| import 'bootstrap/js/dist/button' | |
| import 'bootstrap/js/dist/carousel' | |
| import 'bootstrap/js/dist/collapse' | |
| import 'bootstrap/js/dist/dropdown' | |
| import 'bootstrap/js/dist/index' | |
| import 'bootstrap/js/dist/modal' | |
| import 'bootstrap/js/dist/popover' | |
| import 'bootstrap/js/dist/scrollspy' | |
| import 'bootstrap/js/dist/tab' | |
| import 'bootstrap/js/dist/toast' | |
| import 'bootstrap/js/dist/tooltip' | |
| import 'bootstrap/js/dist/util' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # app/javascript/stylesheets/bootstrap.scss | |
| @import '~bootstrap/scss/_functions.scss'; | |
| @import '~bootstrap/scss/_variables.scss'; | |
| @import '~bootstrap/scss/_mixins.scss'; | |
| @import '~bootstrap/scss/_root.scss'; | |
| @import '~bootstrap/scss/_reboot.scss'; | |
| @import '~bootstrap/scss/_type.scss'; | |
| @import '~bootstrap/scss/_alert.scss'; | |
| @import '~bootstrap/scss/_badge'; | |
| @import '~bootstrap/scss/_breadcrumb'; | |
| @import '~bootstrap/scss/_button-group'; | |
| @import '~bootstrap/scss/_buttons'; | |
| @import '~bootstrap/scss/_buttons.scss'; | |
| @import '~bootstrap/scss/_card.scss'; | |
| @import '~bootstrap/scss/_carousel.scss'; | |
| @import '~bootstrap/scss/_close.scss'; | |
| @import '~bootstrap/scss/_code.scss'; | |
| @import '~bootstrap/scss/_custom-forms.scss'; | |
| @import '~bootstrap/scss/_dropdown.scss'; | |
| @import '~bootstrap/scss/_forms.scss'; | |
| @import '~bootstrap/scss/_grid.scss'; | |
| @import '~bootstrap/scss/_images.scss'; | |
| @import '~bootstrap/scss/_input-group.scss'; | |
| @import '~bootstrap/scss/_jumbotron.scss'; | |
| @import '~bootstrap/scss/_list-group.scss'; | |
| @import '~bootstrap/scss/_media.scss'; | |
| @import '~bootstrap/scss/_modal.scss'; | |
| @import '~bootstrap/scss/_nav.scss'; | |
| @import '~bootstrap/scss/_navbar.scss'; | |
| @import '~bootstrap/scss/_pagination.scss'; | |
| @import '~bootstrap/scss/_popover.scss'; | |
| @import '~bootstrap/scss/_print.scss'; | |
| @import '~bootstrap/scss/_progress.scss'; | |
| @import '~bootstrap/scss/_spinners.scss'; | |
| @import '~bootstrap/scss/_tables.scss'; | |
| @import '~bootstrap/scss/_toasts.scss'; | |
| @import '~bootstrap/scss/_tooltip.scss'; | |
| @import '~bootstrap/scss/_transitions.scss'; | |
| @import '~bootstrap/scss/_utilities.scss'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # config/webpack/environment.js | |
| const { environment } = require('@rails/webpacker') | |
| const webpack = require('webpack') | |
| environment.plugins.append( | |
| 'Provide', | |
| new webpack.ProvidePlugin({ | |
| $: 'jquery', | |
| jQuery: 'jquery', | |
| Popper: ['popper.js', 'default'] | |
| }) | |
| ) | |
| module.exports = environment |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Setup Rails | |
| rails new app -d postgresql -T --webpacker=stimulus | |
| // Add Bootstrap | |
| yarn add bootstrap jquery popper.js | |
| // Add pages#home controller | |
| rails g controller pages home |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment