TOP FIXED

はてなブログトップページ固定化のDEMO

Grid-sytem

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>