HTML 5

CSS 3/SASS

Susy

Ciné chez soi

ブランドおよびウェブサイトのデザイン

Ciné chez soi(自宅の映画館)は、映画とウェブデザイン/ウェブ開発という、私個人が特に情熱を注いでいる2つのものを組み合わせた、現在まだ進行中の個人的なプロジェクトです。 自分でブランドをデザインし、レスポンシブグリッド用にSASSとSusyを使用して、ウェブサイトを開発しました。

in_browser
01
コンセプト

お薦め映画

このウェブサイトは、映画好きの人を対象にして映画評や評価、あらすじ、コメントなどを提供する、お薦め映画のプラットフォームです。

私はこのサイトを、複数のデバイスやブラウザ、画面サイズでアクセスできるようにしたい、またクリーンで映画ポスターを中心とした見た目にしたい、と思いました。

img-project-center

同サイトにはデスクトップとモバイルバージョンがあります。

02
デベロップメント

LibsassとSusyを使ったレスポンシブデザイン

同ホームページは HTML SASS を使用して開発されました。私のSASSワークフローにはBourbonVertical Rhythm 、Susyといった複数のプラグインが含まれていることから、SASSをCSSにコンパイルするのにRubyではなくLibsassを使いました。Libsass は SASS のc/c++ポートで、Rubyの4000倍速く、どんなプロジェクトにも統合しやすいのです。

私はウェブ用のグリッドを迅速にデザインするために、Bootstrap や Foundation といったCSSフレームワークから Responsive Grid System といったサイトまで、ウェブで入手可能なツールを過去に多々利用してきました。 こういったソリューションの問題点は、これらのツールのほとんどが、ワークフローにBEM規則を採用しているためすでに混み合ってきている私のマークアップにさらに大量のクラスを追加してしまうので、コードベースを膨れ上がらせてしまうこともあり、パフォーマンスに影響を与えかねないことです。

こういった問題の解決策が、私にとってはSusyだったのです。これは SASS ベースのグリッドフレームワークで、速く、レスポンシブ、かつ軽量で、マークアップに何も追加することなく完全にカスタマイズ化したグリッドを作成することを可能にしてくれるツールです。

グリッドのセットアップ

まず最初に、setting.scss にソートされ同サイトのグローバル設定がすべて含まれるマップの中に、グリッド用のデフォルトパラメータを作りました。シンタックスは次のようになります。:


                  						$susy: (
                                						  container: 100%,
                                						  columns: 12,
                                						  gutters: 0,
                                						  global Box Sizing: border-box,
                  						);
                  				

このマップの中では幾つかのグローバル値が定義付けられています。レイアウトがページの全幅まで拡張できるよう、コンテナは100%に設定されており、カラムの数は12に設定、同サイトの全ブロックがこの数のサブディビジョンとなります。カラム間ガター値は0に設定、使用ボックスモデルは border-boxと設定します。

これはデフォルトの Sussy マップ値を使用して実装されたレイアウト:

img-project-center

これはデフォルトの Susy マップ値を使用して実装したレイアウトです。

前に述べましたように、各主要コンテナはグリッドのカラム総数のサブディビジョンとなっています。設定ファイルに設定されたデフォルト値のお蔭で、コンテナサイズやカラム数が変更した場合はブロックサイズは自動的に更新されます。

グリッド・システムの実装

Susy はグリッドのカスタマイズ化にあたりSASSに完全に依存していますので、HTML マークアップには他に何も追加する必要がないのです。Susyを用いたグリッド作成において最も重要な特徴は、span mixinです。

上の画像でお分かりのように、主要ブロックは 12 カラムグリッド内部にある特定のスペースを占拠する必要があります。

モバイル・デバイスにおいては、主要ブロックのすべてがグリッドの全幅に拡張し、ヘッダーは 12 のカラムのうち4つのカラムを取るロゴと、8つのカラムを取るメニュ➖の2つの部分に分かれます。

これはメインレベルのグリッドブロックがモバイルファーストの方法を使ってどうやって実装されたかを示したものです:



                  					.container{
                  						 @include container;
                  						 position: relative;
                  					}
                            .grid-logo{
                  						@include span(4);
                  						height:100%;
                  					}

                  					.grid-menu{
                  						@include span(8);
                  						height:100%;
                  					}

                  					.grid-hero-big{
                  						@include span(12);
                  						height: 766px;
                  					}

                  					.grid-hero-long{
                  						@include span(12);
                  						height: 383px;
                  					}

                  					.grid-hero-small{
                  						@include span(12);
                  						height: 383px;
                  					}

                  					.grid-box-office-movies{
                  						@include span(12);
                  					}

                  					.grid-new-movies{
                  						@include span(12);
                  						margin-top: -411px;
                  					}
                  				

ブレークポイントを使ったレスポンシブ化

この段階で、Susy を使用して構築したグリッドは流動的ではありますが、ウェブサイトはまだレスポンシブではありません。レイアウトをレスポンシブにするために、もう1つミックスインを使いました。Susy-breakpointです。Susy-breakpoint ミックスインはレイアウト内のメディアクエリを扱いやすくしてくれます。メディアクエリのブレークポイントを作成するのに必要な言語を簡潔化することによって、これが可能になります。

私の settings.cssファイルでは、デフォルトブレークポイントのセットをデバイスによって定義付けました:


                  				$desktop : 1040px;
                  				$tablet  : 780px;
                  				$mobile  : 430px;
                			   

これらの変数はその後必要な際に Susy-breakpointミックスイン内部で使用されます。こうやって、ホームページのレイアウトのメインブロックがブレークポイントを含むよう修正されたのです。


                                              .grid-logo{
                					@include span(4);
                					height:100%;
                				}

                				.grid-menu{
                					@include span(8);
                					height:100%;
                				}

                				.grid-hero-big{
                					@include span(12);
                					height: 300px;
                					@include susy-breakpoint($desktop , $susy) {
                						 @include span(5);
                						height: 766px;
                				 	 }

                				}

                				.grid-hero-long{
                					@include span(12);
                					height: 300px;
                					@include susy-breakpoint($desktop, $susy) {
                						@include span(5);
                						height: 383px;
                					}

                				}

                				.grid-hero-small{
                					@include span(12);
                					height: 300px;
                					@include susy-breakpoint($desktop, $susy) {
                						@include span(2);
                						height: 383px;
                				 	 }

                				}

                				.grid-box-office-movies{
                					background:$blue--dark;
                					@include span(12);
                					margin-top: 0;
                					padding:20px;
                					@include susy-breakpoint($desktop, $susy) {
                						@include span(7);
                				 	 }

                				 	 @include susy-breakpoint($tablet , $susy) {
                				 	 	padding	: em(72px) em(110px) em(109px) em(157px);
                				 	 }
                				}

                				.gild-classique-movies{
                					margin-top: 133px;
                					@include span(12);

                					@include susy-breakpoint($desktop, $susy) {
                							@include gallery(6);
                							padding-left: 40px;
                					 }
                				}
                        

結論

このプロジェクトで Susy を使ってみて、このグリッドフレームワークを使えばいかに大量のコードなしでシンプルなレイアウトでも凝ったレイアウトでも早く簡単に作成することができるかが分かりました。このフレームワークは今後、特にブラウザ内で直接デザイン作業を行う場合やウェブサイトのレイアウトのプロトタイプを作成する際に、時間を節約するのに役立ってくれると思います。