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="https://unpkg.com/wingcss"/>
$ 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.
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:
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> </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
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