Foundation v6.4 + Ruby on Rails + simple_formについて

個人的に使用する機会があったFoundationというCSSフレームワークについて備忘録も兼ね、嵌まったポイントなど注意点を書いておこうと思います。
## Foundatio v6.4について
Foundation v6.4から「XY Grid」というものが導入され、公式でもこれまでのレガシータイプ（Froat GridやFlex Grid）ではなくXY Gridシステムの導入を推奨しています。
※IE10にはまだ対応されていないようなので、IE10に対応させる必要がある場合は、レガシータイプを使用してください

・公式
  https://foundation.zurb.com/sites/docs/xy-grid.html
・日本語です。foundation v6.4の仕様についてまとめられています。
  http://foundation-site.com/archives/535.html


###**環境**
- OSX 10.12.6
- Ruby 2.4.1
- Rails 5.1.5
- foundation-rails 6.4.3.0 → XY Grid使用

#セットアップ
基本的に、foundation-railsのgithubを参考にしてもらえば設定できるかと思います。
https://github.com/zurb/foundation-rails

まずはgemのインストールをします。

```ruby:Gemfile
gem 'foundation-rails'
gem 'autoprefixer-rails' # 自動でベンダープレフィックスをつけてくれる
gem 'foundation-icons-sass-rails' # foundation icon
gem 'simple_form' # フォーム簡易作成
```

- `gem 'autoprefixer-rails'` は、自動でベンダープレフィックスをつけてくれるものです。公式でも`foundation-rails`と一緒にインストールすることを推奨しています。
- `gem 'foundation-icons-sass-rails’`は、Foundationのアイコンを使用する際に必要なgemです。
 - 参照：[foundation icon](https://zurb.com/playground/foundation-icon-fonts-3)
- `gem ‘simple_form’`は、入れることによりフォーム周りを簡単に作成することできるようになります。foundationの設定を追加することでsimple_formのスタイルをカスタマイズすることができます。後ほどふれます！

```:ターミナル
$ bundle install
```

# foundationの初期設定

```:ターミナル
$ rails g foundation:install
```

slimかhamlを使用している場合は、--hamlか--slimとオプションを追加してください。以下、生成されるもの。

```
Running via Spring preloader in process xxxx
      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
```

application.jsにfoundationを追加します。

```js:app/assets/javascripts/application.js
//= require jquery3
//= require rails-ujs
//= require foundation //追加
$(function(){ $(document).foundation(); }); //追加
```

application.css.scssに下記を追加します。

```scss:app/assets/stylesheets/application.css.scss
@import "foundation_and_overrides"; //一番上に記述
@import 'foundation-icons';
```

```scss:app/assets/stylesheets/foundation_and_overrides.scss
@charset 'utf-8';
@import 'settings';
@import 'foundation';
// If you'd like to include motion-ui the foundation-rails gem comes prepackaged with it, uncomment the 3 @imports, if you are not using the gem 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-xy-grid-classes;
//@include foundation-grid;
//@include foundation-flex-grid;
@include foundation-flex-classes;
@include foundation-typography;
@include foundation-forms;
@include foundation-button;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-card;
@include foundation-close-button;
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-responsive-embed;
@include foundation-label;
@include foundation-media-object;
@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;
@include foundation-visibility-classes;
@include foundation-float-classes;
// If you'd like to include motion-ui the foundation-rails gem comes prepackaged with it, uncomment the 3 @imports, if you are not using the gem you need to install the motion-ui sass package.
//
// @include motion-ui-transitions;
// @include motion-ui-animations;
```

```
@include foundation-xy-grid-classes;
//@include foundation-grid;
//@include foundation-flex-grid;
```

上記のコメントアウトされている２行は、レガシータイプです。foundation-rails v6.4以降を入れると`@include foundation-xy-grid-classes;`が適用されます。レガシータイプを使用したい場合は、コメントアウトを外してください。
※ **foundation-rails v6.4以前** だと、追加されるファイルの内容が異なるので注意が必要です。特にバージョンを指定せず`bundle install`を行うと、**v6.3**がインストールされるため（おそらく）、バージョンを指定するか、`bundle update`を行なってください。
**↓foundation-railsのみbundle updateしたいとき**

```:ターミナル
$  bundle update --source foundation-rails
```

##simple_formの設定について##

simple_formの設定をインストールします。この際、foundationのオプションをつけると、foundationのスタイルが設定されたファイルが生成されます。

```:ターミナル
rails g simple_form:install —foundation
```

foundationオプションをつけると以下のファイルが生成され、simple_formのスタイルをカスタマイズしたいときは、このファイルに変更を加えます。
`config/initializers/simple_form_foundation.rb`

例として、simple_formのinput要素に任意のクラスを付与したいときに、input_html: {class: "original"}といったように書くことがあると思います。
ただフォームの全体のinput要素に書くのは冗長であり大変なので、simple_form_foundation.rbに設定を追加します。

```ruby:config/initializers/simple_form_foundation.rb
b.wrapper :right_input_wrapper, tag: :div, class: 'small-9 columns' do |ba|
 ba.use :input, class: ‘original' #追加　→　class: ‘original'
 ba.use :error, wrap_with: { tag: :small, class: :error }
 # ba.use :hint,  wrap_with: { tag: :span, class: :hint }
end
```

※上記設定を追加した後は、rails sで再起動してください。
以上のように設定すると、下記のようにinput要素に任意のクラスが常に付与されるようになります。
<div class="small-9 columns">
    <input class=“original string optional" autofocus="autofocus" placeholder="メールアドレス/ユーザー名" type="text" name="craftor[user_id]" id="craftor_user_id">
</div>
##foundationのブレークポイントについて
foundationでレスポンシブ対応させたい場合は、small,medium,largeのクラスをつけると各ブレークポイントでレスポンシブになります。ブレークポイントを追加したい場合は、`_settings.scss`にある`$berakpoints`に追加します。
参照：[Media Queries ](https://foundation.zurb.com/sites/docs/media-queries.html)

```scss:_settings.scss
// 2. Breakpoints
// --------------

$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px, //追加
xxlarge: 1440px, //追加
);
```

##.medium-cell-block-yについて##
　.medium-cell-block-yクラスを追加したブロックは、規定以上の長さを超えると縦スクロールできるようになります。その場合は、grid-yの高さを指定する必要があります。

```slim:index.html.slim
.grid-x.grid-padding-x
  .cell.medium-7.medium-cell-block-y
    .grid-y.grid-margin-x.grid-margin-y style="height: 500px"
      .cell
        p 縦スクロールをさせてください。縦スクロールをさせてください。縦スクロールをさせてください。縦スクロールをさせてください。縦スクロールをさせてください。縦スクロールをさせてくださ縦スクロールをさせてください。縦スクロールをさせてください。
        p 縦スクロールをさせてください。縦スクロールをさせてください。縦スクロールをさせてください。縦スクロールをさせてください。縦スクロールをさせてください。縦スクロールをさせてくださ縦スクロールをさせてください。縦スクロールをさせてください。
        p 縦スクロールをさせてください。縦スクロールをさせてください。縦スクロールをさせてください。縦スクロールをさせてください。縦スクロールをさせてください。縦スクロールをさせてくださ縦スクロールをさせてください。縦スクロールをさせてください。
        p 縦スクロールをさせてください。縦スクロールをさせてください。縦スクロールをさせてください。縦スクロールをさせてください。縦スクロールをさせてください。縦スクロールをさせてくださ縦スクロールをさせてください。縦スクロールをさせてください。
        p 縦スクロールをさせてください。縦スクロールをさせてください。縦スクロールをさせてください。縦スクロールをさせてください。縦スクロールをさせてください。縦スクロールをさせてくださ縦スクロールをさせてください。縦スクロールをさせてください。
        p 縦スクロールをさせてください。縦スクロールをさせてください。縦スクロールをさせてください。縦スクロールをさせてください。縦スクロールをさせてください。縦スクロールをさせてくださ縦スクロールをさせてください。縦スクロールをさせてください。
```

###**参考記事**

- [foundation6とSassでサイトをつくる](http://foundation-site.com/archives/535.html)（冒頭でもあったXY Gridについてまとめられている記事）
- [Kitchen Sink](https://foundation.zurb.com/sites/docs/kitchen-sink.html#0)　（foundationで出来ることがある程度ここでわかる）
- [Rails + simple_form + Foundation 5 チュートリアル](http://www.ohmyenter.com/rails-simple_form-foundation-5-%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/)
- [初めての Foundation6 on Rails4](https://qiita.com/hiroysato/items/8c679858b1a89cc6a433)

#まとめ
いかがだったでしょうか。ピンポイントすぎてあまり参考にならなかったかもしれませんが、Foundation自体日本語のドキュメントがあまりないため、同じようなポイントで嵌まっている方もいるかと思います。
今後もFoundationの使い方について随時追記して更新していきたいと思います！何か間違っている点などありましたら、教えていただけると幸いです！
読んでいただき、ありがとうございました！