Edited at

初めての Foundation6 on Rails4

More than 3 years have passed since last update.


Foundation6をRails4で使う

知らないうちに、Foundationが6にアップデートされていた。

foundation-railsを使ってRuby on RailsでFoundationを使えるようにした。

foundation-railsに書いてある手順どおりに実行しただけ、修正点を把握したいので、コマンド実行後のdiffも記載している。


環境


  • OSX: 10.11.3

  • Ruby 2.3.0

  • Rails: 4.2.5.2

  • foundation-rails: 6.1.2.0


Railsプロジェクトの作成

foundation-railsのREADMEを実行していく


Railsプロジェクトの作成

% rails new hello_foundation

% cd hello_foundation/


Gemfileの修正

% vi Gemfile

gem 'foundation-rails'

% bundle


foundationの初期設定

% rails g foundation:install

Running via Spring preloader in process 5675

insert app/assets/javascripts/application.js
append app/assets/javascripts/application.js
create app/assets/stylesheets/foundation_and_overrides.scss
create app/assets/stylesheets/_settings.scss
insert app/assets/stylesheets/application.css
conflict app/views/layouts/application.html.erb
Overwrite /private/tmp/hello_foundation/app/views/layouts/application.html.erb? (enter "h" for help) [Ynaqdh] y
force app/views/layouts/application.html.erb
identical app/assets/stylesheets/foundation_and_overrides.scss
identical app/assets/stylesheets/_settings.scss


変更点の確認


app/assets/javascripts/application.jsの修正点

 diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js

index e07c5a8..92a9acf 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -12,5 +12,8 @@
//
//= require jquery
//= require jquery_ujs
+//= require foundation
//= require turbolinks
//= require_tree .
+
+$(function(){ $(document).foundation(); });

Installationで記載されているように、foundationの関数を実行する設定が追加されている。


新規作成されるapp/assets/stylesheets/foundation_and_overrides.scssの中身

motion-uiを使うには、コメントを外せとの記述がある、motion-uiはこれのことのようだ。

@charset 'utf-8';

@import 'settings';
@import 'foundation';

// If you'd like to include motion-ui, you need to install the motion-ui sass package.
//
// @import 'motion-ui/motion-ui';

// We include everything by default. To slim your CSS, remove components you don't use.

@include foundation-global-styles;
@include foundation-grid;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
@include foundation-visibility-classes;
@include foundation-float-classes;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-close-button;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-flex-video;
@include foundation-label;
@include foundation-media-object;
@include foundation-menu;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;

// If you'd like to include motion-ui, you need to install the motion-ui sass package.
//
// @include motion-ui-transitions;
// @include motion-ui-animations;


新規作成 app/assets/stylesheets/_settings.scssファイルの中身

一部抜粋

中身のサンプル

// 1. Global

// ---------

$global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;
$primary-color: #2199e8;
$secondary-color: #777;
$success-color: #3adb76;
$warning-color: #ffae00;
$alert-color: #ec5840;
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;
$body-background: $white;
$body-font-color: $black;
$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
$body-antialiased: true;
$global-margin: 1rem;
$global-padding: 1rem;
$global-weight-normal: normal;
$global-weight-bold: bold;
$global-radius: 0;
$global-text-direction: ltr;


app/assets/stylesheets/application.cssの修正内容

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css

index f9cd5b3..c8b8e57 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -12,4 +12,6 @@
*
*= require_tree .
*= require_self
+ *= require foundation_and_overrides
+
*/


app/views/layouts/application.html.erbの中身

スタイルシートのturbolinkの設定が消されている。

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb

index fbd1fb1..cd60004 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -1,14 +1,19 @@
<!DOCTYPE html>
-<html>
-<head>
- <title>HelloFoundation</title>
- <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
- <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
- <%= csrf_meta_tags %>
-</head>
-<body>
-
-<%= yield %>
-
-</body>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+ <title><%= content_for?(:title) ? yield(:title) : "Untitled" %></title>
+
+ <%= stylesheet_link_tag "application" %>
+ <%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
+ <%= csrf_meta_tags %>
+ </head>
+
+ <body>
+
+ <%= yield %>
+
+ </body>
</html>


ヘッダデータの追加

試しにtop-barを追加してみる。top-barの設定はここのを丸コピー

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb

index cd60004..2e9fcca 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -13,6 +13,31 @@

<body>

+ <div class="top-bar">
+ <div class="top-bar-left">
+ <ul class="dropdown menu" data-dropdown-menu>
+ <li class="menu-text">Site Title</li>
+ <li>
+ <a href="#">One</a>
+ <ul class="menu vertical">
+ <li><a href="#">One</a></li>
+ <li><a href="#">Two</a></li>
+ <li><a href="#">Three</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Two</a></li>
+ <li><a href="#">Three</a></li>
+ </ul>
+ </div>
+ <div class="top-bar-right">
+ <ul class="menu">
+ <li><input type="search" placeholder="Search"></li>
+ <li><button type="button" class="button">Search</button></li>
+ </ul>
+ </div>
+ </div>
+
+
<%= yield %>

</body>


サンプルページの作成

rails g scaffold address_book name:string tel:string

bin/rake db:migrate

サーバ起動

rails s

http://localhost:3000/address_books

でfoundationのヘッダが表示されるようになった。


疑問


  • foundationを使う時、TurbolinkをOffにしないと、うまく動かないことがあるようだけど、6の場合はどうなんだろう?