Go to Qiita Advent Calendar 2024 Top
LoginSignup
12
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@hiroysato(Hiroyuki Sato)

初めての Foundation6 on Rails4

Last updated at Posted at 2016-03-04

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の場合はどうなんだろう？
12
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
12
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?