個人的に使用する機会があった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のインストールをします。
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です。 -
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を追加します。
//= require jquery3
//= require rails-ujs
//= require foundation //追加
$(function(){ $(document).foundation(); }); //追加
application.css.scssに下記を追加します。
@import "foundation_and_overrides"; //一番上に記述
@import 'foundation-icons';
@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に設定を追加します。
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要素に任意のクラスが常に付与されるようになります。
foundationのブレークポイントについて
foundationでレスポンシブ対応させたい場合は、small,medium,largeのクラスをつけると各ブレークポイントでレスポンシブになります。ブレークポイントを追加したい場合は、_settings.scssにある$berakpointsに追加します。
参照：Media Queries
// 2. Breakpoints
// --------------
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px, //追加
xxlarge: 1440px, //追加
);
.medium-cell-block-yについて
.medium-cell-block-yクラスを追加したブロックは、規定以上の長さを超えると縦スクロールできるようになります。その場合は、grid-yの高さを指定する必要があります。
.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でサイトをつくる（冒頭でもあったXY Gridについてまとめられている記事）
- Kitchen Sink （foundationで出来ることがある程度ここでわかる）
- Rails + simple_form + Foundation 5 チュートリアル
- 初めての Foundation6 on Rails4
まとめ
いかがだったでしょうか。ピンポイントすぎてあまり参考にならなかったかもしれませんが、Foundation自体日本語のドキュメントがあまりないため、同じようなポイントで嵌まっている方もいるかと思います。
今後もFoundationの使い方について随時追記して更新していきたいと思います！何か間違っている点などありましたら、教えていただけると幸いです！
読んでいただき、ありがとうございました！