Wing Logo


A beautiful CSS framework designed for minimalists.



All you have to do is drop Wing into your project, and everything will be styled automatically. There is a minimal amount of classes to learn.


Wing comes packed with features, including styling for most elements, a grid, and some components, all in just 5kb.


The styles that come with Wing are clean and modern, dropping it into your project will give you a headstart in design.


You can install Wing in multiple ways, but it's as simple as adding a single link tag to your project.

<link rel="stylesheet" href=""/>
$ npm install wingcss


Here is a guide of all the things styled by Wing, how to use the grid, and how to use some components.


Wing styles based on rem units. All rem units are converted to base 10, so 1rem is equal to 10px. By default, all headings, paragraphs, and code use system fonts, using the most modern one available on a user's operating system.

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading






Wing comes with a minimal, 960px, 12 column grid, with intuitive class names.



Wing styles buttons with two main styles, filled and outlined. These styles can easily be overwritten, and are there to provide a base for buttons.

This button is available by default, available with:


This button is available with a single class, available with:

<button class='outline'>Content</button>


Wing styles all common form elements with basic, clean styles.

<input type="text" placeholder="What is your name?"/>
<input type="email" placeholder="What is your email?"/>
<textarea placeholder="Additional details..."></textarea>


Wing comes with a simple, customizable navigation component.

<div class="nav">
  <h5 class="nav-logo">Logo</h5>
  <a class="nav-item" href="#">Item</a>
  <a class="nav-item" href="#">Item</a>
  <a class="nav-item" href="#">Item</a>

All items have a class of nav-item, and an optional logo with the class of nav-logo can be added. Combined with utilities (below) such as fixed, left, right, or center, a navigation can be customized to your needs.


Wing provides some basic utility classes to speed up development.

  • text-center - center align text
  • center - align items within element in the center
  • horizontal-align - horizontally align an element
  • vertical-align - vertical align an element
  • left - align children to the left
  • right - align children to the right
  • full-screen - make element full screen
  • fixed - make element full width and fixed
  • hide-phone - hide elements on a phone
  • hide-tablet - hide elements on a tablet