Wing – Minimalist CSS Framework Web Designers Want

By Jake Rocheleau. in Toolkit. Updated on April 9, 2018.

The frontend ecosystem is full of open-source frameworks made to improve your development process. Usually, everyone wants something different from these frameworks; some people look for aesthetics while others want speed or usability.

Wing is a newer framework and a minimalist’s best friend. It comes with a default grid setup, custom elements, and components that total 5 KB.

Perhaps the best part about Wing is the auto-styling for default elements. If you just drop the Wing CSS stylesheet into your project you’ll notice changes immediately.

Default text, links, and page elements automatically shape themselves based on Wing’s designs. You can also add extra classes of your own to add more aesthetics to the page.

Wing ships with a 960px grid system using a 12-col structure. This is a very simple setup and the 960px grid is usually considered far too small for today’s widescreen audience. But, if you like smaller websites this is an excellent choice.

https://usewing.ml/ is crazy simple and follows something like this:

<div class="row">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
</div>

You can include a full copy of Wing from the Unpkg CDN. They keep their files up-to-date with the latest version, so you never need to change filenames. Just add this URL to your header and you’ll get full access to the current Wing framework.

Alternatively, you can download the package via npm or pull a copy of the source right from GitHub.

I’d compare Wing to Normalize.css which is a much smaller CSS framework, that’s more like a reset library. Wing actually comes with default styles while Normalize.css just resets elements to work the same in all browsers.

The beauty of both is that you have full control to edit, restyle, and reformat the page however you see fit.

All documentation and code snippets can be found on Wing’s homepage, so use that guide if you’re not sure how to set up your site.