[RUBY] Introducing Rails6 + Bootswatch / Honoka
We are very grateful to Bootstrap. Even I, who has no design sense, can easily create a site that can be viewed reasonably. Thank you very much.
However, I felt like "it's really ...", so I introduced Bootswatch to Rails. I also tried to introduce Honoka, which has a reputation for "beautiful Japanese".
environment
Ruby 2.7.2 Rails 6.0.3.4 Yarn 1.22.10 Webpack is installed and the top page can be displayed.
Creating the top page
Create a top page in preparation for installing Bootstrap.
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>VoiceOrigami</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
</div>
<%= render 'layouts/footer' %>
</body>
</html>
app/views/static_pages/top.html.erb
<!--<div class="container">-->
<div class="jumbotron m-3">
<h1 class="display-4 red">Welcome! To test app</h1>
<hr class="my-4">
<p>Ruby on Rails +Bootstrap template</p>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#exampleModal">
<i class="far fa-window-maximize"></i>
Open modal
</button>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Thank you
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
<!--</div>-->
app/views/layouts/_header.html.erb
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
app/views/footer.html.erb
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
app/assets/stylesheets/cutstom.scss
.red { // custom.To check if scss is loaded
font-size: 2rem;
color: red;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .text-muted {
margin: 20px 0;
}
Since Bootstrap is not installed, it is displayed in a broken state.
Introducing Bootstrap
Install Bootstrap with Yarn.
$ yarn add [email protected] jquery popper.js
Apply bootstrap.
app/javascripts/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
+ import 'bootstrap'
+ import '../src/application.scss'
app/javascripts/src/application.scss
@import '~bootstrap/scss/bootstrap';
Note that if you remove stylesheet_link_tag here, app / assets / stylesheets / cutstom.scss will not be loaded. Add two lines of code. Please load above stylesheet_link_tag.
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>VoiceOrigami</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' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
Load Bootstrap on the first line of custom.scss. You will be able to use color codes such as $ blue.
app/assets/stylesheets/custom.scss
@import "../../../node_modules/bootstrap/scss/bootstrap";
Added code to apply Bootstrap even after uploading to Heroku
config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
Popper: ['popper.js', 'default']
}))
module.exports = environment
You have installed Bootstrap4.
Introducing Bootswatch
Bootswatch is a collection of Bootstrap compatible free themes.
https://bootswatch.com/
The installation method is almost the same as the previous procedure.
Install Bootstrap with Yarn.
$ yarn add [email protected]
Apply bootswatch (Minty).
app/javascripts/src/application.scss
+ @import '~bootswatch/dist/minty/variables';
@import '~bootstrap/scss/bootstrap';
+ @import '~bootswatch/dist/minty/bootswatch';
This completes the Bootswatch installation. The familiar Bootstrap has transformed nicely. Try other themes besides Minty.
Honoka
Now that we have the knack, let's introduce Honoka. Bootstrap theme with beautiful Japanese.
https://honokak.osaka/
Install with Yarn
$ yarn add bootstrap-honoka
Apply Honoka. (Unfortunately it could not be applied at the same time as Minty)
app/javascripts/src/application.scss
//@import '~bootswatch/dist/minty/variables';
//@import '~bootstrap/scss/bootstrap';
//@import '~bootswatch/dist/minty/bootswatch';
@import '~bootstrap-honoka/dist/css/bootstrap';
We were able to confirm that there were subtle changes, such as a white line under the Navibar link.
I had a hard time understanding how Webpack works, but the installation of Bootswatch / Honoka has been completed. I hope it helps someone.
reference
https://qiita.com/taKassi/items/56172d140d7208230e32
Recommended Posts