• Dashboard

  • Fivee-baseの紹介や導入方法についての説明です。
  • 概要

Fivee-baseはアプリケーションやWebサイトのフロントエンド構築に必要な要素を5つに分類化する事で作業内容を明確にし、大幅に作業工数を削減する事ができるCSSフレームワークです。

  • 導入方法

  • まずはGithubよりzipをダウンロードしてください。
  • zipを解凍すると「htdocs」と「src」フォルダがあり、htdocsがルートフォルダ(通常のhtml,css,jsファイルが収められています)、srcがソースフォルダ(haml,scssなどが収められています)
    hamlやscssを使わない方はhtdocs内のファイルをご利用ください。hamlやscssを使う場合はsrcフォルダをご利用ください。 srcフォルダはソースフォルダになります。gulpをお使いの際は本フォルダ内でテストやモック作成が行えます。gulpで"gulp copy"コマンドを打つとhtdocsにファイルがコピーされます。その際ファイルや画像に"test_"の文字があるとそのファイルや画像を除いてhtml,css,js,その他ファイルがコピーされます。
  • 続いてhtdocs内のindex.htmlを参考に、あなたがこれから作成するサイトやアプリケーションに必要なファイルを以下に従って読み込ませてください。(hamlを使う場合はsrc内のindex.hamlをご利用ください) ファイルパスがjs/vendor/から始まるファイルはfivee-baseに必要なライブラリーになります。
    • index.htmlのheadタグ内で読み込むファイル
    • html5shiv.min.js (ie10以下でもhtml5が表示できるスクリプト)
    • font-awesome.min.css (Webフォントアイコン)
    • fivee-base.min.css (fivee-baseのCSSファイル圧縮版) minファイル(圧縮ファイル)の内容を見るには同フォルダの.cssファイルをご覧ください。
    • unique.min.css (あなたのページに必要な指定を記述するファイル) このファイルはGulpを使って圧縮しています。圧縮を必要としない場合は同フォルダの.cssファイル内に必要な指定を追加して読み込んでください。このファイルには本ページに必要なレイアウトの指定が記載されています。必要なければ削除してください。
    • old-ie.min.css (ie10以下で読み込むクロスブラウザ用CSSファイル) 本ページのheadタグ直前のコンディショナルコメントの記載をコピーした場合「ie8,ie9,oldie」のクラスが、それぞれのブラウザに対して有効になります。
    • index.htmlのbodyタグの最下部で読み込むファイル
    • jquery/dist/jquery.min.js (ie9以上で読み込むjquery)
    • jquery-legacy/dist/jquery.min.js (ie10以下で読み込むjquery)
    • fivee-base.min.js (fivee-baseのjsファイル圧縮版)
  • あなたのサイトやアプリケーションに不必要なファイルを削除してください。
    • bower.json (bower用のjsonファイル) bowerを使わない場合削除してください。
    • bowerrc (bower用のインストール先設定ファイル) bowerを使わない場合削除してください。
    • package.json (gulpのプラグイン等の記載があるjsonファイル) gulpを使わない場合削除してください。
    • gulpfile.js (gulpの設定ファイル) gulpを使わない場合削除してください。
    • gitignore (github用のファイル:無視リスト) githubを使わない場合削除してください。
    • LICENSE (github用のファイル:ライセンス) githubを使わない場合削除してください。
    • README.md (github用のファイル:説明文) githubを使わない場合削除してください。
    • src/haml (hamlファイル) hamlを使わない場合srcフォルダごと削除してください。
    • src/scss (scssファイルが入っているフォルダー) scssを使わない場合srcフォルダごと削除してください。
    • htdocs/doc (本サイト用のdocファイルです。削除してください。)
  • 以上で準備は完了です。あとは左メニューから必要なパーツや必要な効果を探して、ページ内の「show html」ボタンからhtmlソースをコピーペーストするだけです。

  • 対応ブラウザ

Fivee-baseは以下のブラウザに対応しています。
Internet Explorer IE8,IE9,IE10,IE11,Edge
Chrome Edge
Firefox Edge
safari Edge
IE8はレスポンシブ未対応

  • Sassについて

sassを使う方は以下の特徴をお読みください。
  • theme-defaultフォルダ配下の _variables.scss には、色やフォントサイズなどFivee-baseに必要なプロパティがすべて記述されています。テーマカラーを変えたい、ボタンの色を変えたいと言った際は、こちらのファイルにあるカラーコードやフォントサイズを変更してください。
  • テーマカラーを変更する場合は _variables.scss のカラーコードを変えるだけで、すべてのcomponentsやmoduleに反映されます。
  • テーマカラーを増やす場合、例えば青色のテーマカラーを増やす手順は、theme-defaultフォルダを丸ごとコピーペーストし「teme-blue」等にリネーム。配下の _variables.scss の内容を青色に変更します。変更後Sassのコンパイルが終わったら現在読み込んでいるCSSファイルのパスを
    css/theme-default/fivee-base.min.css から
    css/theme-blue/fivee-base.min.css に変更すると青色のテーマカラーになります。
  • _variables.scss のテーマーカラーの指定は $cl-theme / $cl-theme1 / $cl-theme2 になります。

  • クラス名について

Fivee-baseのクラス名ルールは以下になります。
頭文字 クラスの概要
st- 「st-」からはじまるクラス名はstructureです。構造を意味します。主にコンテンツのレイアウト用に使用されます。 詳細
cp- 「cp-」からはじまるクラス名はcomponentsです。ボタンなどの小さなパーツです。 詳細
ef- 「ef-」からはじまるクラス名はeffect-classです。色、背景、形、位置など対象コンテンツの意匠を変化させます。 詳細
md- 「md-」からはじまるクラス名はmoduleです。modalなど一つの機能として成立するパーツです。moduleはjqueryを必要とします。 詳細
is- 「is-」からはじまるクラス名はstate-classです。対象コンテンツの状態を示します。 詳細
rs- 「rs-」からはじまるクラス名はレスポンシブ用に使用されます。
js- 「js-」からはじまるクラス名はjavascript用のクラスです。このクラス名にはCSSの指定はNGになっています。

  • 導入サポート

リリース間もないですが数社の企業様に導入いただき、その効果を実感いただいてます。 (2016年1月現在) Webサイトやアプリケーションのフロントエンド開発、デザイン刷新をお考えの企業様、導入サポート承ります。 こちら からお気軽にご相談ください。
以下のような事例に心当たりがある場合は、是非導入をご検討ください。
  • 既存のCSSフレームワークだと色のバリエーションや細かいカスタマイズができなかった。
  • 既存のCSSフレームワークが日本向けのデザインに合わない為、カスタマイズ用のCSSが肥大化している。
  • オフショアなど遠隔地との打ち合わせにdocサイトやパーツリストがなくエクセル資料だけではうまく伝わらない。
  • ページによって関わる担当者が違い、余白やデザインのディテールが異なる。CSSの指定もその都度行っている為に重複している。
  • CSSに関する社内レギュレーションがうまく伝達できず、1px単位の差でCSSの指定が行われている。
  • CSSに関する社内レギュレーションがうまく伝達できず、よく似た色が多数存在している。
  • CSSファイルのIDやクラス名が何に使われているのか分からない為に、その都度CSSの追加が発生している。
  • バックエンド技術者がCSSファイルに記述をするのは敷居が高く、ついついインラインでCSSを記述してしまう。
  • パーツの共通化が行われておらず、微妙な違いのパーツが多数存在してしまっている。