「The 1Kb CSS Grid」をSCSS化してみた

CSS フレームワークについて調べていたところ、「どんなCSSフレームワークがあるのか調べてみた一覧と感想 – ふじこのプログラミング奮闘記」で The 1Kb CSS Grid というフレームワークを見つけました。

他の多くのフレームワークには、レイアウトだけでなく、タイポグラフィーやフォーム要素のスタイルなども含まれていますが、The 1Kb CSS Grid はグリッドシステムのみ。コードは至ってシンプルで使いやすい!のですが、ダウンロードの際にグリッドの定義を決めなければならないので、異なる定義が欲しい時に、毎回ダウンロードしなければならず、ちとめんどくさい。

ということで、変数の値を変えるだけでOKなように、SCSS化してみました。

Grid Settings のところにある、3つの変数($columns, $col_width, $gutter)の値を変えてコンパイルすれば、好きな定義の CSS が手に入りますです。

[追記]

オリジナルの The 1Kb CSS Grid では、.column と .grid_xx を必ずセットで指定しなければならないようです。

<body>

<div class="row">
	<div class="column grid_9"><p>9</p></div>
</div>

<div class="row">
	<div class="column grid_6"><p>6</p>
		<div class="row">
			<div class="column grid_3"><p>3</p></div>
			<div class="column grid_3"><p>3</p></div>
		</div>
	</div>
	<div class="column grid_3"><p style="line-height: 212px;">3</p></div>
</div>
</body>

たぶんCSS の管理上、クラスを分けてるんでしょうが、HTMLの[email protected] を使ってちょっと変更してみました。

これで、CSS(SCSS)の管理も問題ないし、HTMLもより簡潔に書けます。

<body>

<div class="row">
	<div class="grid_9"><p>9</p></div>
</div>

<div class="row">
	<div class="grid_6"><p>6</p>
		<div class="row">
			<div class="grid_3"><p>3</p></div>
			<div class="grid_3"><p>3</p></div>
		</div>
	</div>
	<div class="grid_3"><p style="line-height: 212px;">3</p></div>
</div>

</body>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>