【CSS】軽量のCSSフレームワーク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ライセンス

 
Cutestrap

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

  • LATEST
  • RELATED
  • POPULAR