CSS

【CSS】モバイルフレンドリーで軽量のフレームワーク。WING

September 24, 2016
wing

WINGはブートストラップなどの機能を備えたモバイルフレンドリーで軽量のフレームワーク。グリッド、フォーム以外にもタイポグラフィ、ボタン、リストなどがあります。

Documentation

CDN

https://cdnjs.cloudflare.com/ajax/libs/wingcss/0.1.4/wing.min.css
https://cdn.jsdelivr.net/wing/0.1.4/wing.min.css

Wing Website

<link rel="stylesheet" href="http://usewing.ml/dist/wing.min.css"/>

GRID

wing-1

<!-- .container should be wrapping around the grid -->
<div class="container">

    <!-- For each row, give the class "row" -->
    <div class="row">
        <!-- for columns, add the class col-x, there are twelve -->
        <!-- columns in total, and nesting is not recommended -->
        <div class="col-6">six</div>
        <div class="col-6">six</div>
    </div>
</div>

Forms

wing form

<form>
    <div class="row">
        <div class="col-6"><input type="text" placeholder="Your Name"/></div>
        <div class="col-6">
            <select placeholder="Select One">
                <option>Wing is Awesome</option>
                <option>Wing is Amazing</option>
            </select>
         </div>
    </div>
    <div class="row">
        <div class="col-12"><textarea type="text" placeholder="Your Message"></textarea></div>
    </div>
                      
    <input type="submit" />
</form>

Browser Support

  1. Chrome
  2. IE 9+
  3. Firefox
  4. Opera
  5. Safari
  6. Edge

MIT