Foundationに加える事ができるUIコンポーネントを配布する・「Building Blocks」Building BlocksはCSSフレームワークのFoundationに加える事ができるUIコンポーネントを配布するWebサイトです。zurbが公式に公開しているものになります。ナビゲーションやメディア、コントロールスイッチ等のスタイルをモジュール式に追加できるみたいです。結構な数が揃っているのでFoundationを使ってる方はご覧になってみては如何でしょうか。 Building Blocks
masonry + ajaxでpinterest風タイルビューを実現する - Qiita
pinterestのような、 ・要素を隙間なく敷き詰める ・ブラウザのリサイズに応じて配置も変わる といった機能を持つタイルビューを実現するjsのライブラリはいくつかあります その中でも今回は定番のmasonryを使い、 ajaxでページングして下に下にコンテンツをページ遷移なしで追加してみます 基本的なmasonryの使い方は他に記事が大量にあるのでここでは解説しませんよ! 完成イメージは(手前味噌ですが)こんなかんじです↓ tokyotownname.com では始めます、 画像がいくつかトップにあり、 その下に「もっと読む」ボタンがあるとします。ありがちですね。 <!-- タイルビュー --> <div id="images"> <div id="image-unit">....</div> <div id="image-unit">....</div> ...... <div id
レスポンシブWeb制作で話題のjQuery Masonryを試してみた - 青春B■雑記blog‐青酸カリ カラメルシロップ味‐
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>jQuery Masonry Sample 1</title> <link rel="stylesheet" href="css/sample.css" type="text/css" media="all"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type='text/javascript' src='js/jquery.masonry.min.js'></script> <script type='text/javascript' src='js/sample.js'></script
Masonry.jsを使ってみる
レスポンシブ対応のグリッドレイアウトを実装できるjQueryのプラグイン「Masonry.js」の使い方をメモ。 今回はバージョン4のプラグインを使用していますが、バージョン3だと記述方法が少し違うところがあるようなので注意してください。 使い方 下記からダウンロードできます。 GitHub – desandro/masonry: Cascading grid layout library HTML内に必要なファイルを読み込みます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="./masonry.pkgd.min.js"></script> HTML <div class="grid"> <div class="grid-item"
【jqueryでタイルレイアウト】masonryの使い方 - Qiita
jqueryでタイルレイアウトをしたい 最近、デジタルコンテンツ販売のサイトを運営し始めました。このとき思ったのが、「ある一定領域のなかであれば、どれだけボックス要素（サムネイルと商品名）を増やしても、自動でうまい具合に流し込みたい」ということでした。 なぜなら、通常のリストだけでは敷き詰められたボックス要素が横幅を超えると「横幅いっぱいになったから次にズレそう」といのをしてくれなくて横一列に詰めまくってレイアウトが崩れてしまうからです。 これを回避するには、何個かのボックス要素ごとにリストタグを追加しないといけません。とても面倒ですよね。そこでいくつか探していると、masonry（メーソンリー？マソンリー？）がjqueyでタイルレイアウトをやるのに簡単で設定しやすいということがわかったので、画像とテキストをセットにしてタイルレイアウトさせる方法を紹介します。 ファイルパスの指定方法は、絶
Getting Started With Foundation 5 | Foundation Docs
Foundation Documentation Download Foundation Getting Started With Foundation 5 Getting started with Foundation is easy. Whether you are a master of Sass, building a new app, or making your existing site responsive, we've got you covered. What is Foundation? Foundation is the most advanced, responsive front-end framework in the world. The framework is mobile friendly and ready for you to customize
Interchange | Foundation Docs
Foundation Documentation Interchange uses media queries to dynamically load responsive content that is appropriate for different users' browsers. Using Interchange With HTML Content Interchange can now pull in HTML partials so you can load different sections of your page for particular media queries. This is great for loading up a mobile-friendly component on small devices, and a more robust or he
【書きなぐり】Foundation 5の主要機能（私がよく使う機能中心） - しかたこうきブログ
どうも、私です。 私周辺のWeb界隈では、bootstrapの話はよく聞くのですが、Foundationの話はあまり聞きません。逆に私のごく親しい人たちが少し使っている印象でして。あ、ちなみに私も昨年後半からFoundationでサイト制作するようになりました。 ちらっと聞いてみると、みんなFoundationに興味はあるみたいなので、取りあえず機能の紹介から始めます。あくまで機能の紹介だけ。使い方はまた折りをみて少しずつ紹介したいかな、と。 まあ、まずは公式嫁なんですが、英語ですね。公式の見出しから、各機能を紹介していきます。左カラムにあるヤツです。 STRUCTURE（構造） 基本的な要素の見せ方を定義する機能たちです。 Media Queries（メディアクエリ） レスポンシブ用のメディアクエリを設定します。デフォルトのブレイクポイントは小さいほうからそれぞれ、640, 1024,
Foundation5の使い方 | CSSフレームワーク覚書
Foundation5の使い方の説明。今注目のCSSフレームワークFoundationを今さら始めたwebデザイナーの備忘録。Bootstrapとの違いを交えながら説明をしています。Foundation5の使い方 今さらFoundationを使い始めた 残念なwebデザイナーによる使い方の説明サイト。 初心者なので優しい目で見守ってください。 まずはFoundationについてを見る Bootstrapについで人気があるCSSフレームワークのFoundation5の使い方の説明サイト。 先に作成した姉妹サイトのBootstrap3の使い方と比較する形で紹介しています。 ※Foundationのバージョンは作成時の最新版5.5.1版での説明になります。 ※姉妹サイトのBootstrap3の使い方に合わせてカテゴリ分けしているので公式サイトとは違うカテゴリ分けをしています。 Foun
Motion UI | Playground from ZURB
Motion UI is a Sass library for quickly creating CSS transitions and animations. We originally bundled this code with Foundation for Apps, but we've souped it up, made it its own library, and open sourced it ahead of the launch of Foundation for Sites 6. Getting Started Install Motion UI with Bower or npm. The package includes a CSS file with a bunch of premade transitions and animations, along wi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Possible masonry grid layout in Zurb Foundation 6
Foundation Open Source Community
ZURB U | Library
Foundation | Showcase
Foundation | Showcase
Foundation | Showcase
Foundation Open Source Community
Foundation | Website Examples
How to align columns in foundation
Foudationをマテリアルデザインに対応させた・「Material Foundation」
