グリッドの拡張-メイクアップライフを少し簡単にする

モジュラーメッシュのコンセプトは、ここ数年で非常に流行しました。 まず第一に、デザイナーから。 次に、コーダー。



原則として、これは悪くありません。 彼の職業の詳細に基づいて、正しく使用する場合、順序とモジュラーグリッドを愛する必要があります。それらは、生活を大幅に簡素化し、レイアウトレイアウト中に快適な調和を作ります。



モジュラーグリッドについて少し



モジュラーレイアウトシステムは、ストライプとターンの構成の基礎が、水平または垂直に同じまたは異なる特定のステップ(モジュール)を持つモジュラーグリッドであるレイアウトシステムです。 ウィキペディアに基づいています。







さらにいくつかのリンク:



http://cherenkevich.livejournal.com/38085.html

www.htmlbook.ru/content/?id=79



また、モジュラーグリッドについてHabréで複数回書いています。



グリッドのディストリビューターの1つは、悪名高い960.gsフレームワークになりました。 現在、それらの多くがあり、自尊心のあるCSSフレームワークは、魔法の言葉グリッドなしではできません:)、たとえば、同じブループリント



この流行のトレンドに続いて、このスタックまたはそのスタック(もちろん960.gsが多い)で作成されたレイアウトは、レイアウトにますます頻繁になります。 もちろん、多くのツールとメッシュジェネレーターが登場しましたが、不便でした。 グリッドを毎回生成してcssに埋め込むのは不便です。 編集するのは難しく、オフにするのは難しいです。 多くの場合、さまざまなバグがさまざまなブラウザで表示されます。



はい、Firefoxにはいくつかのツールがあります。 最初のマイナス点は、それらの多くはありません-Web DeveloperGridFoxです。 そして、2番目に重要なマイナスは、Firefoxでのみ機能します。 すべてのブラウザで動作するようにしたかった。



また、非常によく似た別のアナログhttp://gridder.andreehansson.se/もありますが、やはり960に厳密にバインドされています...しかし、アイデアと実装は非常に似ています。



まだ残っているかもしれませんが、それはすでにあまりにも面倒でした。



夢では、小さなソケットを作りたいと思っていました。それを使って、任意のグリッド(オプション960)を作成し、どこにでも挿入できます。 そして、グリッド上のデータが保存され、どのブラウザーでも機能することを確認します。



だから、これはとても短いリストで、夢から現実になったものです。



最後に何が起こったのですか?





Extend Grid



図 1- 動作中のグリッドの拡張



使い方は? とても簡単です。 3つのjsファイルを接続するだけです。 接続されているファイルの数で誰かが混乱している場合、それらを1つにまとめることができます。 便宜上、Extend Gridは、ローカライズ、設定、およびメインスクリプト自体の3つの部分に分かれています。



例:



<script type="text/javascript" src="http://grid.wlcteam.ru/1.1/extend.grid.ru.pack.js"></script>

<script type="text/javascript" src="http://grid.wlcteam.ru/1.1/extend.grid.settings.js"></script>

<script type="text/javascript">

// ( ID)

var parentGridLayout = "wrapper";

</script>

<script type="text/javascript" src="http://grid.wlcteam.ru/1.1/extend.grid.min.js"></script>








すべてのソースはこちらです。

すべてを単一のアーカイブにダウンロードすることもできます



しかし、短所なしではない



各ブラウザで、データを再入力する必要があります。

プロジェクトへの分割はありません。 もちろん、設定でCookieを使用して共有することもできますが、インターフェイスでお願いします。

インターフェイスの欠点。 現時点では、ピクセルへの明確な参照。 はい、設定で変更できますが、測定単位はグローバルで、列と列の両方のすべてのモジュールに適用されます。



原則的に修正可能なインターフェースの主な欠点。 しかし、一般的に、いくつかのプロジェクトでの戦闘テストの後、Extend Gridはすでに成果を上げています。



計画



コードを書き直して、jQueryプラグインにします。

上記の短所を修正します。

たとえば、ルーラーなどのいくつかの機能を追加します。

そして、実際にバグレポートと希望を収集します。



All Articles