CSS

【CSS】軽量のCSSフレームワークCutestrap

May 29, 2016
Cutestrap

Cutestrapは軽量のCSSフレームワーク。フォーム、グリッド、タイポグラフィなどが含まれています。

フォーム

<form>
  <label class="textfield">
    <input type="text" />
    <span class="textfield__label">Your Name</span>
  </label>
  <label class="select">
    <select>
      <option disabled="disabled" selected="selected">Flavors</option>
      <option>Chocolate</option>
      <option>Vanilla</option>
    </select>
    <span class="select__label" for="select">Flavor</span>
  </label>
  <label class="radio">
    <input type="radio" name="example" />
    <span class="radio__label">Cone</span>
  </label>
  <label class="radio">
    <input type="radio" name="example" />
    <span class="radio__label">Bowl</span>
  </label>
  <label class="textfield">
    <textarea></textarea>
    <span class="textfield__label">Special Requests</span>
  </label>
  <label class="checkbox">
    <input type="checkbox" />
    <span class="checkbox__label">Sprinkles</span>
  </label>
  <br/>
  <input type="submit" value="Place Order" />
</form>

ボタン

<button>Default</button>
<button class="btn--secondary">Secondary</button>
<a class="btn btn--link" href="#">Link</a>

グリッド

グリッドはflexbox。

<section class="grid">
  <div>25% Column</div>
  <div>25% Column</div>
  <div>25% Column</div>
  <div>25% Column</div>
</section>

MITライセンス