2016-04

foundation

Foundation 6.2 テンプレート カラーバリエーションできました

前回、カラーバリエーションを作ろうか、などと書いた手前、結局作ってしまいました。特別版テンプレートとして8種類の色違いです。 勘のいい方はお気づきだと思いますが、Foundationのカラーパレットを使ったものが5種類です。「prim
foundation

Foundation 6.2で作ったテンプレート特別版 ここがパワーアップ!

ブログを書きながら作ってきたテンプレート、絶賛「無料配布中」です。ただ、ほとんどデフォルトのままで若干消化不良な感じがしていました。結局は飽き足らず、ちょっと手を入れてみました。 通常版に続く特別版は、各所がパワーアップしています。
foundation

Foundation 6.2で作ったテンプレートを配布します

ずいぶん長々とFoundationのサイト作りを書いてきました。Sass版のFoundationをいじるのは初めてだったので、いろいろ試行錯誤もありましたが、とりあえず一段落です。 せっかくここまで作ってきたので、まんまテンプレートと
foundation

Foundation ページはどうやって増やすのだろう

前回は、できあがったテンプレートをサーバーにアップしました。でも、1ページだけというのも何ですね。 2ページ目以降はどうやって増やしていくのでしょうか。やってみたら簡単でした。Foundationはホントによくできています。 /
foundation

Foundation 6.2 いよいよテンプレートをサーバーにアップ

Foundation 6.2でサイトを作ってきましたが、いよいよテンプレートをサーバーにアップロードしてみます。 さて、いったい何をアップしたらいいのかと考えていましたが、結論から言うと、/distの中の、index.htmlと/as
foundation

Foundationで作ったサイト コンテンツを入れていきましょう

前回は、アイコンフォントを使って連絡先を作ってみました。今回はいよいよ、コンテンツを入れていきたいと思います。(ダミーですけどね。) Foundationの実力やいかに /src/pages/index.htmlがコンテンツ本体のページ
foundation

Foundationと相性ピッタリのアイコンフォントを使う

Foundationと同じく、ZURBが提供しているアイコンフォントを使って、連絡先を整えてみます。 アイコンフォントの設定 1. Foundation Icon Fonts 3のサイトを開きます。 2. 「Download
foundation

FoundationでCSSはどう書いていくのだろうか やっとSassを使ってみる

CSSフレームワークであるFoundationをいじってきましたが、未だCSSを触っていませんでした。Sassを使うためにいろいろ苦労してきたのに、まったくもって本末転倒です。 結論から言うと何も難しいことはありません。いろいろ方法は
foundation

グローバルメニューもレスポンシブに こんなに簡単でいいのだろうか?

グローバルナビゲーションもFoundationにおまかせです。レスポンシブなメニューが簡単に作成できます。 大元は、Foundationのサイトからコピーしてきます。 「Responsive Toggle」のコードをコピーし
foundation

レスポンシブなヘッダーとフッターを作ろう 

前回は、ページ全体をセンタリングしました。さらに各部を作っていきます。まずは、ヘッダーとフッターです。 1カラムのページですが、企業ページなどでよく見るような連絡先をヘッダーとフッターに入れてみます。 FoundationのGrid