Last active
July 30, 2020 21:02
-
-
Save ali-sheiba/7f5bbcd44004d1ebdfa3506b35077a55 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 | |
| <% if flash.any? %> | |
| <% flash.each do |key, message| %> | |
| <div id="flash-<%= key %>" class="alert alert-<%= alert_style(key) %> alert-dismissible fade show" role="alert"> | |
| <%= message %> | |
| <button type="button" class="close" data-dismiss="alert" aria-label="Close"> | |
| <span aria-hidden="true">×</span> | |
| </button> | |
| </div> | |
| <script>setTimeout(e => document.getElementById("flash-<%= key %>").remove(), 3000);</script> | |
| <% 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/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