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内に、
|
1 2 | <link rel="stylesheet" href="css/foundation.css"> <link rel="stylesheet" href="css/app.css"> |
app.cssは空のファイルでここにオリジナルのCSSを記述していく形になります。なのでこのファイルでなく自身のcssを読み込む形でも大丈夫です。
JSは直前に、
|
1 2 3 4 | <script src="js/vendor/jquery.js"></script> <script src="js/vendor/what-input.js"></script> <script src="js/vendor/foundation.js"></script> <script src="js/app.js"></script> |
app.jsは、先程のapp.cssと同じように自身のjsファイルでも大丈夫ですが、1行だけ、
|
1 | $(document).foundation() |
とあるので、こちらは忘れないようにしてください。
foundation-icons
Foundation Iconも使用するため、こちらもダウンロードしました。
(一緒にしてしまえばいいのにと思いますが…)
head内に
|
1 | <link rel="stylesheet" href="css/foundation-icons.css" /> |
を読み込んで同ディレクトリ内に、fontのデータを置いて下さい。
作ったもの
そんなこんなで試そうにも特にいいものが思いつかなかったので、
管理画面っぽいものを作ってみました。
実は、サイドナビとヘッダーだけ自分でやりましたが、
中のコンテンツはKitになります。
作っている途中にコンテンツ部分作るのやっぱり面倒くさいなと思い、
なにかテンプレートみたいなのものあるのかなと探してみたらFoundationにDashboard Kitなるものがありました…
なので少し使用してみました。
Dashboard Kit
Foundationで用意している管理画面のKitになります。
ダウンロードすると、細かくパーツごとにファイルが別れているのですが、
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を入れたい場合は、一緒にコンパイルするとエラーになるので、設定が必要です。
|
1 2 3 4 | npm i -D webpack webpack-stream //jQueryもインストール npm install --save-dev jquery |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var webpack = require('webpack'); module.exports = { mode: "production", // メインのJS entry: "./src/js/common.js", // 出力ファイル output: { filename: "bundle.js" }, plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ] } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | var nodeDir = './node_modules'; var gulp = require("gulp"); var sass = require('gulp-sass'); var pug = require('gulp-pug'); var browser = require("browser-sync"); var watch = require('gulp-watch'); var sourcemaps = require('gulp-sourcemaps'); var plumber = require('gulp-plumber'); var notify = require('gulp-notify'); var webpackStream = require("webpack-stream"); var webpack = require("webpack"); var webpackConfig = require("./webpack.config"); //setting : paths var paths = { 'scss': './src/sass/', 'css': './dist/common/css/', 'pug': './src/pug/', 'html': './dist/', 'jsdev': './src/js', 'js': './dist/common/js/' } gulp.task("server", function() { browser({ server: { baseDir: "./dist/" } }); //gulp.watch(['dist/common/**/*.js'], ["reload"]); //gulp.watch(['dist/**/*.css'], ['reload']); }); gulp.task('js', function() { gulp.src(paths.jsdev + '*') .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") //<- })) .pipe(webpackStream(webpackConfig, webpack)) .pipe(gulp.dest(paths.js)) .pipe(browser.reload({stream: true})); }); gulp.task('sass', function() { gulp.src(paths.scss + '*') .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") //<- })) .pipe(sass()) .pipe(gulp.dest(paths.css)) .pipe(browser.reload({stream: true})); }); gulp.task('pug', function() { gulp.src([paths.pug + '**/*.pug', '!' + paths.pug + '**/_*.pug']) .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })) .pipe(pug({ pretty: true })) .pipe(gulp.dest(paths.html)) .pipe(browser.reload({stream: true})); }); gulp.task('reload', function () { browser.reload(); }); gulp.task("watch", function () { gulp.watch(paths.scss + "**/*", ["sass"]); gulp.watch(paths.pug + "**/*", ["pug"]); gulp.watch(paths.jsdev + "**/*", ["js"]); }); gulp.task("default", ['server', 'watch']); |
common.jsはこんな感じです。
|
1 2 3 4 5 6 | // jsファイルを読み込む import {foundation} from "./foundation"; import {whatInput} from "./what-input"; // jsに定義されたJavaScriptを実行する $(document).foundation(); |
これで無事、bundle.jsとして、4つが一つのファイルになって生成されました。
htmlをpugに変換するツール
gulpを使うということでpugも利用したので、
DashBoardのhtmlをコピーする時に、Pugの形式に変更する必要がありました。
その時に変換するの役にたったのが以下のツールです。
楽にできました！
HTML2Jade – HTML to Jade/Pug Online Realtime Converter
感想
正直なところ、Foundationは、Bootstrap等に比べて少々デザインが古い感じがしました。
最近っぽいデザインにしたい場合は、BootstrapやMaterialの方がいいかもしれませんね。
Author Profile
スターフィールド編集部
SHARE
