Cassowary Constraint Solverに基づくGSS(Grid Style Sheets)

Cassowary Constraint Solverに基づくGSS(Grid Style Sheets)

私: 皆さんCSSを知っているよね?
皆: もちろん!
私: SCSSも結構一般に使われているよね!
皆: はーい!
私: では、GSSは?
皆: …(何、それ?)

そう、GSS(Grid Style Sheets)はアンダーグラウンドな技術で、あまり知られていません。
Cassowary Constraint Solverと言うアルゴリズムに基づく技術です。

Cassowary Constraint Solver

簡単に説明すると、Cassowary Constraint SolverはOS X LIONに導入されたAuto Layout エンジンの(非常に複雑な)アルゴリズムです。

Auto Layoutの細かい説明はこちらに見れます:

GSSとは?

GSSの意味は「Grid Style Sheets」です。

実は、JavascriptのPolyfillsです。デバイス間の穴を埋めるような技術ですね。

GSSのクリエータのサイト(とダウンロード)はこちら: http://gridstylesheets.org/

このライブラリーの目的は:ただのCSSやSCCSでは中々難しいところとをもっと楽にすることです。
特に、センタリング。

言葉だけで伝えにくいですので、こちらのビデオを見てください:

(シンタックスの説明が15:15から始まります)

CODEPENのサンプルもあります:
http://codepen.io/thegridgssdocs/pen/PweaGN

で?本当にこれは役に立つ?

個人の意見ですが、この技術をWebのUIで使う大きいメリットがまだ明らかになってないです。

いくつかのエレメントのセンタリングのためだけ新しいシンタックスを勉強するのはちょっとキツイと思って、センタリング以外のメリットが現れればもう一度考えると思います。

と言うことで、様子を見ます!

以上

あなたにおすすめ

ロイヤリティフリーの無料ストックフォト(写真)1+8選... ロイヤリティフリー(ライセンスフリー)の無料写真を集めているサイトも順調に増えてます。全員が発信者となる現在では、こうしたサイトの重要度・便利度は増すばかりですね。 基本的にパブリッックドメイン(商用利用可能・無料・用途の制限なし)で...
リニューアルのケーススタディ、PSDファイルから自動コーディング、ロゴ検索ツール、グラフ用フォント(... こんにちは。 今週の【UX・デザイン】の情報共有です。 UI ・UX アプリのリニューアルのケーススタディ 2年間まったく更新されなかった健康保険アプリのリニューアルの話です。 他社はどのようにしてリニューアルを行...
UI・UXのベストプラクティス、フラットデザインについての実験結果、ATLASSIANの新CI、無料... こんにちは! 今週の【UX・デザイン】の情報共有です。 UI ・UX UI・UXのベストプラクティスまとめ 心理学とマーケティングを双方のスペシャリストであるNick Kolendaさんのサイトです。 彼のサイト内...
「Design Better」ポッドキャスト、CSSでのレスポンシブな端末、無料フォント、日本科学未... お疲れ様です。 今週の【UX・デザイン】の情報共有です。 UI ・UX 「Design Better」のポッドキャスト 他社や海外において、どのようなUI/UXの戦略が実践されているのか、そしてどのような手法がベストプラ...