Minimal CSS Framework


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

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


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 -

JSDelivr Link -

Link via Wing Website

Add this to your <head>: <link rel="stylesheet" href=""/>


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.

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


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


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


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

<button>Primary Button</button>

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

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

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

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

    <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>
    <div class="row">
        <div class="col-12"><textarea type="text" placeholder="Your Message"></textarea></div>

    <input type="submit" />


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

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


Ordered Lists

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


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> -->
function sayHello() {
    console.log("Hello Wing");

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