Grid-sytem
12カラムのグリッドシステムです。背景色はわかりやすくするためにつけていますが、通常は背景色の指定はありません。
TWELVE
ONE
ELEVEN
TWO
TEN
<div class="siimple-grid"> <div class="siimple-grid-row"> <div class="siimple-grid-col siimple-grid-col--12">TWELVE</div> </div> <div class="siimple-grid-row"> <div class="siimple-grid-col siimple-grid-col--1">ONE</div> <div class="siimple-grid-col siimple-grid-col--11">ELEVEN</div> </div> <div class="siimple-grid-row"> <div class="siimple-grid-col siimple-grid-col--2">TWO</div> <div class="siimple-grid-col siimple-grid-col--10">TEN</div> </div> </div>
Button
My button
<div class="siimple-btn siimple-btn--blue">My button</div>
6カラム
My button
My button
My button
My button
My button
My button
<div class="siimple-grid"> <div class="siimple-grid-row center"> <div class="siimple-grid-col siimple-grid-col--2"><img src="http://placehold.jp/150x150.png"><div class="siimple-btn siimple-btn--blue">My button</div></div> <div class="siimple-grid-col siimple-grid-col--2"><img src="http://placehold.jp/150x150.png"><div class="siimple-btn siimple-btn--blue">My button</div></div> <div class="siimple-grid-col siimple-grid-col--2"><img src="http://placehold.jp/150x150.png"><div class="siimple-btn siimple-btn--blue">My button</div></div> <div class="siimple-grid-col siimple-grid-col--2"><img src="http://placehold.jp/150x150.png"><div class="siimple-btn siimple-btn--blue">My button</div></div> <div class="siimple-grid-col siimple-grid-col--2"><img src="http://placehold.jp/150x150.png"><div class="siimple-btn siimple-btn--blue">My button</div></div> <div class="siimple-grid-col siimple-grid-col--2"><img src="http://placehold.jp/150x150.png"><div class="siimple-btn siimple-btn--blue">My button</div></div> </div> </div>