.l-header

ヘッダー部分のレイアウト。

<div class="l-header">
	ヘッダーのコンテンツ
</div>

.l-header--fixed

ヘッダー部分をposition:fixedで固定します。

<header class="l-header l-header--fixed">
	ヘッダーのコンテンツ
</header>

.l-footer

フッター部分のレイアウト。

<footer class="l-footer">
	Copyright &copy; hoge All Rights Reserved.
</footer>

.l-inner

サイトのインナー部分のレイアウト。

<footer>
	<div class="l-inner">
		コンテンツのインナー部分
	</div>
</footer>

.l-inner--wide

サイトのインナー部分を広げたレイアウト。

<footer>
	<div class="l-inner l-inner--wide">
		コンテンツのインナー部分
	</div>
</footer>

.l-inner--narrow

サイトのインナー部分を狭めたレイアウト。

<footer>
	<div class="l-inner l-inner--narrow">
		コンテンツのインナー部分
	</div>
</footer>

.l-inner--full

サイトのインナー部分を幅いっぱいに広げたレイアウト。

<footer>
	<div class="l-inner l-inner--full">
		コンテンツのインナー部分
	</div>
</footer>

.l-window-full

サイトのインナー部分をウインドウ幅いっぱいに広げたレイアウト。

<footer>
	<div class="l-window-full">
		コンテンツのインナー部分
	</div>
</footer>

.l-window-right

サイトのインナー部分を右側のみウインドウ幅いっぱいに広げたレイアウト。

<footer>
	<div class="l-window-right u-text-right">
		コンテンツのインナー部分
	</div>
</footer>

.l-window-left

サイトのインナー部分を左側のみウインドウ幅いっぱいに広げたレイアウト。

<footer>
	<div class="l-window-left">
		コンテンツのインナー部分
	</div>
</footer>

.l-section

sectionのレイアウト。

<section class="l-section">
	セクションのコンテンツ
</section>

.l-section--sticky

sectionが重なり合うようにスクロールされます。

<section class="l-section l-section--sticky">
	セクションのコンテンツ
</section>

.l-row

display: flexでの横並び。横並びのアイテムをl-rowで囲みます。小要素の数字を合計していき12を超えたら改行されるような仕組みです。

<div class="l-row">
	<div class="l-row__col l-row__col04">col04</div>
	<div class="l-row__col l-row__col04">col04</div>
	<div class="l-row__col l-row__col04">col04</div>
	<div class="l-row__col l-row__col04">col04</div>
	<div class="l-row__col l-row__col04">col04</div>
	<div class="l-row__col l-row__col04">col04</div>
</div>

.l-row--middle

上下中央に揃える

<div class="l-row l-row--middle">
	<div class="l-row__col l-row__col04">HTMLの1番目</div>
	<div class="l-row__col l-row__col04">HTMLの2番目を<br>改行して高さを出す</div>
	<div class="l-row__col l-row__col04">HTMLの3番目</div>
</div>

.l-row--center

左右中央に揃える

<div class="l-row l-row--center">
	<div class="l-row__col l-row__col04">HTMLの1番目</div>
	<div class="l-row__col l-row__col04">HTMLの2番目</div>
</div>

.l-row--reverse

アイテムの並び順を反転します

<div class="l-row l-row--reverse ">
	<div class="l-row__col l-row__col06">HTMLの1番目</div>
	<div class="l-row__col l-row__col06">HTMLの2番目</div>
</div>

.l-row--padding

アイテムに余白を与えます

<div class="l-row l-row--padding">
	<div class="l-row__col l-row__col02">HTMLの1番目</div>
	<div class="l-row__col l-row__col02">HTMLの2番目</div>
	<div class="l-row__col l-row__col02">HTMLの3番目</div>
	<div class="l-row__col l-row__col02">HTMLの4番目</div>
	<div class="l-row__col l-row__col02">HTMLの5番目</div>
	<div class="l-row__col l-row__col02">HTMLの6番目</div>
</div>

.l-row__col

l-rowの子要素として横並びの幅を指定するために必要不可欠な要素。

<div class="l-row l-row--center">
	<div class="l-row__col l-row__col04">HTMLの1番目</div>
	<div class="l-row__col l-row__col04">HTMLの2番目</div>
</div>

.l-row__col[数字]

数字の部分に12を何等分するか指定する。数字は01〜12まで指定できます。例えば、04を指定すると、4/12*100%=33.3%として幅を持たせることになります。

<div class="l-row l-row--center">
	<div class="l-row__col l-row__col04">33.3%分の幅の子要素</div>
	<div class="l-row__col l-row__col08">66.6%分の幅の子要素</div>
</div>

.l-row__col[数字]-tab

-tabを追加することでタブレット時用の幅を持たせることが可能です。

<div class="l-row l-row--center">
	<div class="l-row__col l-row__col12 l-row__col04-tab">スマホ時は100%、タブレット時は33.3%分の幅の子要素</div>
	<div class="l-row__col l-row__col12 l-row__col08-tab">スマホ時は100%、タブレット時は66.6%分の幅の子要素</div>
</div>

.l-row__col[数字]-pc

-pcを追加することでPC時用の幅を持たせることが可能です。

<div class="l-row l-row--center">
	<div class="l-row__col l-row__col12 l-row__col04-tab l-row__col08-pc">スマホ時は100%、タブレット時は33.3%、PC時は66.6%分の幅の子要素素</div>
	<div class="l-row__col l-row__col12 l-row__col08-tab l-row__col04-pc">スマホ時は100%、タブレット時は66.6%、PC時は33.3%分の幅の子要素</div>
</div>