Installation
Guide
Github
Wing Logo

Wing

A beautiful CSS framework designed for minimalists.

FEATURES

Intuitive

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.

Lightweight

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

Beautiful

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

INSTALLATION

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

CDN
<link rel="stylesheet" href="https://unpkg.com/wingcss"/>
NPM
$ npm install wingcss

GUIDE

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

TYPOGRAPHY

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

Paragraph

Bold

Italic

Links

GRID

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

{{col}}

<div class="row">

  <div class="col">{{col}}</div>

</div>

Alternatively, you can use the col-1-col-12 classes.

BUTTONS

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:

<button>Content</button>

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

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

FORMS

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>

NAVIGATION

Wing comes with a simple, customizable navigation component.

Item Item Item 
<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>
</div>

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.

CARDS

Wing comes with a sleek card component.

Header

Here is some content for a beautiful card made with the Wing CSS framework. A card can be within multiple .cards for a card-based responsive interface.

Footer Link

Header

Here is some content for a beautiful card made with the Wing CSS framework. A card can be within multiple .cards for a card-based responsive interface.

Footer Link

<div class="cards">
  <div class="card">
    <h5 class="card-header">Header</h5>
    <p class="card-body">Content</p>
    <div class="card-footer center text-center"><p>Footer</p></div>
  </div>
  <div class="card">
    <h5 class="card-header">Header</h5>
    <p class="card-body">Content</p>
    <div class="card-footer center text-center"><p>Footer</p></div>
  </div>
</div>

UTILITIES

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