A beautiful CSS framework designed for minimalists.

  • By Kabir Shah
  • Last update: Nov 2, 2022
  • Comments: 14

Wing

A minimal CSS framework.

Build Status Packagist

Features

Everything you need to create a basic project is included, all in a 2kb file (minified + gzipped). On top of that, almost everything is styled automatically, without the need for learning specific classes. This allows for an intuitive experience developing with Wing, as it's designed to be a boilerplate stylesheet for any project.

Installation

npm

$ npm install --save wingcss

Link to It

">
<link rel="stylesheet" href="https://unpkg.com/wingcss"/>

Documentation

Find a bug?

Submit it in the issues

License

Licensed under the MIT License by Kabir Shah

Github

https://github.com/kbrsh/wing

Comments(14)

  • 1

    Optimize/Reduce File Size

    To make room for more styling, there needs to be optimizations made. For example, if there are rules that look like this:

    h1 {
       font-size: 2rem;
    }
    
    h1 {
        font-family: 'Quicksand';
    }
    

    Combine them into this:

    h1 {
        font-size: 2rem;
        font-family: 'Quicksand';
    }
    

    This helps to add new features, such as new input elements in #8

    If you would like to submit a PR, please refer to CONTRIBUTING.md

  • 2

    Add Card / Cards Plugin

    Card / Cards Container Plugin

    Added basic flexbox card and cards container with the bare essentials (#46).

    Note: Only differences between the barebones card and the card(s) using Wing's utility classes are:

    • Card Header text is centered
    • Card Body is centered via .center - the flexbox utility class

    Card (barebones, no utility classes)

          <div class="card">
            <div class="card-header">
              Card Header
            </div>
            <div class="card-body">
              T_his is a card body.
            </div>
            <div class="card-footer">
              Card Footer
            </div>
          </div>
    

    cards

    Cards w/ Wing utility classes

        <div class="cards">
          <div class="card">
            <div class="card-header text-center">
              Card Header
            </div>
            <div class="card-body center">
              This is a card body.
            </div>
            <div class="card-footer">
              Card Footer
            </div>
          </div>
          <div class="card">
            <div class="card-header text-center">
              Card Header
            </div>
            <div class="card-body center">
              This is a card body.
            </div>
            <div class="card-footer">
              Card Footer
            </div>
          </div>
          <div class="card">
            <div class="card-header text-center">
              Card Header
            </div>
            <div class="card-body center">
              This is a card body.
            </div>
            <div class="card-footer">
              Card Footer
            </div>
          </div>
          <div class="card">
            <div class="card-header text-center">
              Card Header
            </div>
            <div class="card-body center">
              This is a card body.
            </div>
            <div class="card-footer">
              Card Footer
            </div>
          </div>
          <div class="card">
            <div class="card-header text-center">
              Card Header
            </div>
            <div class="card-body center">
              This is a card body.
            </div>
            <div class="card-footer">
              Card Footer
            </div>
          </div>
        </div>
    

    cards-w-utilities

  • 3

    Add navbar component

    Hello,

    Is there a way to add a simple navbar (like that but more simpler, of course: http://bootsnipp.com/snippets/featured/navbar-search-add-on-bs-3 ) in wing?

    Or is there a way to have a invisible navbar menu which can collaspe for mobile using wing 0.1.7?

    Thanks

  • 4

    V1.0.0 beta

    Navigation

    Added basic navigation with several configuration options (#28).

    Options

    • .nav-fixed: navigation will be fixed to the top of the page
    • .nav-right: navigation list (links) aligned to the right
    • .nav-center: navigation list (links) aligned center
    Navigation Default

    nav-default

    Navigation Center

    nav-center

    Navigation Right

    nav-right

    Editor Config

    Added .editorconfig to keep coding style consistent.

  • 5

    Also add style for other input elements

    Currently there is only [type="text"] and [type="button"] styled. But there are so many more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes

    So I've already tried some tweaks, but there is no perfect solution without having a selector that contains all this types (or at least the most common)

    Like this (messy & not classy 😅):

    input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=reset]), select
    /* or this */
    input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], input[type=url], input[type=tel], input[type=datetime], input[type=color], input[type=date]
    

    in forms.css#L6

    So the other point is, this framework should cover this (or at least some of the most common types) in my opinion - but it would make also the filesize bigger.

    screenshot-wing-html gist of the screenshot

  • 6

    Move to Flexbox, Plugins

    Wing will be moving to flexbox, give your opinion here.

    Reasons for moving to flexbox

    • Cleaner code
    • Less file size (more features can be added now)
    • 97% of browsers support flexbox

    Now, utility classes like .center and .vertical-align are easily implemented. The grid will be given a revamp, with simpler classes and shortcuts.

    You will be able to do

    <div class="row">
        <div class="col">Automatically Sized</div>
        <div class="col">Automatically Sized</div>
    </div>
    

    While still having compatibility for col-1 through col-12, so you don't have to edit all of your existing code.

    There will be grid offsets, this is a very much requested feature.

    Other things will be added in a plugin system, where extra modules such as:

    • Navbar
    • Alert messages
    • Full screen hero

    Let me know what you think, and if you have any ideas, comment them below as well, this will all happen in Wing v0.2.0. And all of these changes will lead up to v1.0.0.

  • 7

    Example Section

    If you guys use Wing in your projects, send me the link by commenting below.

    Please use the format of Name - (http://link.com) - Description

    I will make an examples section of people using Wing!

  • 8

    Feature: improve gulpfile

    Hi @KingPixil

    I've cleaned up and improved your gulpfile a bit. Here is a short breakdown of it:

    • Use ES2015 syntax (const, import, arrow functions, template strings)
    • Use ES2015 template strings for banner to make it more readable
    • Remove unused devDependencies
    • Add Sourcemaps to help with debugging
    • Replace deprecated gulp-minify-css with gulp-clean-css
    • Compile CSS files to update URL to http://usewing.ml/
    • Add gulp task for development gulp / npm run start and production gulp build / npm run build
    • Remove global dependencies / CLI tools
    • Update Travic-CI task

    If you got any further questions, feel free to hit me up 😄 🎉

  • 9

    Size of default and outline buttons are different

    I love the simple styles of Wing. It's such a great and minimal library. I wanted to raise an issue which might be a non-issue. The size of the default button and the outline button are a ~ pixel different in size because the default does not have a border and the outline does. I added a 1.5px size border to the default and now both buttons have close to the same size. Is their difference something intentional? I would love to help with this issue and make a contribution to the project but just want to know if this is really something to fix or this was an intentional design decision.

  • 10

    V1.0.0 beta: tables, image helper classes & small improvments

    I will work on this pull request today & tomorrow, but you can have a look and maybe review it a bit.

    Changes:

    Remove @import

    @import url(https://fonts.googleapis.com/css?family=Quicksand);
    @import url(https://fonts.googleapis.com/css?family=Open+Sans);
    

    This 2 requests will block parallel downloads. That means the loading time can be very slowly.

    Recommendation: Use a single <link>:

    <link href="//fonts.googleapis.com/css?family=Quicksand|Open+Sans" rel="stylesheet" type="text/css">
    

    Read more about this here: https://github.com/CSSLint/csslint/wiki/[email protected]

    Tables

    I've added basic tables support (#28).

    If somebody don't wants to have table styled the way wing does, it requires a class for the styles.

    Basic style is just .table. There are more features than can be just enabled by adding the classes:

    • ~~.striped: will add a grey background to every second row~~
    • ~~.hover: will highlight current row on hover~~
    • .responsive: will flip the whole table, so it's mobile friendly. Look a demo here:

    gif responsive table demo

    Image helper classes

    • .img-circle: img as a circle
    • .img-rounded: img with border radius of 3px (like the buttons)
    • .img-fluid: responsive image

    responsive helpers

    • .hide-phone
    • .hide-tablet
  • 11

    Bower and CDN?

  • 12

    Drop shadow, and other styles, appears to be missing from `card` component in css output

    In dist/, the card class seems to be missing drop shadow.

    Compare dist/ version:

    .card {
      display: flex;
      flex-direction: column;
      margin-bottom: 16px;
      border: 1px solid #a7a7a7;
      border-radius: 2px;
    }
    .card .card-content {
      margin: 0;
      padding: 16px;
    }
    .card .card-image {
      display: block;
      height: auto;
      width: 100%;
    }
    

    With what's running on the docs site:

    .card {
      flex-direction: column;
      overflow: hidden;
      flex: 0 1 calc(50% - 0.5rem);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      margin-bottom: 2rem;
    }
    
    .card-header {
      font-weight: 600;
      margin: 0;
      padding: 2rem 3rem 1rem;
    }
    
    .card-body {
      padding: 0 3rem 2rem 3rem;
      min-height: 100px;
    }
    
    .card-footer {
      display: flex;
      align-items: stretch;
      border-top: 1px solid #dbdbdb;
      flex: 1;
    }
    
    .card-footer .card-footer-item {
      display: flex;
      flex-basis: 0;
      flex-grow: 1;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 1rem;
    }
    
    .card-footer-item:not(:first-child) {
      border-left: 1px solid #dbdbdb;
    }
    
    
  • 13

    simplifies code contributions by fully automating dev setup with Gitpod.

    Hi! :slightly_smiling_face:

    This Pr simplifies code contributions by adding Gitpod(a free online VS Code-like IDE).

    With a single click, it will launch a workspace and automatically:

    • clone the wing repo.
    • install the dependencies.

    It seems to work well you can give it a try on my fork of the repo via the following link:

    https://gitpod.io/#https://github.com/nisarhassan12/wing

    image

  • 14

    Browser Testing

    Hi Kabir,

    I used Wing in one project, a simple one page site. I left it for a while and just tested it yesterday in iPad's browser. Not sure if it's the problem in my code or wing's.

    Appreciate that this framework is lightweight but gets everything basic. I tried this framework because sometimes when I use bootstrap I just need the html reset, grid system and couple of variables and mixins. It's good to have less predefines and keep the most frequent use features.

    But seems like the grid system is not work properly in iPad devices. What I saw is each col col-*, first one is. col col-9 filled 100% width of the row, and the 2nd one col col-3 is started to be overflowed.

    It's important to note that the browser I was using is out of date. But I don't find any documentations about the browser compatibility.

    Will browser testing be in the schedule? Or shall we make a browser compatibility list by checking the modern features we are using especially flex?

    Cheers,

    Wing Him