Blog

CSSフレームワークFoundationを試してみた

前から気になっていたcssフレームワークのFoundationを使ってみました。
The most advanced responsive front-end framework in the world. | Foundation

ダウンロード

CSSフレームワークといっていますが、htmlのテンプレートも用意されているようで、その場合はCLIをインストールすると、htmlが準備出来た段階から制作することが出来ます。

ただ、今回はCSSとjsのみをインストールして使用する方法でやりました。
そのダウンロードは下記からになります。
Foundation for Sites

4タイプありますが、「Complete」のダウンロードになります。
Essentialは最低限、Customは自分で機能を選んで、Sassはその名の通り、sassファイルのダウンロードになります。(sassはnpmでのダウンロードになります)

設定

Completeのダウンロードファイルを見ると、既に設定されているindex.htmlがあるのでその通りにすれば基本的にはOKです。

CSSはhead内に、

app.cssは空のファイルでここにオリジナルのCSSを記述していく形になります。なのでこのファイルでなく自身のcssを読み込む形でも大丈夫です。

JSは直前に、

app.jsは、先程のapp.cssと同じように自身のjsファイルでも大丈夫ですが、1行だけ、

とあるので、こちらは忘れないようにしてください。

foundation-icons

Foundation Iconも使用するため、こちらもダウンロードしました。
(一緒にしてしまえばいいのにと思いますが…)

Foundation Icon

head内に

を読み込んで同ディレクトリ内に、fontのデータを置いて下さい。

作ったもの

そんなこんなで試そうにも特にいいものが思いつかなかったので、
管理画面っぽいものを作ってみました。

DEMO

実は、サイドナビとヘッダーだけ自分でやりましたが、
中のコンテンツはKitになります。

作っている途中にコンテンツ部分作るのやっぱり面倒くさいなと思い、
なにかテンプレートみたいなのものあるのかなと探してみたらFoundationにDashboard Kitなるものがありました…
なので少し使用してみました。

Dashboard Kit

Foundationで用意している管理画面のKitになります。

Dashboard Kit | Foundation 6

ダウンロードすると、細かくパーツごとにファイルが別れているのですが、
cssがscssファイルなんです!
なのでコンパイルする環境じゃないと利用出来ないので、このためにgulpで環境を作りました。

このDashboard Kitを使うためには、元のFoundationもsassで扱う必要があります(変数を使用しているためです)

ただ、今回はその変数のsettingやutilのファイルだけコンパイルするようにして、foundation本体は普通のCssを読み込んで使ってます笑

Dashboard Kitは必要な機能のscssを@importで読み込んであとは、htmlをコピペすればOKです。

WebPackも使用してみた

gulpを使ったことで、どうせならwebpackも試して見るかと思い、設定してみました。
今回特にコンパイルする必要はないんですが、jquery.js,foundation.js,what-input.js,app.jsをまとめてbundle.jsとしてコンパイルするようにしました。

メインの作業jsファイルはcommon.jsとします。
gulp自体の設定は省かせていただきます。

WebPackインストール

jQueryを入れたい場合は、一緒にコンパイルするとエラーになるので、設定が必要です。

common.jsはこんな感じです。

これで無事、bundle.jsとして、4つが一つのファイルになって生成されました。

htmlをpugに変換するツール

gulpを使うということでpugも利用したので、
DashBoardのhtmlをコピーする時に、Pugの形式に変更する必要がありました。

その時に変換するの役にたったのが以下のツールです。
楽にできました!
HTML2Jade – HTML to Jade/Pug Online Realtime Converter

感想

正直なところ、Foundationは、Bootstrap等に比べて少々デザインが古い感じがしました。
最近っぽいデザインにしたい場合は、BootstrapやMaterialの方がいいかもしれませんね。

Author Profile

Y.A
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
     
  • Launch Cart越境ECカート

Archive

ページTOPへ