Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

初めての Foundation6 on Rails4

More than 5 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の場合はどうなんだろう?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away