Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: Framework

[CSS] Flexy CSS Framework – ミニマルなCSSフレームワーク

  • Pocket
  • このエントリーをはてなブックマークに追加

機能をほぼグリッドレイアウトに絞ったミニマルなCSSフレームワーク。ダウンロードや詳細なドキュメントはGithubから確認ができます。特徴としてはまずファイルサイズが軽量な事。Row(行)内のカラム幅をパーセントで指定できる事。Bootstrapの12分割システムよりも細かい指定ができます。あとFruidカラムを設置できる事。これはカラム幅を指定せず配置する事で、数値指定したカラム以外の残りの幅いっぱいに使えるという指定。Fruidカラムは1つのRow内に複数配置できるようです。Bootstrapのような多機能なフレームワークは必要なくて、ただグリッドレイアウトができればそれでいい、というシンプルな機能を求める人向けのフレームワークという印象でした。

[CSS] CSShake – シェイクアニメーションを多数用意したCSSライブラリ

  • Pocket
  • このエントリーをはてなブックマークに追加

揺らす事だけにフォーカスしたとってもニッチなCSSライブラリ。CSSファイルだけで構成されているので、導入も簡単です。サンプルアニメーションもサイト内に多く紹介されています。マウスオーバー時なんかに使えそうですが、常に動いてると押してアピール強すぎて少々ウザくなるかもしれません。

[CSS] Keiyaku CSS – 日本の契約書のためのCSSライブラリ

  • Pocket
  • このエントリーをはてなブックマークに追加

Markdownで書かれた契約文書を、適切な印刷書式にスタイリングするためのCSSライブラリ。契約書でよく見る、第何条何項みたいな書式を、マークダウン形式で簡単に記述することができます。HTML書かなくてもマークダウンで簡単に書けるという点も魅力です。契約書以外にも、例えばサイト内の利用規約のスタイルとしても使えそうです。お硬い系の記述ってどうしても必要ですからね。

[CSS] Basscss – 汎用クラスをまとめたCSSフレームワーク

  • Pocket
  • このエントリーをはてなブックマークに追加

汎用的に使いまわしやすいクラス指定をまとめたCSSフレームワーク。サイト内では「Low-Level CSS Toolkit」と表現されています。サイト内において使いまわしやすいという意味よりは、どちらかというとサイトをまたいで使える汎用的なクラス指定をまとめたフレームワーク、といった感じのものです。例えば「m0」とClass指定する事でmargin:0を指定、「border-bottom」と指定すれば下線を引けます。プロパティ名からClassが命名されているので、CSS書き慣れた人ならすぐに勝手がわかると思います。この記述法だとオブジェクト指向のCSS記述とも相性良さそうですね。
ただし既存のCSSフレームワークとの併用を考えている場合、すでに用意されている指定を再実装しちゃう可能性もありそうです。例えばBootstrapであればHelper Classedといった似たような仕組みが用意されているので、こういう場合は必要なもののみ抽出した上で実装した方が良いかもしれません。

[CSS] Flexbox Grid – フレックスボックスでレイアウトされたCSSグリッドシステム

  • Pocket
  • このエントリーをはてなブックマークに追加

FlexboxでレイアウトされたCSSグリッドシステム。もちろんレスポンシブレイアウトにも対応してます。グリッド指定の仕組みは一般的な手法と同じなので、Bootstrapとか使った事ある人ならすぐに馴染めそうです。機能としてはオフセット指定、オートレイアウト、グリッドのネスト、横や縦方向のアライメント指定、ボックスの順番の入れ替えなどがあります。最後の機能を使うと、記述順とは逆方向にボックスを並べる事もできます。このへんFlexboxっぽい機能だなーと思いました。

[CSS] Bulma: a modern CSS framework based on Flexbox – FlexboxベースのCSSフレームワーク

  • Pocket
  • このエントリーをはてなブックマークに追加

FlexboxベースのCSSフレームワークだそうです。CSSフレームワークってだいたいFloat使ったグリッドレイアウトのものが多いけど、最近じゃレイアウト組む手法も徐々にFlexboxになりつつあるので、慣れた人には便利そうです。実際Flexboxでレイアウト組むの楽ですからね。レスポンシブレイアウトや、フルスクリーン、垂直軸のセンタリング、ボタンやフォームパーツなども揃っているようです。

[Web Design] Material Design for Bootstrap – Bootstrap用のMaterial Designテーマ

  • Pocket
  • このエントリーをはてなブックマークに追加

BootstrapベースのMaterial Designテーマ。製作者が言うには「GoogleはMaterial DesignでWebを美しくして、TwitterはBootstarpでレスポンシブかつエフェクティブに開発できるようにした。なのでこの2つを一緒にした」的な事を謳ってます。実際テンプレートページ(いくつか有料のものもあります)をいくつか見たけどスゴくよく出来てると思います。なんかのLP作る時なんかにちょうどイイテンプレートがチラホラありました。個人的にはMaterial Designにはあまり馴染みがないけど、これはなかなかナイスです。

[CSS3] AniCollection – CSSを使ったアニメーションのコードスニペット紹介サイト

  • Pocket
  • このエントリーをはてなブックマークに追加

CSS3を使った様々なアニメーションのコードスニペットを紹介するサイト。サイト内の角丸四角にマウスオーバーするとアニメーションをプレビューでき、目玉のアイコンをクリックでコードを見る事ができます。また「+」マークを使って複数のアニメーションを選択する事で、アニメーションのコードをまとめて生成する事もできます。アニメーション関連のCSSフレームワークとしても使えますね。