Skip to content

Instantly share code, notes, and snippets.

@hyuki
Last active February 8, 2019 02:32
Show Gist options
  • Save hyuki/4ef1fe0e8e9aac90e9e338520375977f to your computer and use it in GitHub Desktop.
Save hyuki/4ef1fe0e8e9aac90e9e338520375977f to your computer and use it in GitHub Desktop.
Barebone Bootstrap4 - A Simple Bootstrap4 Template using erb.

What's this?

Barebone Bootstrap4 - A Simple Bootstrap4 Template using erb.

Requirements

  • Embedded Ruby (ERB).

How to use

  1. Download config.rb and barebone-bootstrap4.erb.
  2. Execute $ erb barebone-bootstrap4.erb > index.html.
  3. Open index.html with your browser.

Screenshot

20190208112811

<%# encoding: UTF-8 %>
<% load 'config.rb' %>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="<%= AUTHOR %>">
<title><%= TITLE %></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
body {
min-height: 75rem;
padding-top: 3.5rem;
font-size: large;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#"><%= TITLE_BRAND %></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<% NAV_LINK.each do |item| %>
<li class="nav-item">
<a class="nav-link" href="<%= item[:url] %>"><%= item[:caption] %></a>
</li>
<% end %>
</ul>
</div>
</nav>
<% if JUMBOTRON[:on] %>
<div class="jumbotron">
<div class="container">
<h1 class="display-3"><%= JUMBOTRON[:title] %></h1>
<p><%= JUMBOTRON[:lead] %></p>
<h2><%= JUMBOTRON[:author] %></h2>
</div>
</div>
<% end %>
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
<%= MAIN_CONTENTS %>
</div>
<div class="col-md-4">
<% CARD.each do |card| %>
<div class="card mb-5">
<div class="card-header">
<h2><%= card[:title] %></h2>
</div>
<div class="card-body">
<p class="card-text">
<%= card[:body] %>
</p>
</div>
<div class="card-footer">
<a href="<%= card[:url] %>" class="btn btn-primary"><%= card[:caption] %></a>
</div>
</div>
<% end %>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
# encoding: UTF-8
AUTHOR = '結城浩 / Hiroshi Yuki'
TITLE = 'Barebone Bootstrap4'
TITLE_BRAND = 'BB4'
NAV_LINK = [
{ :caption => 'HOME', :url => 'https://www.hyuki.com/' },
{ :caption => 'Twitter', :url => 'https://twitter.com/hyuki/' },
{ :caption => 'Web連載', :url => 'https://bit.ly/girlnote' },
{ :caption => '著書', :url => 'https://www.hyuki.com/pub/books.html' },
]
JUMBOTRON = {
:on => true,
:title => 'Barebone Bootstrap4',
:lead => 'Bootstrap4のひながたページ',
:author => '結城浩',
}
CARD = [
{ :title => '結城メルマガ', :body => '有料メールマガジンを毎週配信しています。', :caption => '詳しく', :url => 'http://www.hyuki.com/mm/' },
{ :title => 'Web連載', :body => '「数学ガールの秘密ノート」を毎週cakesで連載しています。', :caption => '詳しく', :url => 'https://bit.ly/girlnote' },
]
MAIN_CONTENTS = <<"EOD"
<p>宿に着いたのはずいぶん遅かったけれど、今朝は早く目を覚ました。朝食を済ませて宿を出ると、 村の案内をしてくれるティナがもう私を待っていた。</p>
<p>ティナは小柄な12歳くらいの女の子で、利発そうな顔立ちをしている。大きな目が、くるくるとよく動く。そんなに大きな村ではないから、迷うことはないのだけれど、何しろ日本語も英語も通じない村なので、英語の通じる通訳が必要なのだ。</p>
<p>ティナは私の前に立ち、まずは宿のまわりを案内してくれた。ティナは、アイボリーのシンプルなマントを羽織り、小さな籠を持っている。歩くたびに、マントのすそ飾りがリズミカルに踊る。</p>
<p>小川にかかった橋を渡るときに「あなたは、どんなお仕事をなさっているのですか」とティナが振り向いて尋ねた。きれいな英語だ。</p>
<p>「コンピュータの本を書いてます」と私は答えた。</p>
<p>ティナは立ち止まって「コンピュータの本」という表現に不思議そうな顔をした。そして、少し考えてからこう言った。</p>
<p>「村長も本を書きます。お会いになりますか」</p>
<p>ティナは私を村長の家に連れて行ってくれた。家が、村長の仕事場でもある。村長は50を過ぎたくらいで、がっしりした体つきをしている。ティナの話に耳を傾けてから、村長はわかった、というようにゆっくりうなずき、大きな手を差し出した。手が痛くなるほど強い握手だった。</p>
<p class="my-5"><a class="btn btn-primary" href="http://www.hyuki.com/story/tina.html">続きを読む</a></p>
EOD
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment