Wing

Minimal CSS Framework

v0.1.9


Is Wing for You?

Wing is made for those smaller side projects, as it isn't as full featured as Bootstrap, Foundation, etc. Wing styles basic elements, comes with a grid, and some fading animations. Still, what more do you need?


If you love Wing, then tweet it, star it, or fork it, it really helps ♡


Open Source

Wing is 100% open source, so you can learn from it, and see what happens under the hood. Check it out on Github. Make sure to star it! Wing is also released under the MIT License, allowing you to use it in a variety of projects.

Mobile Friendly

Wing makes it super-simple to make websites responsive and mobile-friendly. The grid, containers, typography, buttons...everything! It is all mobile-friendly and easy to use.

Try Resizing Your Browser
Lightweight

Wing is only ~4kb minified. Making it super fast to load and use. You don't need to compile any files, nothing complex. All you do is link to it and you are done. Because of Wing's lightweight file size, it will load much faster than <place-framework-here>

Browser Support

Wing supports a variety of browsers, including

  • Chrome
  • IE 10+
  • Firefox
  • Opera
  • Safari
  • Edge

Documentation

How you use Wing.

Get Started
Install with NPM

Run npm install wingcss, and link to ./node_modules/wingcss/dist/wing.min.css


Install with Bower

Run bower install wingcss, and link to ./bower_components/wingcss/dist/wing.min.css


Link via CDN

CDNJS Link - https://cdnjs.cloudflare.com/ajax/libs/wingcss/0.1.8/wing.min.css

JSDelivr Link - https://cdn.jsdelivr.net/wing/0.1.8/wing.min.css


Link via Wing Website

Add this to your <head>: <link rel="stylesheet" href="http://usewing.ml/dist/wing.min.css"/>

GRID

Wing is built with a grid. The grid is a 12-column fluid grid. The max-width is 960px. When rendered on smaller devices, it resizes accordingly. The code is minimal and responsive. In fact, try resizing your browser.

ONE
ELEVEN
TWO
TEN
THREE
NINE
FOUR
EIGHT
FIVE
SEVEN
SIX
SIX
SEVEN
FIVE
EIGHT
FOUR
NINE
THREE
TEN
TWO
ELEVEN
ONE
                      
<!-- .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>

                  
TYPOGRAPHY

Wing is built with responsive typography based on rems. Wing also changes everything to base 10, so 1 rem is 10px.

The font for headers, (h1, h2, h3, h4, h5, h6) is Quicksand. For paragraphs, it is Open Sans. Both fonts are free and served via Google Fonts. It will result in beautiful typography, which can always be overridden.


This means that typography comes with things such as links, bold, italics, and underline.

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading
                              
<!-- headings, in Quicksand -->
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>

<!-- paragraphs, in Open Sans -->
<p>I'm a paragraph</p>

<!-- other styles -->
<strong>bold</strong>
<em>italics</em>
<u>underline</u>

                          
BUTTONS

Wing comes with a variety of buttons, some simple, some a little more complex. Buttons come in three styles, primary, outline, and clear.

Primary

This is the default button, a vibrant button for the main task.

<button>Primary Button</button>
Outline

This is the outlined button, a nice minimal button for every situation.

<button class="btn btn-outline">outline</button> - outlined button <button class="btn btn-outline-inverted">outline-inverted</button> - inverted colors outlined button
Clear

This is the clear button, a button for the not-important task.

<button class="btn btn-clear">clear</button> - clear button
Disabled

This is a disabled button, your users will not be able to click it.

<button disabled></button> - disabled button
Hack It

Don't like the color, the background? Wing makes it super easy to hack the buttons.


button {
    background: #40d5de;
}
                              
Forms

Forms are pretty difficult to style, which is why Wing makes forms a piece of cake. We want it to be really easy for developers to make forms that look nice, work, and are responsive. So Wing will style all form elements.

The code for the form above. All form elements are automatically styled.

                              
<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>

                          
Lists

Wing styles your lists for you automagically. After adding wing, your lists will look sleek and modern.

  • Item 1
  • Item 2
  • Item 3
  1. Item 1
  2. Item 2
  3. Item 3

Unordered Lists

                              
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

                          

Ordered Lists

                              
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

                          
Code

Wing styles code examples for you, and makes them responsive.

To style code in a single line, simply wrap the code in <code>. To style big blocks of code, wrap the code inside of <code>, and wrap in a <pre>


<!-- Single Line Code Examples should be wrapped in <code> -->
<code>console.log("Hello World");</code>

<!-- Blocks Of Code Should be in <code> wrapped with <pre> -->
<pre><code>
function sayHello() {
    console.log("Hello Wing");
}
</code></pre>
                              
Utilities

Wing comes with a number of utlity classes. It is better to use these utility classes instead of making another class in your stylesheet.

                      
<!-- Pulls element to the right -->
<div class="pull-right"></div>
<!-- Pulls element to the left -->
<div class="pull-left"></div>
<!-- Makes the text aligned center -->
<div class="text-center"></div>
<!-- Makes element fixed in the center -->
<div class="center"></div>
<!-- Makes an element horizontally aligned -->
<div class="horizontal-align"></div>
<!-- Makes an element vertically aligned -->
<div class="vertical-align"></div>
<!-- Makes an element full screen -->
<div class="full-screen"></div>

                  
Thanks For Visiting

Thank you for checking out Wing, we hope you enjoyed your experience. If you find any issues or bugs, just submit it here.
If you really like Wing, once again (sorry) star or share it. It lets us know we are doing the right thing :)