【HTML5/CSS3】【ツール/エディタ】【Foundation】Sass版FoundationをWindowsで使えるようにする | Wood-Roots:blog
これまでCSSフレームワークというものをほとんど使ったことがなかったのですが、そろそろ手を出そうかと思いFoundationというCSSフレームワークを使ってみました。 html、css、jsファイルで構成される静的バージョンもありますが、色・幅・余白などが緻密に計算されて構成されているFoundationではあまり使い勝手がいいとは言えません。 たとえば制作中にブロック間の余白をもっと狭くしたいと思っても、ブロック間の余白はブロック幅や内部のpaddingなどあちこちに影響を及ぼします。 せっかくCSSフレームワークを使うのですから、SassバージョンのFoundationを使いましょう。 何かを変更してもすべてその変更された値を元にCSSが再構築されますので、仕様変更にも柔軟に対応でき、メンテナンス性も高いです。 というわけで、Sass版Foundationを使ってサイト制作ができるよ
【HTML5/CSS3】【Foundation】Foundation6のシンプルなテンプレート「Foundation for Sites Template」を使う | Wood-Roots:blog
以前Foundation6+gulpをWindowsで動くようになるまでという記事でFoundation6を使おうとしましたが、このパッケージはHandlbars.jsというテンプレートエンジンでレイアウトを制御し、コンテンツ部分はMarkDownで管理してHTMLを生成するという、ローカルCMSとでも言うような複雑なものでした。 FoundationなどのCSSフレームワークに期待しているのはこういう巨大なシステムではなく、CMSのテンプレートや数ページのHTMLをまぁまぁの見栄えで作れればいいんだけど…と思ってましたが、そういう用途に向いたテンプレート「Foundation for Sites Template」も公開されていました。 1つのHTMLファイルといくつかのscssファイルによるシンプルな構成で、これまでのFoundationユーザーならほぼ同じ感覚で使えると思います。 W
Foundation5 日本語チートシート
はじめに このページはFoundation4用を加筆しながら作っていましたが途中でFoundation5にVerが上がってしまいました。一応下位互換しているようなので、そのままFoundation5用のチートシートとして続けて掲載していきます。情報が古い可能性＆うまく動いていない箇所があります。 また、内容に関しては完成しておらず、まだ未掲載の部分が多くありますのでご了承ください。 このページは、Foundation DocumentationにあるKitchen Sink（http://foundation.zurb.com/docs/components/kitchen_sink.html）を元に、解説やよく使われそうなクラス名などのドキュメントを追加して日本語に編集しなおしたページです。 翻訳したものではありませんので、ご注意ください。 また、各項目SCSSに対応していますが、このペ
ZurbFoundationのCompass版を利用するなら、app.scssのインポートは必要最低限にしたほうがいいですよ - megane9988のブログ
ZurbFoundationのCompass版を利用するなら、app.scssのインポートは必要最低限にしたほうがいいですよ おひさしぶりです。メガネです。今日は表題のとおりです。 Foundation | The Most Advanced Responsive Front-end Framework from ZURB を利用する際にCompass版を利用するときのtipsです。前提としてはCompass版のFoundationを利用するとします。もろもろ準備を済ませて [code lang=text] $ foundation new project-name [/code] とすれば一度に、ドバっと必要なファイルがダウンロードされて、即座に作業に入れるので気に入っています。その時のapp.scssに注目です。app.scssの中身は [code lang=text] @import
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【ツール/エディタ】【Foundation】Foundation6+gulpをWindowsで動くようになるまで | Wood-Roots:blog
