スージーをCodekitで実行した後、私はようやくもっと徹底的に試すことができました。私はグリッド全体とスージーのことから始めています。そこで、運動目的で構築しようとしている最近のWebサイトのデザインにSusyグリッドを適用しようとしました。しかし、Susysの動作と、Susyホームページのシナリオでカバーされていないいくつかのエッジケースのベストプラクティスについて、かなりの数の質問が発生しました。私のマークアップは次のようになります。
<div class="wrapper">
<header role="banner">
<div class="finish"></div>
<a href"/"><a>
<nav role="navigation">
<ul>
<li><a href="#kunden"></a>Kunden</li>
<li><a href="#projekte"></a>Projekte</li>
<li><a href="#leistungen"></a>Leistungen</li>
<li><a href="#agentur"></a>Agentur</li>
<li><a href="#kontakt"></a>Kontakt</li>
</ul>
</nav>
</header>
<aside class="intro testcol">
<h3>Headline 3</h3>
<p>Ferferiandus ma plibus voluptas assi dis peria conectati dus que mi, sundae seque maximod ipsunt ut opta eture sus dit, nos iligentiis rentin res quam dendi officiae quas esequam, volup- tibea sit, simpore pedis eum explani magnatu mquias dolorio cus aut modolectur sequis nullescid ut veni doluptaturem dolorupit estorpo raectatus.</p>
</aside>
<section name="projekte" class="test" role="main">
<hgroup>
<h1>Unsere Projekte</h1>
<h2>Subtitle</h2>
</hgroup>
<ul class="moodlegrid">
<li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
<li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
<li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
<li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
<li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
<li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
<li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
<li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
<li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
</ul>
</section>
</div>
これは次のことにつながります（私のステータスのため、まだ画像を投稿することは許可されていませんが、この場合は必須なので、直接リンクを配置しました）：
https://dl.dropbox.com/u/8578/sample.png
したがって、divはページのコンテンツをラップしています。ヘッダーにはロゴ（下のスクリーンショットには表示されていません）とナビゲーションが付いています。次に、その灰色のボックスが浮いているための脇の要素があります。いくつかのセクション（レジスターカードなど）の下に配置されます。スクリーンショットには部分的に1つだけ含めています。各レジスタカードは、画面を全幅で覆う必要があります。各レジスターカードの間に、背景画像が透けて見えます。背景画像は@includebackground-size（cover）で配置されます。各レジスターカードの補足として、左右にそれぞれ約10％のブリードがあるはずなので、コンテンツは中央の80％にしか含まれていません。また、各セクションのコンテンツ領域には、liのマトリックス（上記のhtmlコードのように）またはコンテンツのdivを配置する1〜3の列が含まれています。私がこれまでに使用したcssのいくつかの部分：
$base-font-size: 17px;
$base-line-height: $base-font-size * 1.5;
$total-columns: 20;
$column-width: 4em;
$gutter-width: 1em;
$grid-padding: $gutter-width;
@mixin bleed($padding: $grid-padding, $sides: left right) {
@if $sides == 'all' {
margin: - $padding;
padding: $padding;
}
@else {
@each $side in $sides {
margin-#{$side}: - $padding;
padding-#{$side}: $padding;
}
}
}
* {
@include box-sizing(border-box);
}
body {
background: url('../img/body-bg.jpg') no-repeat center center fixed;
@include background-size(cover);
color:#333;
padding:0;
margin:0;
width: 100%;
font-size: $base-font-size;
font-family: "Signika", Georgia, serif;
@include establish-baseline;
}
.wrapper {
width:100%;
@include container;
@include susy-grid-background;
@include bleed;
}
最後のラッパー内には、脇とセクションがあります。基本的な質問は次のとおりです。
a）最初にベストプラクティスに関する一般的な質問。説明した例では、ラッパーdivに1つのコンテナーを配置するだけで十分ですか、それとも複数のコンテナーを作成して、ドキュメント全体に配置した場合にそれらのコンテナーを相互に整列させる方がよいでしょうか。すべてに1つのコンテナ、またはヘッダーに1つのコンテナ、aside要素に1つ、各セクションに1つのコンテナのいずれかを意味しますか？
b）脇の要素のためのコンテナを作成することは思慮深いでしょうか。左側の1列のコンテンツ領域で1回ブリードし、右側で1回ブリードすることを意味しますか？それとも、その場合にコンテナを使用することは不利ですか？
c）セクションを見ると、基本的に、セクションを画面の幅全体に塗りつぶし、両側にx列のブリード（pad（）？で配置）を配置し、中央に「コンテンツ」を配置することは可能です。 x列に分割された領域（スパン列を含む）。
d）スクリーンショットに見られるように; 各セクションの上部には、互いに向き合う2つの矢印があります。各矢印は、テキストを含むコンテンツボックスと、三角形と長方形を含む前後の疑似クラスで構成されます。後者は、画面の両側まで伸びる必要があります。各要素を列内に配置することで、レスポンシブなcssのみのソリューションを取得することは理にかなっており、可能でしょうか。
col1 col2 col3col4col5長方形の内容三角形の内容長方形の左右
100％の幅を割り当てることにより、各要素は、応答性を保ちながら、それが含まれる列の全幅を埋める必要があります。そして、このアイデアがうまくいく可能性がある場合は、セクションごとに2つのコンテナを作成する必要がありますか（矢印用に1つ、下にブリードがあるコンテンツ用に1つ）、または1つで十分ですか？
e）最後の質問はアプリケーションについてです。私が使用する場合：
.moodlegrid li{
@include column-count(3);
@include column-gap(1em);
@include inline-list;
}
最初からスクリーンショットのように見えます。Susyミックスインを使用すると、次のようになります。
.moodlegrid li{
@include span-columns(4,12);
@include span-columns(4,12);
@include span-columns(4 omega,12);
@include inline-list;
}
結果は次のようになります。
https://dl.dropbox.com/u/8578/result2.png
さて、今のところは以上です。私はまだ少し混乱していて、ベストプラクティスについて、またこれまでのところすべてを順調に行っているかどうかについて確信がありません。;）ヒントや提案をいただければ幸いです。よろしくお願いしますラルフ